固定ヘッダーをレスポンシブ化してスマホ対応する手順

この記事では、前回の記事で制作したヘッダーデザインをレスポンシブ対応して、スマホで綺麗に表示する手順を紹介します。

ヘッダーだけだと寂しいので、前回の記事の後半で紹介した、全画面デザインのファーストビューをレスポンシブ化していきます。

今回のゴールはこちら
サンプルページ

レスポンシブイメージ

前回の記事を見てない方は、下記リンク（前回記事）からソースをコピペしておくとスムーズに読み進める事が出来ます。対象の全ソースは記事後半にあります。

HTML+CSSで作る定番のヘッダーデザインをサンプル付きで解説

この記事では HTML5とCSSを使い、シンプルかつ汎用性の高いヘッダーの作り...

それでは早速レスポンシブ対応していきましょう。

レスポンシブ化する大まかな手順
スマホサイズでPCメニューを非表示にする
ハンバーガーメニューを作る
スマホ用のメニュー項目を作成
jQueryでメニューのON・OFFを制御する
HTMLとCSSで作るレスポンシブヘッダーの全コード
まとめ

レスポンシブ化する大まかな手順

大まかな概要は下記の通りです。
ひとつずつ丁寧に説明していきますので、しっかり自分のモノにしていってくださいね。

スマホサイズで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に追加していきます。

index.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」にしましょう。

style.css

#hamburger {
   position: relative;
   display: block;
   width: 30px;
   height: 25px;
   margin: 0 0 0 auto;
}

注目ポイント2つ

1つ目は「position: relative;」

ハンバーガーメニューの線を配置する時に、このボックスを基準にするため、ポジションには「relative」を指定します。

2つ目は「margin」の値に設定した「auto」

前回の記事をご覧の方は、もうご存知ですよね。
親要素の「header」に「display: flex;」が指定してある場合、子要素はスペースを開けたい方向のマージンに「auto」を指定すると、ググっと押し出されます。
左側にマージン「auto」を指定したので、これでハンバーガーメニューはググっと右端まで押し出されます。

ハンガーガーメニューの真ん中の線をデザイン

span要素にCSSを当てて、高さ2pxの白い線を作りましょう。

配置はハンガーメニューの真ん中。コードは次の通りです。

style.css

#hamburger span {
   position: absolute;
   top: 50%;
   left: 0;
   display: block;
   width: 100%;
   height: 2px;
   background-color: #fff;
   transform: translateY(-50%);
}

注目ポイントは2つ

1つ目は「position: absolute;」

先ほど「position: relative;」を設定した、ハンバーガーメニューのボックスを基準に「span」の位置を決めるため「position」に「absolute」を指定します。「top: 50%;」と指定したので「上から丁度半分のところから配置する」という解釈になります。

2つ目は「transform: translateY(-50%);」

「transform」で縦軸の位置を微調整しています。
ハンガーガーメニューの線の高さは「2px」、ポジションで「top: 50%;」を指定しただけでは、中心から「2px」下にずれている状態です。
「translateY(-50%);」を指定すると、その要素の高さの「50％分」を上にズラす事ができます。spanの高さが2pxなので、半分の高さ1px上にズレてくれる分けです。

テキストで理解は難しいので、次の画像で把握してもらえると。

ハンバーガーメニューの上線と下線を作る

擬似要素「::before」「::after」を使い、上線と下線を作っていきます。

擬似要素とは、要素の「最初」と「最後」に「子要素」を追加する事ができるプロパティーです。ウェブ制作で頻繁に登場するので、感覚だけでも掴んでおきましょう。

「::before」がハンバーガーメニューの上線
「::after」がハンバーガーメニューの下線

になります。コードはこちらです。

style.css

#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;」

擬似要素はインライン要素です。必ず「display: block;」でブロック要素にする事。

3つ目は「width: 70%;」

下の線はモダンにしたいので少し短めで「width: 70%;」にしましょう。

ちょっと難しく感じたかもしれませんが、定番な使い方なので、ゆっくりでも慣れていきましょう。

スマホ用のメニュー項目を作成

次に、ハンバーガーメニューをタップしたら表示される、スマホ用のナビゲーションを作っていきます。

HTMLでスマホのナビゲーションをコーディング

コードは次の通りです。

「PCメニュー」と「ハンバーガーメニュー」の間に追加します。

index.html

<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」を指定しています。

style.css

.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;」

z-indexは要素の重なりをコントロールできるプロパティーです。
前面に表示したいので「1」を指定します。

2つ目は「transition」

transitionはその要素に加わる「変化」をアニメーションさせる事ができるプロパティーです。
今回は「ハンバーガーメニュー」と「閉じる」を押した時に、ナビメニューを「表示・非表示」するアニメーションに利用します。

詳細説明をすると、非常に長くなるため、表示・非表示を「0.2秒」でアニメーションさせるコード、と簡単に解釈しておいてください。

スマホメニュー項目の見た目を調整

スマホメニューの項目を綺麗に整えいきましょう。
閉じるボタン一旦後回しにして各項目を装飾していきましょう。

style.css

.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」

スマホメニューの項目を「縦並びで画面の中心」に配置するために、「ul」に「display: flex;」を追加します。
デフォルトでは、子要素が横並びになるように「flex-direction」に「row」が設定されているので、「column」を指定し、縦並びにします。
次に親要素の「上下中央」に配置するために「justify-content」「align-items」には、どちらも「center」を指定しましょう。

