こんにちは。前回に続いてsp版を作ります。前提として、タブレット用のデザインがない場合を想定します。実際の案件でタブレットのデザインまで用意されている場合が経験上ほとんどなかったので。なので、ブレイクポイント(PC版とSP版を切り替える画面サイズ)は768pxにします。768px以下の時にSP版のデザインが適用されます。SP版のheaderは以下のデザインです。(今回はハンバーガーメニューの機能までは作りません。)

〜目次〜
外枠の調整
まずは、ブレイクポイントを768pxにしたためinnerクラスの幅である960px以下、768px以上の時を特別に考える必要があります。
.header__innerクラスは横幅が96remなので、画面幅がそれ以下の時ははみ出します。ブラウザが横スクロールしてくれるのでそんなに問題はありませんが、せっかくなので1画面に収めましょう。また、ロゴとリンクが端に寄ってしまうのでheaderタグにpaddingを入れます。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
header { /*省略*/ padding-left: 1.5rem; padding-right: 1.5rem; } .header__inner { width: 100%; max-width: 96rem; /*省略*/ } |
このようにheader__innerの幅の指定を変更します。基本はheaderタグの幅と同じになりますが、960px以上にはならなくなります。
ロゴとリンクの調整
次にロゴとリンクを調整します。ロゴは中央揃えに、リンクは非表示にして代わりにメニューアイコンを置きます。
メディアクエリは記事の都合上連続で書いていますが、本来は対象のセレクタごとにPC版スタイルのすぐ下に書いた方が見やすいかなと思います。
例:
header {
/*スタイル*/
}
@media screen and (max-width:768px) {
header {
/*スタイル*/
}
}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
index.html <div class="header__inner"> <div class="header__logo"> <!-- 省略 --> </div> <div class="header__nav"> <!-- 省略 --> </div> <!-- ここから追記 --> <div class="header__menu"> <img src="./img/menu.svg" alt=""> </div> <!-- ここまで追記 --> </div> |
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 |
style.css .header__inner { /* 省略 */ position: relative; } @media screen and (max-width:768px) { .header__logo { margin: auto; } } @media screen and (max-width:768px) { .header__nav { display: none; } } .header__menu { display: none; width: 3rem; height: 3rem; position: absolute; top: 1.5rem; right: 0; } @media screen and (max-width:768px) { .header__menu { display: block; } } |
ここでポイントなのが、メニューアイコンの配置の仕方です。単純に要素として入れると、その分ロゴが左に寄ります(画像上)。なので、positionプロパティを用いて指定します。そうすることで要素が重なった状態になり、ロゴがきちんと中央に配置されます(画像下)。

これでSP版も完成です!画面幅の変更によってデザインが変わるようになったでしょうか?
完成コードの確認
最後にここまでのコードを載せます。もし何か問題が起こったら参考にしてみてください。
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 |
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 class="header__menu"> <img src="./img/menu.svg" alt=""> </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 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 |
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; padding-left: 1.5rem; padding-right: 1.5rem; } .header__inner { width: 100%; max-width: 96rem; height: 100%; margin: auto; display: flex; justify-content: space-between; align-items: center; position: relative; } .header__logo { width: 15rem; } @media screen and (max-width:768px) { .header__logo { margin: auto; } } .header__nav { width: 25rem; display: flex; justify-content: space-between; } @media screen and (max-width:768px) { .header__nav { display: none; } } .nav__item { color: #fff; font-size: 2rem; } .header__menu { display: none; width: 3rem; height: 3rem; position: absolute; top: 1.5rem; right: 0; } @media screen and (max-width:768px) { .header__menu { display: block; } } |
さて、第2回はここまでです。いかがでしたでしょうか。次回はトップの画像エリアを制作していきます。
コメントを残す