こんにちは。前回に続いて、header部分を作っていきます。以下の画像の部分です。PC版を作ってからレスポンシブにしていきます。

〜目次〜
外枠の作成
まずは一番外側の要素です。背景黒、横幅100%、縦幅6remにします。headerタグに対してスタイルを書きます。
1 2 3 4 5 6 7 |
style.css header { width: 100%; height: 6rem; background: #000; } |
この次が今回のポイントです。どのようにロゴと3つのリンクを配置するのかについて詳しく書いていきます。
僕がよくやるのは、innerクラスを作って中央寄せする方法です。innerクラスのサイズを外側より小さくして両サイドの余白を確保します。
1 2 3 4 5 6 |
index.html <header> <div class="header__inner"> </div> </header> |
1 2 3 4 5 6 7 |
style.css .header__inner { width: 96rem; height: 100%; margin: auto; } |
こうすると次の画像のような状態になります。

これで余白が確保できていますね。
余白を入れる方法として、他にもpaddingを使う方法もあります。上の方法とはブラウザ幅が変わった時に中の要素の動きに違いが出ます。画像上がinnerクラスを使った場合、下がpaddingで余白を作った場合です。

このような違いになります。innerクラスはそのdivの幅が固定なので、ロゴとリンクの間隔は保たれ余白が縮まります。
paddingで余白を作った場合は、余白が固定なのでロゴとリンクの間隔が縮まります。
今回はリンクの要素の幅がそれほどないので大きな問題にはなりませんが、長くなった場合に下の方法だと文字が2行になったりして見栄えが良くないので基本は上の方法にしています。とはいえデザインによってどうすればいいか変わってくるので、場合に合わせてコーディングしましょう。
ロゴ、リンクの作成
それではロゴとリンクを入れていきましょう。display: flexを使う方法がおすすめです。header__innerの中に2つのdivを用意して、それをjustify-content: space-betweenで両端に寄せます。また、縦方向にも中央ぞろえをしておきます。
1 2 3 4 5 6 7 8 9 10 11 |
index.html <div class="header__inner"> <!-- ここから追記 --> <div class="header__logo"> </div> <div class="header__nav"> </div> <!-- ここまで追記 --> </div> |
1 2 3 4 5 6 7 8 9 |
style.css .header__inner { /*省略*/ display: flex; justify-content: space-between; align-items: center; } |
続いて中の要素を入れます。リンク先は一旦仮のものを入れます。
リンク部分もdisplay: flexで横並べにしておきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="header__inner"> <div class="header__logo"> <!-- ここから追記 --> <img src="./img/logo.png"> <!-- ここまで追記 --> </div> <div class="header__nav"> <!-- ここから追記 --> <a href="#" class="nav__item">リンク1</a> <a href="#" class="nav__item">リンク2</a> <a href="#" class="nav__item">リンク3</a> <!-- ここまで追記 --> </div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
style.css .header__logo { width: 15rem; } .header__nav { width: 25rem; display: flex; justify-content: space-between; } .nav__item { color: #fff; font-size: 2rem; } |
これでPC版は完成です!以下の画像のようになっていますか?

完成コードの確認
最後にここまでのコードを載せます。もし何か問題が起こったら参考にしてみてください。
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 |
index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>test</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style/style.css"> </head> <body> <header> <div class="header__inner"> <div class="header__logo"> <img src="./img/logo.png"> </div> <div class="header__nav"> <a href="#section1" class="nav__item">リンク1</a> <a href="#section2" class="nav__item">リンク2</a> <a href="#section3" class="nav__item">リンク3</a> </div> </div> </header> <div class="body"> </div> <footer> </footer> </body> </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 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 |
style.css * { box-sizing: border-box; } html { font-size: 62.5%; } body { font-size: 1.6rem; margin: 0; } a { display: block; color: #000; text-decoration: none; } img { display: block; width: 100%; height: auto; } header { width: 100%; height: 6rem; background: #000; } .header__inner { width: 96rem; height: 100%; margin: auto; display: flex; justify-content: space-between; align-items: center; } .header__logo { width: 15rem; } .header__nav { width: 25rem; display: flex; justify-content: space-between; } .nav__item { color: #fff; font-size: 2rem; } |
第1回はここまでです。いかがでしたでしょうか。次回はheaderのSP版を制作していきます。
コメントを残す