この記事では、前回の記事で制作したヘッダーデザインをレスポンシブ対応して、スマホで綺麗に表示する手順を紹介します。
ヘッダーだけだと寂しいので、前回の記事の後半で紹介した、全画面デザインのファーストビューをレスポンシブ化していきます。
今回のゴールはこちら
サンプルページ
前回の記事を見てない方は、下記リンク(前回記事)からソースをコピペしておくとスムーズに読み進める事が出来ます。対象の全ソースは記事後半にあります。

それでは早速レスポンシブ対応していきましょう。
レスポンシブ化する大まかな手順
大まかな概要は下記の通りです。
ひとつずつ丁寧に説明していきますので、しっかり自分のモノにしていってくださいね。
- スマホサイズでPCメニューを非表示にする。
- ハンバーガーメニューボタンを設置
- スマホ用メニューを追加
- スマホメニューのアニメーション追加
- 動作確認
ハンバーガーメニューをタップすると、SPナビゲーションが表示する仕組みは「jQuery」を使って実装します。
初学者の方や、これからウェブデザインを始める方にとって、難しいかもしれませんが、わずか数行ですので諦めずにチャレンジしてみてください。
細切れにソースを見るのが面倒は人は、記事後半に全ソース載せてるので、そちらをご覧ください。
それではいきましょう
スマホサイズでPCメニューを非表示にする
メディアクエリでブレイクポイントを設定する
いきなり難しい言葉が出てきましたが、心配いりません。
ブラウザの横幅が「何ピクセル以下」になったら「スマホ用のCSS」が効くようにするかを決めているだけです。
今回は、ブラウザの横幅が「640px以下」の時に、スマホ用のCSSを効くようにしたいので、次のように指定します。
コードは、前回記事の後半に記載してあるCSSの続きから書いてください。
@media screen and (max-width: 640px) { ここにスマホ用のCSSを書いていきます }
ココでつまずきそうなら「ただの決まり文句」だと思って、ひとまずコピペして次に進みましょう。
PC用のナビゲーションメニューを非表示にする
スマホサイズの時は、PCメニューは不要なので「display: none;」で非表示にしましょう。
@media screen and (max-width: 640px) { .pc-nav { display: none; } }
試しにブラウザの横幅を小さくしてみてください。PCナビが非表示になれば成功です。
ハンバーガーメニューを作る
それでは、スマホメニューの定番、ハンバーガーメニューボタンを作ります。良く見かける「三本線」のあれです。
ただ、少しモダンな雰囲気にしたいので、3つ目の線は少し短めにしましょう。
HTMLにハンバーガーメニューのコードを追加する
まずは、3本線のメニューボタンを入れるボックスを作ります。
実際にボックスは表示されないので想像しにくいですよね。次の画像の黄色の点線のように、3本線を入れるボックス(箱)を作るイメージすです。
ボックスには「id」で「hamburger」という名前を指定しておきましょう。
そしてその中に「span」タグを一つ追加します。この「span」タグは、3本線の真ん中の線になります。
こちらもCSSと同じく、前回記事の後半で紹介したHTMLに追加していきます。
<header> <h1> <a href="/">RICO NOTES</a> </h1> <nav class="pc-nav"> <ul> <li><a href="#">ABOUT</a></li> <li><a href="#">SERVICE</a></li> <li><a href="#">COMPANY</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> <div id="hamburger"> <span></span> </div> </header>
CSSでハンバーガーメニューの見た目を整える
さて、CSSでハンバーガーメニューボタンを綺麗に整えましょう。
CSSのコードは「PCメニューを非表示にするコード」の下に追加していきます。
まずハンバーガーメニューを入れるボックスの「大きさ」や「配置を」決めます。
横幅は「30px」、高さは「25px」にしましょう。
#hamburger { position: relative; display: block; width: 30px; height: 25px; margin: 0 0 0 auto; }
注目ポイント2つ
1つ目は「position: relative;」
2つ目は「margin」の値に設定した「auto」
親要素の「header」に「display: flex;」が指定してある場合、子要素はスペースを開けたい方向のマージンに「auto」を指定すると、ググっと押し出されます。
左側にマージン「auto」を指定したので、これでハンバーガーメニューはググっと右端まで押し出されます。
ハンガーガーメニューの真ん中の線をデザイン
span要素にCSSを当てて、高さ2pxの白い線を作りましょう。
配置はハンガーメニューの真ん中。コードは次の通りです。
#hamburger span { position: absolute; top: 50%; left: 0; display: block; width: 100%; height: 2px; background-color: #fff; transform: translateY(-50%); }
注目ポイントは2つ
1つ目は「position: absolute;」
2つ目は「transform: translateY(-50%);」
ハンガーガーメニューの線の高さは「2px」、ポジションで「top: 50%;」を指定しただけでは、中心から「2px」下にずれている状態です。
「translateY(-50%);」を指定すると、その要素の高さの「50%分」を上にズラす事ができます。spanの高さが2pxなので、半分の高さ1px上にズレてくれる分けです。
テキストで理解は難しいので、次の画像で把握してもらえると。
ハンバーガーメニューの上線と下線を作る
擬似要素「::before」「::after」を使い、上線と下線を作っていきます。
擬似要素とは、要素の「最初」と「最後」に「子要素」を追加する事ができるプロパティーです。ウェブ制作で頻繁に登場するので、感覚だけでも掴んでおきましょう。
- 「::before」がハンバーガーメニューの上線
- 「::after」がハンバーガーメニューの下線
になります。コードはこちらです。
#hamburger::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background-color: #fff; } #hamburger::after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 70%; height: 2px; background-color: #fff; }
重複しているコードが多く、まとめて書くのがセオリーですが、分かりやすいように別々に書いています。
注目ポイントは3つ
1つ目は「content: ‘ ‘;」
擬似要素「::before」「::after」は、「content」にテキストや記号を追加して、文字や装飾を加えるというのがオーソドックスな使い方で、シングルクォーテーションの間に「テキスト」なり「記号」なりを記載して、要素の前後にコンテンツを追加する事ができます。
今回は、文字や記号を表示する分けではないので、シングルクォーテーションの間は空「’ ‘」にしましょう。その他のコードは、真ん中の線「span」に当てたCSSとほぼ同じです。
2つ目は「display: block;」
3つ目は「width: 70%;」
ちょっと難しく感じたかもしれませんが、定番な使い方なので、ゆっくりでも慣れていきましょう。
スマホ用のメニュー項目を作成
次に、ハンバーガーメニューをタップしたら表示される、スマホ用のナビゲーションを作っていきます。
HTMLでスマホのナビゲーションをコーディング
コードは次の通りです。
「PCメニュー」と「ハンバーガーメニュー」の間に追加します。
<nav class="sp-nav"> <ul> <li><a href="#">ABOUT</a></li> <li><a href="#">SERVICE</a></li> <li><a href="#">COMPANY</a></li> <li><a href="#">CONTACT</a></li> <li class="close"><span>閉じる</span></li> </ul> </nav>
スマホのナビゲーションをCSSで装飾
CSSのコード量が多く難しく見えますが、ひとつずつ見ていくとシンプルです。
ナビメニューは今風に、全画面で表示したいので「高さ」は「100vh」を指定しています。
.sp-nav { z-index: 1; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; display: block; width: 100%; background: rgba(0, 0, 0, .8); transition: all .2s ease-in-out; }
注目ポイントは2つ
1つ目は「z-index: 1;」
前面に表示したいので「1」を指定します。
2つ目は「transition」
今回は「ハンバーガーメニュー」と「閉じる」を押した時に、ナビメニューを「表示・非表示」するアニメーションに利用します。
詳細説明をすると、非常に長くなるため、表示・非表示を「0.2秒」でアニメーションさせるコード、と簡単に解釈しておいてください。
スマホメニュー項目の見た目を調整
スマホメニューの項目を綺麗に整えいきましょう。
閉じるボタン一旦後回しにして各項目を装飾していきましょう。
.sp-nav ul { padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; } .sp-nav li { margin: 0; padding: 0; } .sp-nav li span { font-size: 15px; color: #fff; } .sp-nav li a, .sp-nav li span { display: block; padding: 20px 0; }
注目ポイントは2つ
1つ目は「FlexBox」
デフォルトでは、子要素が横並びになるように「flex-direction」に「row」が設定されているので、「column」を指定し、縦並びにします。
次に親要素の「上下中央」に配置するために「justify-content」「align-items」には、どちらも「center」を指定しましょう。
2つ目は「padding」
各項目の「a」タグと、閉じるボタンの「span」に「padding」を指定し余白をしっかり確保しましょう。
閉じるボタンを装飾する
考え方はシンプルです。
擬似要素「::before」「::after」を使い、2本の線を作成。それぞれ逆方向に45度ずつ傾けているだけです。
手順は、まず「バツ印」の配置の基準にする「.close」クラスに「position: relative;」を指定し、「before」「after」でバツ印を配置します。
コードは次の通りです。
/*基準となるli要素*/ .sp-nav .close { position: relative; padding-left: 20px; } /*バツ印線1*/ .sp-nav .close::before { content: ''; position: absolute; top: 50%; left: 0; display: block; width: 16px; height: 1px; background: #fff; transform: rotate( 45deg ); } /*バツ印線2*/ .sp-nav .close::after { content: ''; position: absolute; top: 50%; left: 0; display: block; width: 16px; height: 1px; background: #fff; transform: rotate( -45deg ); }
擬似要素それぞれに「position: absolute;」を指定し、「top: 50%;」のところに配置。ここまでは、ハンバーガーメニューの線と同じです。
ここから「45度ずつ傾けて」バツ印を作っていきます。
「rotate」はその名の通り、要素を回転させる事ができます。
それぞれ45度ずつ、回転させたいので
- beforeには時計回り45度「45deg」を指定
- afterには反時計回り45度「-45deg」を指定
このままだと「バツ印」とテキストの「閉じる」が、重なってしまうので、親要素の「.close」クラスに「padding」でスペースを確保しましょう。
スマホメニューを一旦非表示にする
ハンバーガーメニューをタップするまでは「ナビゲーション」は消しておきたいので、一旦非表示にしましょう。
「.sp-nav」クラスに、「opacity」と「位置」を変更するコードを追加します。
.sp-nav { z-index: 1; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; display: block; width: 100%; background: rgba(0, 0, 0, .8); transition: all .2s ease-in-out; opacity: 0; transform: translateY(-100%); }
translateY(-100%)
またtransformが出てきました。ハンバーガーメニューの真ん中の線の時と同様ですね。
今回は要素の「高さ」の「100%分」上にズラすという解釈です。
「opacity」に「0」を指定したので、これでスマホメニューは「透明かつ、画面の外に出ている」状態になります。
jQueryでメニューのON・OFFを制御する
まずjQuery本体を読み込みます
今回はCDN版を使います。
下のURLから公式サイトにアクセスし、下記画像の青枠の箇所をクリックしてください。モーダルが立ち上がるので「バージョン2.2.4」のコードをコピーして「index.html」のheadにペーストしましょう。
そしてそのすぐ下に、スマホナビゲーションの「表示・非表示を制御する」コードを書きます。コードは次の通りです。
<head>の閉じタグの直前に追加しましょう。
<!-- jQueryの読み込み --> <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> <!-- スマホナビの表示・非表示 --> <script> $(function() { const hum = $('#hamburger, .close') const nav = $('.sp-nav') hum.on('click', function(){ nav.toggleClass('toggle'); }); }); </script>
jQueryの基本は「どの要素?」に「何を?」する
という指示を書くのが定番になります。まず前半の次のコードを見てみましょう。
どの要素?の部分を変数に入れる
const hum = $('#hamburger, .close') const nav = $('.sp-nav')
非常に長くなるので、詳しい説明は省きますが
変数 = 数値やコード入れる箱
と解釈してください。ものすごく雑な定義ですが、今回の趣旨はココではないのでこの程度で大丈夫です。
上のコードで「箱」にあたるのは
- hum
- nav
humとnavにそれぞれ、「要素」を格納していきます。
- humには「ハンバーガーメニュー」と「閉じるボタン」
- navには「スマホのナビメニュー」
スマホメニューを表示・非表示する処理を書く
コードの後半部分です。
次は「何を?」させるかを書いていきます。
hum.on('click', function(){ nav.toggleClass('toggle'); });
先ほど作った箱(変数)を使いつつ、処理を書いていきます。
ここは逆に言葉で書くととてもシンプルです。
「navに入れた要素」に「toggleというclass」を「足したり・消したり」する
こんな動作になります。
jQueryの書き方については、趣旨がブレるのでまた別の記事で詳しく説明していきますね。
何となくでも、コードの流れを把握しておいてもらえれば大丈夫です。
もう終盤です、頑張りましょう。
toggleClass用のclassを書く
ひとつ前に出てきた
「toggleというclass」を「足したり・消したり」するで出たきた
「toggle」というクラスをCSSに書いていきましょう。
.toggle { transform: translateY( 0 ); opacity: 1; }
先ほどのjQueryのコードは
このクラスをナビメニューに「付けたり」「削除」して、表示・非表示をコントロールするためのモノです。
「opacity」に「1」
を指定して、位置と透明度をリセットしています。
メインビジュアルを微修正して完成
あとは、メインビジュアルの両サイドに余白を少し足して、文字サイズを調整して完成です。
.main-visual { padding: 0 4%; } h2 { line-height: 1.6; text-align: center; }
以上で完成です。
上手く動作してますか?
念のタメ全コードを載せておきます。
別記事でさらにフェードインを加えてお洒落にする方法も解説しているので、ぜひご覧ください。

HTMLとCSSで作るレスポンシブヘッダーの全コード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="robots" content="noindex,nofollow"> <title>HTMLベーステンプレート</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> <script> $(function() { const hum = $('#hamburger, .close') const nav = $('.sp-nav') hum.on('click', function(){ nav.toggleClass('toggle'); }); }); </script> </head> <body> <header> <h1> <a href="/">RICO NOTES</a> </h1> <nav class="pc-nav"> <ul> <li><a href="#">ABOUT</a></li> <li><a href="#">SERVICE</a></li> <li><a href="#">COMPANY</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> <nav class="sp-nav"> <ul> <li><a href="#">ABOUT</a></li> <li><a href="#">SERVICE</a></li> <li><a href="#">COMPANY</a></li> <li><a href="#">CONTACT</a></li> <li class="close"><span>閉じる</span></li> </ul> </nav> <div id="hamburger"> <span></span> </div> </header> <div class="main-visual"> <h2>WEB DESIGN <span>IS</span> YOUR FUTURE</h2> </div> </body> </html>
@charset "utf-8"; * { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "MS Pゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #e6e6e6; letter-spacing : 0.2em; } header { padding: 30px 4% 10px; position: fixed; top: 0; width: 100%; background-color: transparent; display: flex; align-items: center; } h1 { margin: 0; padding: 0; font-size: 20px; } a { text-decoration: none; color: #fff; } nav { margin: 0 0 0 auto; } ul { list-style: none; margin: 0; display: flex; } li { margin: 0 0 0 15px; font-size: 14px; } .main-visual { display: flex; justify-content: center; align-items: center; height: 100vh; background: url('main_visual.jpg') top center / cover no-repeat; } h2 { margin: 0; font-size: 30px; font-weight: normal; color: #fff; } .sp-nav { display: none; } @media screen and (max-width: 640px) { .pc-nav { display: none; } .sp-nav { z-index: 1; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; display: block; width: 100%; background: rgba(0, 0, 0, .8); opacity: 0; transform: translateY(-100%); transition: all .2s ease-in-out; } #hamburger { position: relative; display: block; width: 30px; height: 25px; margin: 0 0 0 auto; } #hamburger span { position: absolute; top: 50%; left: 0; display: block; width: 100%; height: 2px; background-color: #fff; transform: translateY(-50%); } #hamburger::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background-color: #fff; } #hamburger::after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 70%; height: 2px; background-color: #fff; } /*スマホメニュー*/ .sp-nav ul { padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; } .sp-nav li { margin: 0; padding: 0; } .sp-nav li span { font-size: 15px; color: #fff; } .sp-nav li a, .sp-nav li span { display: block; padding: 20px 0; } /*-閉じるアイコンー*/ .sp-nav .close { position: relative; padding-left: 20px; } .sp-nav .close::before { content: ''; position: absolute; top: 50%; left: 0; display: block; width: 16px; height: 1px; background: #fff; transform: rotate( 45deg ); } .sp-nav .close::after { content: ''; position: absolute; top: 50%; left: 0; display: block; width: 16px; height: 1px; background: #fff; transform: rotate( -45deg ); } .toggle { transform: translateY( 0 ); opacity: 1; } .main-visual { padding: 0 4%; } h2 { line-height: 1.6; text-align: center; } }
まとめ
今回紹介した、HTMLとCSSで作るレスポンシブヘッダーは、とても多くのサイト制作で活躍してくれる、ベーシックなものです。
初学者の方や、初めてweb制作をする方にとっては、つまずく箇所も多いかと思います。
この記事でどうしても分からない部分があれば、お問い合わせください。
もう少し分かり易く、冗長的にならずに説明できればよかったんですが、私も記事の書き方をもっと勉強していきますね。
かなり長くなってしまいましたが、少しでもみなさまのお役に立てていれば幸いです。
それでは!