
1. スマホ閲覧用ヘッダーメニュー
サイトをスマホでみる場合、PCでみたときののようなメニューバーは表示されず、最初はメニュー項目を隠してあることが一般的です。
図1-1 スマホ閲覧用のヘッダー
PCとは違い表示スペースが限られるスマホでは、図1-2のようにメニュー項目を表示させるためのアイコンを配置して、アイコンをタップすることにより、メニュー項目を表示させるという手法を多くのサイトで採用しています。
メニューアイコンは三本線で表されることが多く、その形から「ハンバーガーメニュー」ともよばれています。また、アイコンタップにより、スライドして出てくるメニュー(図1-2の右側画像)のことを「ドロワーメニュー」といいます。
この記事では、上記のようにヘッダーにメニューアイコンを配置して、アイコンタップによりメニュー項目を表示させる機能を静的なサイト(スマホ閲覧時)に実装する方法について説明します。
なお、PC閲覧時のヘッダーメニュー(メニューバー)の実装につきましては、以下の記事をご覧ください。

静的サイトのヘッダーメニューをつくる【メニューバーの実装 ~ PC閲覧編】
PC閲覧用の静的サイトにヘッダーメニュー(メニューバー)を実装する方法について解説します、
2. HTMLでハンバーガーメニューの型とメニュー項目リストをつくる
ハンバーガーメニューの型とメニュー項目リストをつくるには、以下のようにHTMLを記述します。メニュー項目は、ULタグとLIタグを使用したリスト形式になっています。
自サイトでは、メニュー項目として、TOPページへのリンク、サイトマップ、ブログサイトへのリンク、プライバシーポリシー、お問い合わせの5項目を設定しています。
1 |
もちろん、このままではスマホで見た場合、メニュー項目が縦並びにリスト表示されるだけですので、スタイルシートにハンバーガーメニューのスタイルを設定して、メニューアイコンをタップすることによりドロワーメニューがスライドして出てくるようにします。
3. ハンバーガーメニューのスタイルを設定する
自サイトのハンバーガーメニュースタイルを設定したCSSコードおよび、コード内番号の説明を以下に示します。
①div id=”nav-drawer”内に、メニューアイコン、ドロワーメニューとメニュー項目ほか全てを詰め込む
②非表示のチェックボックスを用意し、CSSの切り替えに使用する
③ハンバーガーアイコンを設置するスペースを設定:次要素を横並びで配置するように「float: left」を指定
④ハンバーガーアイコンのスタイルを指定:三本線を描画してアイコンを作成、疑似要素「before」,「after」を使用する
⑤ドロワーメニュー表示後、タップすることで閉じることができる薄黒い領域を設定
⑥ドロワーメニューのスタイルを設定:最初は隠しておく
⑦メニュー項目の表示スタイルを設定:「text-decoration: none」を指定して先頭の「・」を除去
⑧メニュー項目右の矢印「>」を描画:疑似要素「after」を使用、「transform: rotate(45deg)」による要素の回転
⑨チェックボックス(非表示)にチェックが入ったら、薄黒い領域を表示
⑩チェックボックス(非表示)にチェックが入ったら、ドロワーメニューを表示(右へスライドして表示)
⑪ドロワーメニュー内に「×」アイコンを設置する格納域を設定
⑫「×」アイコンを描画:2本線を描画してアイコンを作成、疑似要素「before」を使用する
②非表示のチェックボックスを用意し、CSSの切り替えに使用する
③ハンバーガーアイコンを設置するスペースを設定:次要素を横並びで配置するように「float: left」を指定
④ハンバーガーアイコンのスタイルを指定:三本線を描画してアイコンを作成、疑似要素「before」,「after」を使用する
⑤ドロワーメニュー表示後、タップすることで閉じることができる薄黒い領域を設定
⑥ドロワーメニューのスタイルを設定:最初は隠しておく
⑦メニュー項目の表示スタイルを設定:「text-decoration: none」を指定して先頭の「・」を除去
⑧メニュー項目右の矢印「>」を描画:疑似要素「after」を使用、「transform: rotate(45deg)」による要素の回転
⑨チェックボックス(非表示)にチェックが入ったら、薄黒い領域を表示
⑩チェックボックス(非表示)にチェックが入ったら、ドロワーメニューを表示(右へスライドして表示)
⑪ドロワーメニュー内に「×」アイコンを設置する格納域を設定
⑫「×」アイコンを描画:2本線を描画してアイコンを作成、疑似要素「before」を使用する
ポイントは、いくつかあるのですが、非表示のチェックボックスによるドロワーメニューの表示切り替えと、タップすることによりドロワーメニューを閉じることができる薄黒い領域の設置、ハンバーガーアイコン、矢印、×印などのアイコンをどのように描画しているのかという点になると思います。
1 |
4. まとめ
今回の記事では、自サイトのヘッダーメニューを例にとって、スマホ閲覧用サイトにハンバーガーメニューを実装する方法について、ソースコードを混じえた説明をさせていただきました。リスト形式で作成したメニュー項目をメニューアイコンをタップすることにより、ドロワーメニューとして表示させるという流れについて、ご理解いただけたと思います。
次回の記事以降では、ヘッダメニューの各項目に実装してある機能について、説明したいと考えています。
自サイトカスタマイズの全体の概要については以下の記事をご覧ください。


古いウェブサイトを現代風デザインにカスタマイズ【HTML部品化とスマホ対応】
2000年代初頭に作成した昔風の静的サイトに対し、現代風の外観、機能となるようにカスタマイズした記録です。
おわり
コメント