ネットの情報を頼りにコーディング学習を進めていると高確率でお世話になるのが東京フリーランスさんの「30DAYSトライアル」です。
最初の頃は「Progate」での学習なので模範解答を見ながら進められます。しかし、２ndの「デザインデータからコーディング」あたりになってくると解答がないのでググりながら作業を進めていく感じになります。
あれ〜。Progateのときはサクサク進めたのに、デザインデータだけ見てコーディングとなると何からやったらいいかわからない。手が止まっちゃったよ。
ここで、ググりながらでも進めれば良いのですが途中でハマってしまうことがあります。何時間も足踏み状態なんてザラですよね？わたしもよくパソコンに向かって「なんで〜！」って叫びます。
そこで今回は「よくあるヘッダー」でハマっていた過去の自分に向けて、そして学習のアウトプットとして考え方について書いていきたいと思います。
この記事のポイント
- よくあるヘッダーの作り方がわかる
- Flexboxの横並びの方法がわかる
- Flexboxの両端配置の方法がわかる
それでは早速、行ってみましょう！
もくじ
【30DAYトライアル】よくあるヘッダーとは？
こういうやつです。よく見ますよね？左側にロゴがあって右側にナビゲーションメニューがあるやつです。
まずは完成形を見ながらブロック分けするところから始めていきましょう。。
まずはコードです
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!-- 背景 --> <div class="big-bg"> <!-- ヘッダー --> <header class="header"> <div class="header-inner inner"> <!-- ヘッダーロゴ --> <h1 class="header-logo"><a href=""><img src="images/logo@2x.png" alt=""></a></h1> <!-- ヘッダーメニュー --> <nav class="header-nav"> <ul class="header-list"> <li class="header-list-item"><a href="#card">Card</a></li> <li class="header-list-item"><a href="#news">News</a></li> <li class="header-list-item"><a href="#price">Price</a></li> <li class="header-list-item"><a href="#access">Access</a></li> <li class="header-list-item"><a href="#contact">Contact</a></li> </ul> </nav> </div><!-- /inner --> </header><!-- /header --> <!-- ホームコンテンツ --> <div class="home-content inner"> <h2 class="site-title">一番伝えたいことを書く</h2> <p class="site-title-sub">リードリードリード</p> <a class="contact-btn btn" href="">お問い合わせ</a> </div><!-- /home-content --> </div><!-- /big-bg --> |
CSS
散らかっててすみません。勉強中なので理解できたらシェアしますね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
body { font-family: 'Yu Gothic', 'sans-serif'; } a { text-decoration: none; /* aタグの下線を削除 */ } li { list-style: none; } /*---------------------------- ヘッダー -----------------------------*/ .header { width: 100%; height: 100px; background-color: #3F51B5; } .inner { width: 100%; max-width: 1086px; margin: 0 auto; /* インナーを中寄せ */ } .header-inner { display: flex; /* ロゴとメニューを横並び */ justify-content: space-between; /* ロゴとメニューを左右に配置 */ } /* ヘッダーロゴ */ .header-logo img { width: 200px; margin-top: 31px; } /* ヘッダーリスト */ .header-list { display: flex; /* メニューを横並び */ margin-top: 40px; font-size: 14.8px; } .header-list a { padding-bottom: 4.5px; /* 文字と下線のあいだの余白 */ color: #ffffff; line-height: 1.6; } .header-list a:hover { /* マウスを乗せた時の設定 */ border-bottom: 3px solid #E81919; } .header-list-item { margin-left: 30px; /* メニュー同士の余白 */ } /* ホームコンテンツ */ .site-title { padding-top: 149px; font-size: 4.25em; line-height: 1.29; } .site-title-sub { margin-top: 12px; font-size: 2.37em; font-weight: bold; line-height: 1.3; } /* お問い合わせボタン */ .contact-btn { display: inline-block; margin: 82px 0 138px; padding: 17px 81px; color: #ffffff; font-size: 2.37em; font-weight: bold; line-height: 1.3; } /* ボタン共通部分 */ .btn { border-radius: 12px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); background-color: #3F51B5; } .home-content { text-align: center; } /* 背景 */ .big-bg { min-height: 100vh; background-size: cover; background-image: url(../images/mainvisual@2x.png); background-position: center; } |
【Flexbox】がお手軽で便利です
配置についてですがわたしは「Flexbox」を使います。配置の仕方がわりとやりやすいです。
Flexboxは「Webクリエイターボックス」さんの記事がとてもわかりやすいので、ぜひのぞいてみてください。
考え方はこちらです。
- ナビゲーションメニューを横並びにする
- ロゴとナビゲーションメニューを横並びにする
- ロゴとナビゲーションメニューを左右に配置す
- タイトルとかの文字もろもろを設定
- 配置を整える
- 背景を設定
レスポンシブ化が残ってますが長くなりそうなので一旦ここまで解説します。
順番に解説します
STEP.1
HTMLを作成
まずHTMLです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!-- ヘッダー --> <header class="header"> <div class="header-inner inner"> <!-- ヘッダーロゴ --> <h1 class="header-logo"><a href=""><img src="images/logo@2x.png" alt=""></a></h1> <!-- ヘッダーメニュー --> <nav class="header-nav"> <ul class="header-list"> <li class="header-list-item"><a href="#card">Card</a></li> <li class="header-list-item"><a href="#news">News</a></li> <li class="header-list-item"><a href="#price">Price</a></li> <li class="header-list-item"><a href="#access">Access</a></li> <li class="header-list-item"><a href="#contact">Contact</a></li> </ul> </nav> </div><!-- /inner --> </header><!-- /header --> |
STEP.2
背景色の変更
見やすいように背景色を変えます。
|
1 2 3 4 5 |
.header { width: 100%; height: 100px; background-color: #3F51B5; } |
STEP.3
innerの設定
innerの設定をします。
|
1 2 3 4 5 |
.inner { width: 100%; max-width: 1086px; margin: 0 auto; /* インナーを中寄せ */ } |
はにわまんさん（@haniwa008）がとてもわかりやすく解説してくださっています。
参考
レイアウトの基本である.innerの中央寄せを覚えよう！HPcode
STEP.4
ロゴの設定
ロゴの幅を小さくして、上に余白を作ります。
|
1 2 3 4 |
.header-logo img { width: 200px; margin-top: 31px; } |
STEP.5
メニューを横並び
メニューをflexboxで横並びにします。つでに色も変えときます。
|
1 2 3 4 5 6 7 8 9 |
.header-list { display: flex; /* メニューを横並び */ font-size: 14.8px; } .header-list a { color: #ffffff; line-height: 1.6; } |
STEP.6
ロゴとメニューを左右に配置
ロゴとメニューをflexboxで横並びにして、左右に配置します。
|
1 2 3 4 |
.header-inner { display: flex; /* ロゴとメニューを横並び */ justify-content: space-between; /* ロゴとメニューを左右に配置 */ } |
STEP.7
メニューの位置調整
メニューの位置を調整とマウスを乗せたときに下線を表示させます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.header-list { display: flex; /* メニューを横並び */ margin-top: 40px; /* 追加分 */ font-size: 14.8px; } .header-list-item { margin-left: 30px; /* メニュー同士の余白 */ } .header-list a { padding-bottom: 4.5px; /* 文字と下線のあいだの余白 */ color: #ffffff; line-height: 1.6; } .header-list a:hover { /* マウスを乗せた時の設定 */ border-bottom: 3px solid #E81919; } |
STEP.8
テキストの作成
ここは特にないですね（笑）
|
1 2 3 4 5 6 |
<!-- ホームコンテンツ --> <div class="home-content inner"> <h2 class="site-title">一番伝えたいことを書く</h2> <p class="site-title-sub">リードリードリード</p> <a class="contact-btn btn" href="">お問い合わせ</a> </div><!-- /home-content --> |
STEP.9
テキストの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.site-title { font-size: 4.25em; line-height: 1.29; } .site-title-sub { font-size: 2.37em; font-weight: bold; line-height: 1.3; } /* お問い合わせボタン */ .contact-btn { display: inline-block; padding: 17px 81px; color: #ffffff; font-size: 2.37em; font-weight: bold; line-height: 1.3; } .home-content { text-align: center; } |
STEP.10
テキストの位置調整
縦方向の余白を設定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.site-title { padding-top: 149px; /* 追加分 */ font-size: 4.25em; line-height: 1.29; } .site-title-sub { margin-top: 12px; /* 追加分 */ font-size: 2.37em; font-weight: bold; line-height: 1.3; } /* お問い合わせボタン */ .contact-btn { display: inline-block; margin: 82px 0 138px; /* 追加分 */ padding: 17px 81px; color: #ffffff; font-size: 2.37em; font-weight: bold; line-height: 1.3; } |
STEP.11
お問い合わせボタンの設定
ボタンはこの後も出てくるのでクラスを「共有部分」と「共有できない部分」で分けると少し楽できます（笑）
|
1 2 3 4 5 |
.btn { border-radius: 12px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); background-color: #3F51B5; } |
STEP.12
背景を設定する
背景を設定するときに画面いっぱいに表示させるようにしました。HTML の１番そとを「div class=”big-bg”」で囲います。
クラス名はお好みで。
|
1 2 3 4 5 6 7 |
/* 背景 */ .big-bg { min-height: 100vh; background-size: cover; background-image: url(../images/mainvisual@2x.png); background-position: center; } |
XDの数字と若干違うところもありますが「PerfectPixel」でチェックして微調整したためです。
学びを自分のものにする学習方法
コードをコピペするだけではあまり学習の効果が出ないので、ここでおすすめの学習方法についてシェアします。
わたしは、「CODEPEN」という無料のWebサービスを使っています。
CODEPEN知らないよ。というかたはこちらをどうぞ。
CODEPENとは？登録から使い方まで紹介します
CODEPENでCSSの数値を色々と変えてみて、この数値を変えるとどこの表示が変わるかを確かめます。
そうすると他で応用できるようになってくるのでおすすめです。
さて、いかがだったでしょうか。
これが正解という訳ではありませんが一つのやり方としてお役に立てれば幸いです。
コーディング学習はハマると辛いですが、諦めなければ勝てると思っていますので一緒に頑張りましょう！
それではまた！ごきげんよ〜♪
