みみぺんブログ

WEBデザイナー、エンジニア、プログラマー向けの記事を投稿します

かなきち

コーディング練習(5) positionを使用してトップへ戻るボタンを実装しよう

こんにちは、かなきち(@kanakichi0801)です。 この記事で、トップへ戻るボタンをpositionプロパティを使用して実装していきます。 今回コーディングする箇所はフッターです。フッターにはよくコピーライトがあります。コピーライトの記述する際に使用するタ…

position プロパティまとめ!基本から応用まで徹底解説!(relative・absolute・fixed・static)【CSS初心者入門】

こんにちは、かなきち(@kanakichi0801)です。今回は、CSSプロパティpositionについて解説していきます! 要素を自由な位置に配置する方法がこの記事で分かります! コーディングを始めたばかりの人でも、このプロパティの存在はなんとなくご存知なのではない…

コーディング練習(4) Google mapの埋め込み方&拡大方法を解説

こんにちは、かなきち(@kanakichi0801)です。 前回の続きで、今回は以下の部分をコーディングしていきます。さっそく作成するという方はこちらをクリック! 今回はちょっと長めです。めげずに一緒にやりきりましょう! 前回の記事をまだ見ていないよという方…

コーディング練習(3)特殊文字を使いメニュー表を実装しよう!

こんにちは、かなきち(@kanakichi0801)です。 前回の続きで、今回は以下の部分をコーディングして行きます。さっそく作成するという方はこちらをクリック! 前回の記事をまだ見ていないよという方は、以下記事から一緒にホームページを作成してみましょう! …

コーディング練習(2) 隣接セレクタ(li + li)の使い方

こんにちは、かなきち(@kanakichi0801)です。 前回の続きで、今回は以下の部分をコーディングして行きます。 さっそく作成するという方はこちらをクリック! 前回の記事をまだ見ていないよという方は、以下記事から一緒にホームページを作成してみましょう!…

コーディング練習(1) ヘッダーとメインビジュアルを作ろう!

こんにちは、かなきち(@kanakichi0801)です 今回から、ホームページの作成に入っていきます! しかし、これが必ずしも100%正解ではありません。コーディングにはいろんな組み方がありますのであくまで参考としてお読みください。 また、初心者向けということ…

CSSで横並びにする方法 〜初心者はどれを選択すればいい?〜 Inline-block・Float・Flexbox〜 【CSS初心者入門】

こんにちは、かなきち(@kanakichi0801)です 今回は、CSS初心者入門【第五回】ということで、CSSで横並びにする方法を紹介していくよ! 横並びにする方法は数あれど、初心者が選択すべき方法はどれなのか? 迷うところですよね。 この記事では、Inline-block…

widthとheightの使い方まとめと注意点について【CSS初心者入門】

こんにちは、かなきち(@kanakichi0801)です 今回は、CSS初心者入門【第四回】ということで、width(幅)とheight(高さ)の使い方と注意点を紹介していくよ! 「width:100%と指定したら要素がはみ出てしまう。。。なんで?」とこの記事に辿り着いた方、そのもや…

ムームードメインをヘテムルサーバーに紐づける方法を画像付きで解説!

こんにちは、かなきち(@kanakichi0801)です 今回は、番外編です。ムームードメインをヘテムルサーバーで使う方法をご紹介します。ホームページを作成するにはドメイン取得とサーバー設定が不可欠!始めやすいムームードメインの取得方法からそれをヘテムルサ…

display:inline、inline-blickの特徴を3分で理解し使いこなそう【CSS初心者入門】

こんにちは、かなきち(@kanakichi0801)です 今回は、CSS初心者入門【第三回】ということで、インライン要素とdisplay: inline-blockについてわかりやすく解説していくよ! この記事は前回のブロック要素と display: block の記事の続きです。まだ読んでいな…

display:blockの特徴を3分で理解し使いこなそう【CSS初心者入門】

こんにちは、かなきち(@kanakichi0801)です 今回は、CSS初心者入門【第二回】ということで、ブロックレベル要素とdisplay:blockについてわかりやすく解説していくよ! 【CSS初心者入門】第一回目でmarginとpaddingについて解説したけど、それよりも先にdispl…

marginとpaddingを総まとめ!イラスト付きでわかりやすく解説【CSS初心者入門】

こんにちは、かなきち(@kanakichi0801)です。 今回は、CSS初心者入門【第一回】ということで、marginとpaddingについて解説して行きます。 最初にCSSのおさらい。次にmarginとpaddingの違いをアボカドを使ってわかりやすく解説をします。 その後に、実際の使…

練習用デザイン無料配布!WEBコーディング初心者がすべき事前準備とは?

こんにちは、かなきち(@kanakichi0801)です 今後、簡単なサイトを1サイト作っていきます! お金をかけずに、コーディングの勉強ができる記事を日々あげていきますので他の記事も見ていただけたら幸いです。 以下のリンクからコーディング練習用の完成デザイ…

CSSとは?リセットCSSも解説【CSS初心者入門】

こんにちは、かなきち(@kanakichi0801)です この記事を読むとCSSとは?から、CSSの基本の書き方とリセットCSSについて知ることができるよ! CSSとは? CSSの基本構造 CSSの記述ルール 実際にCSSを使うと CSS付属品の説明※飛ばしてOK! リセットCSSとは? 余…

初心者は HTMLタグを4つだけ覚えればいい!【div・a・img・h】

こんにちは、かなきち(@kanakichi0801)です この記事で紹介する4つのタグを覚えればホームページは作れます。さっそく書いていきます。 divタグとは? 同じ種類のタグには、classをつけよう 命名規則 部位 種類 詳細 番号 状態 idは使わないようにしよう。 …

【コピペ用】HTML基本コード!覚えるべきところだけを解説

こんにちは、かなきち(@kanakichi0801)です 前回は超初級編と言うことでブラウザに文字や画像を表示させたり、リンク(URL)を設置しました。 今回は続きで使用したホームページを作る土台、HTMLの基本構造について解説をしていきます。 blog.mimipen.net この…

ホームページ制作を10分で体験!HTMLをコピペで簡単にページ作成

こんにちは、かなきち(@kanakichi0801)です 今回は、WEB業界を目指す第4回という事で、やっとコードを書いていくよ! 前回までは、WEB業界の職種とその役割、お金のこと。事前準備ということで、Chrome(クローム)というブラウザをインストールしてもらいまし…

Google Chromeオススメ拡張機能 3選!WEB担当必見です!

こんにちは、かなきち(@kanakichi0801)です 技術系記事、第3回目です。 ↓この記事の続きです blog.mimipen.net 今回は、web業界の方だけではなく、仕事でパソコンをという方全てに向けての記事になります。 この記事を読むと次のことがわかるよ! ブラウザ…

WEB業界への転職をお考えの方へ初任給相場とおすすめのPCを紹介!

こんにちは、かなきち(@kanakichi0801)です 技術系記事、第2回目です。 この記事を読むとWEB業界の職種とその役割、各職種の初任給相場が分かるよ 関わる職種とその役割 WEBディレクターとは WEBデザイナーとは コーダーとは 職種ごとの転職難易度 WEBディ…

現役WEBデザイナーがWEB業界のお給料や転職のしやすさなど、よくある疑問に答えます!

こんにちは、かなきち(@kanakichi0801)です 技術系記事、第1回目です。 この記事を読むと手に職をつけるべき理由とWEB業界の残業事情、給料の上がり方、転職のしやすさが分かるよ はじめに、手に職をつけるべき理由 今後書いていく内容 ブログのコンセプト …