2つ目は「padding」

これは意外と忘れがちですが、スマホナビの項目を指でタップし易くする処理を入れます。
各項目の「a」タグと、閉じるボタンの「span」に「padding」を指定し余白をしっかり確保しましょう。

閉じるボタンを装飾する

考え方はシンプルです。

擬似要素「::before」「::after」を使い、2本の線を作成。それぞれ逆方向に45度ずつ傾けているだけです。

手順は、まず「バツ印」の配置の基準にする「.close」クラスに「position: relative;」を指定し、「before」「after」でバツ印を配置します。

コードは次の通りです。

style.css

/*基準となる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度ずつ傾けて」バツ印を作っていきます。

「transform」の「rotate」というプロパティーを使います。
「rotate」はその名の通り、要素を回転させる事ができます。

それぞれ45度ずつ、回転させたいので

beforeには時計回り45度「45deg」を指定
afterには反時計回り45度「-45deg」を指定

このままだと「バツ印」とテキストの「閉じる」が、重なってしまうので、親要素の「.close」クラスに「padding」でスペースを確保しましょう。

スマホメニューを一旦非表示にする

ハンバーガーメニューをタップするまでは「ナビゲーション」は消しておきたいので、一旦非表示にしましょう。

「.sp-nav」クラスに、「opacity」と「位置」を変更するコードを追加します。

style.css

.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%分」上にズラすという解釈です。

「sp-nav」クラスは「高さ」に「100vh」を指定しているので、画面と同じ高さ分上にズラすという事になります。

「opacity」に「0」を指定したので、これでスマホメニューは「透明かつ、画面の外に出ている」状態になります。

jQueryでメニューのON・OFFを制御する

まずjQuery本体を読み込みます

今回はCDN版を使います。
下のURLから公式サイトにアクセスし、下記画像の青枠の箇所をクリックしてください。モーダルが立ち上がるので「バージョン2.2.4」のコードをコピーして「index.html」のheadにペーストしましょう。

jQuery CDN

javascriptの読み込み場所は、body要素の閉じタグの直前や、「async」による非同期読み込み、「defer」などありますが、そういうのはひとまず取っ払って、headで読み込ましょう。

そしてそのすぐ下に、スマホナビゲーションの「表示・非表示を制御する」コードを書きます。コードは次の通りです。

<head>の閉じタグの直前に追加しましょう。

index.html

<!-- 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の基本は「どの要素？」に「何を？」する

という指示を書くのが定番になります。まず前半の次のコードを見てみましょう。

どの要素？の部分を変数に入れる

jQuery

const hum = $('#hamburger, .close')
const nav = $('.sp-nav')

非常に長くなるので、詳しい説明は省きますが

変数 = 数値やコード入れる箱

と解釈してください。ものすごく雑な定義ですが、今回の趣旨はココではないのでこの程度で大丈夫です。
上のコードで「箱」にあたるのは

hum
nav

humとnavにそれぞれ、「要素」を格納していきます。

humには「ハンバーガーメニュー」と「閉じるボタン」
navには「スマホのナビメニュー」

スマホメニューを表示・非表示する処理を書く

コードの後半部分です。

次は「何を？」させるかを書いていきます。

jQuery

hum.on('click', function(){
   nav.toggleClass('toggle');
});

先ほど作った箱（変数）を使いつつ、処理を書いていきます。

ここは逆に言葉で書くととてもシンプルです。

「humに入れた要素」を「クリック」したら
「navに入れた要素」に「toggleというclass」を「足したり・消したり」する

こんな動作になります。
jQueryの書き方については、趣旨がブレるのでまた別の記事で詳しく説明していきますね。

何となくでも、コードの流れを把握しておいてもらえれば大丈夫です。

もう終盤です、頑張りましょう。

toggleClass用のclassを書く

ひとつ前に出てきた

「toggleというclass」を「足したり・消したり」するで出たきた

「toggle」というクラスをCSSに書いていきましょう。

style.css

.toggle {
   transform: translateY( 0 );
   opacity: 1;
}

先ほどのjQueryのコードは

このクラスをナビメニューに「付けたり」「削除」して、表示・非表示をコントロールするためのモノです。

「translateY」に「0」
「opacity」に「1」

を指定して、位置と透明度をリセットしています。

メインビジュアルを微修正して完成

あとは、メインビジュアルの両サイドに余白を少し足して、文字サイズを調整して完成です。

style.css

.main-visual {
   padding: 0 4%;
}
h2 {
   line-height: 1.6;
   text-align: center;
}

以上で完成です。
上手く動作してますか？

念のタメ全コードを載せておきます。

別記事でさらにフェードインを加えてお洒落にする方法も解説しているので、ぜひご覧ください。

CSSで作るスライドするフェードインアニメーション【サンプルあり】

この記事では、ウェブサイトでよく見かける、CSSのフェードインアニメーションのや...

HTMLとCSSで作るレスポンシブヘッダーの全コード

サンプルページ

index.html

<!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>

style.css

@charset "utf-8";
* {
   box-sizing: border-box;
}
body {
   margin: 0;
   padding: 0;
   font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "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;
   }
}