タイトル・URLをコピー
記事タイトルデバイスによって変わるレスポンシブメニューの作り方
記事URLhttps://digitor.jp/textbook/responsive-menu/
記事タイトルデバイスによって変わるレスポンシブメニューの作り方
記事URLhttps://digitor.jp/textbook/responsive-menu/
POINTこの記事をざっくり言うと
Webサイトのメニューをレスポンシブ対応するメリット
ハンバーガーメニューの実装方法を解説
フリックスクロールメニューの実装方法を解説
ボトムメニューの実装方法を解説
今回はWebサイト上でレスポンシブに変化するメニューについて解説します。各デバイスの横幅に合わせて表示が変化するレスポンシブ対応には、メニューのレスポンシブ表示も含まれます。
- メニューをレスポンシブ対応させるメリット
- ハンバーガーメニューの実装方法
- フリックスクロールメニューの実装方法
- ボトムメニューの実装方法
今回は以下のポイントに絞って、レスポンシブなメニューについて解説します。
メニューをレスポンシブ対応させるメリットを抑えた上で、各レスポンシブメニューの実装方法を確認しましょう。
メニューをレスポンシブ対応させるメリットは?
PC表示では横一直線に表示されることが多いグローバルメニューは、タブレットやスマートフォンで表示する時はユーザーにとって使いやすいメニューに変化することが求められます。
ではユーザーにとって使いやすいメニューとは、一体どんなものでしょう。具体的には以下の3点が当てはまるメニューが、ユーザーにとって使いやすいメニューであると言われています。
- 一目見て「メニューである」と分かるデザイン性
- ユーザーが見つけやすく分かりやすい位置指定
- スマートフォンやタブレットでタップしやすい
レスポンシブメニュー①ハンバーガーメニュー
別名ドロワーメニューとも言われるハンバーガーメニューは、レスポンシブなメニューの中でも圧倒的に使われている割合が多いメニューです。
三本線で表示されるボタンをタップすれば、上下左右の何処かからメニューが引き出されたり、折りたたまれたメニューが表示されたりとさまざまな表示方法があるメニューでもあるため、デザイン性や遊び心のあるメニューとも言えます。最近ではレスポンシブ対応としてだけではなく、PC表示でもハンバーガーメニューを使用するWebサイトも増えてきました。
ハンバーガーメニューの特徴
- レスポンシブメニューの王道とも言えるため、レスポンシブ表示に慣れたユーザーにはすぐメニューであると認識されやすい。
- 一方で三本線のみで表示されるため、初見のユーザーにはメニューとして認識されにくい。そのため、三本線の上下にメニュー等と記載する必要がある。
- コーディングがシンプルで実装しやすい。
- ユーザーがタップすることでメニューを表示するため、必要な時のみ表示することでスペースを取らなくて済む。
ハンバーガーメニューの実装方法
ハンバーガーメニューの実装方法はHTMLとCSS、HTML・CSS・Javascript(JQuery)を組み合わせたものの2パターンに分けることができます。今回はそれぞれをまとめてご紹介します。
HTML・CSSだけでの実装
- HTMLを組む
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
|
<header> <div class="hamburger-menu"> <!-- ボタンが押されたかどうかをチェックボックスで判断する --> <input type="checkbox" id="menu-btn-check"> <!-- ハンバーガーボタン --> <label for="menu-btn-check" class="menu-btn"><span></span></label> <!--メニュー--> <div class="menu-content"> <ul> <li> <a href="#">menu1</a> </li> <li> <a href="#">メmenu2</a> </li> <li> <a href="#">menu3</a> </li> </ul> </div> <!--メニュー end--> </div> </header> |
- ハンバーガーボタンを実装する
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
|
/* ================= ハンバーガーボタンの実装 ================= */ .menu-btn { position: fixed; top: 10px; right: 10px; display: flex; height: 60px; width: 60px; justify-content: center; align-items: center; z-index: 90; background-color: black; } .menu-btn:hover { cursor: pointer; } /* 三本線の実装 */ .menu-btn span, .menu-btn span:before, .menu-btn span:after { content: ""; display: block; height: 3px; width: 25px; border-radius: 3px; background-color: #ffffff; position: absolute; } .menu-btn span:before { bottom: 8px; } .menu-btn span:after { top: 8px; } /* チェックボックスを非表示にする */ #menu-btn-check { display: none; } #menu-btn-check:checked ~ .menu-btn span { background-color: rgba( 255, 255, 255, 0 ); /*メニューオープン時は真ん中の線を透明にする*/ } /* メニューを開いている時はハンバーガーボタンが×になる */ #menu-btn-check:checked ~ .menu-btn span::before { bottom: 0; transform: rotate(45deg); } #menu-btn-check:checked ~ .menu-btn span::after { top: 0; transform: rotate(-45deg); } |
- メニューの表示・非表示を指定する
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
|
/* ================= メニュー部分の実装 ================= */ .menu-content { width: 80%; height: 100%; position: fixed; top: 0; /* メニューを外に出しておく */ left: 100%; z-index: 80; background-color: black; transition: all 0.5s; /*アニメーションを滑らかにする*/ } .menu-content ul { padding: 70px 10px 0; } .menu-content ul li { border-bottom: solid 1px #ffffff; list-style: none; } .menu-content ul li a { display: block; width: 100%; font-size: 15px; box-sizing: border-box; color: #ffffff; text-decoration: none; padding: 9px 15px 10px 0; position: relative; } #menu-btn-check:checked ~ .menu-content { left: 30%; /*メニューを画面内へ動かす*/ } |
実際にこのコードを組んだプレビューが以下になります。
HTML・CSSで実装したハンバーガーボタンプレビュー
HTML・CSS・Javascript(JQuery)での実装
- HTMLを組む
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
|
<div id="navArea"> <nav> <div class="inner"> <ul> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> </ul> </div> </nav> <!-- ハンバーガーボタンをspanで表示する --> <div class="toggle_btn"> <span></span> <span></span> <span></span> </div> <!-- メニューを開いている時だけ背景の色が変化する --> <div id="mask"></div> </div> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> |
- ハンバーガーボタンの実装(CSS)
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
|
/*============ .toggle_btn(ハンバーガーボタン実装) =============*/ .toggle_btn { display: block; position: fixed; top: 30px; left: 30px; width: 30px; height: 30px; transition: all .5s; cursor: pointer; z-index: 3; } .open .toggle_btn { left: 330px; } /* 三本線 */ .toggle_btn span { display: block; position: absolute; left: 0; width: 30px; height: 2px; background-color: #333; border-radius: 4px; transition: all .5s; } .toggle_btn span:nth-child(1) { top: 4px; } .toggle_btn span:nth-child(2) { top: 14px; } .toggle_btn span:nth-child(3) { bottom: 4px; } .open .toggle_btn span { background-color: #fff; } .open .toggle_btn { -webkit-transform: rotate(360deg); transform: rotate(360deg); } .open .toggle_btn span:nth-child(1), .open .toggle_btn span:nth-child(3) { width: 16px; } .open .toggle_btn span:nth-child(1) { -webkit-transform: translate(-1px,4px) rotate(-45deg); transform: translate(-1px,4px) rotate(-45deg); } .open .toggle_btn span:nth-child(3) { -webkit-transform: translate(-1px,-4px) rotate(45deg); transform: translate(-1px,-4px) rotate(45deg); } @media screen and (max-width: 767px) { .open .toggle_btn { left: 250px; } } |
- メニューの開閉時の表示設定(CSS)
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
|
/*============ nav(メニュー) =============*/ nav { display: block; position: fixed; top: 0; left: -300px; bottom: 0; width: 300px; background: #ffffff; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: all .5s; z-index: 3; opacity: 0; } .open nav { left: 0; opacity: 1; } nav .inner { padding: 25px; } nav .inner ul { list-style: none; margin: 0; padding: 0; } nav .inner ul li { position: relative; margin: 0; border-bottom: 1px solid #333; } nav .inner ul li a { display: block; color: #333; font-size: 14px; padding: 1em; text-decoration: none; transition-duration: 0.2s; } nav .inner ul li a:hover { background: #e4e4e4; } @media screen and (max-width: 767px) { nav { left: -220px; width: 220px; } } |
- ボタンを押したらメニューが開閉する(JQuery)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
|
(function($) { var $body = $('body'); var $btn = $('.toggle_btn'); var $mask = $('#mask'); var open = 'open'; // class // メニューの開閉 $btn.on( 'click', function() { if ( ! $body.hasClass( open ) ) { $body.addClass( open ); } else { $body.removeClass( open ); } }); // 背景の除去 $mask.on('click', function() { $body.removeClass( open ); }); } )(jQuery); |
実際にコーディングしたもののプレビューは以下です。
HTML・CSS・Javascript(JQuery)のハンバーガーボタン実装プレビュー
実装をおすすめするシーン
ハンバーガーメニューはレスポンシブデザインとして非常に多くのサイトで実装されているため、特にこだわりがない場合にはハンバーガーメニューでレスポンシブ対応をするのが無難です。
- メニューをヘッダーやフッターで固定表示せず、できるだけコンテンツを表示するスペースを増やしたい時
- 機能面を優先してレスポンシブ対応をしたい時
- メニュー項目数が一覧として表示するには多い時
レスポンシブメニュー②フリックスクロールメニュー
フリックスクロールメニューは横スクロールすることでメニューの全体を表示できるメニューです。メディア系のWebサイト等で主に使われる、カテゴリーが多いWebサイト等に推奨される形式でもあります。
フリックスクロールメニューの特徴
- メニューが多い時でもユーザーが見やすい
- ヘッダーの高さを下げられるため、一覧としてコンテンツを見やすい
- 一覧性には欠け、隠れている部分のメニューが認識されにくい
- ユーザーが一目でメニューであると分かりやすい
- 画像と合わせずテキストだけの表示でも何のページか分かりやすい
フリックスクロールメニューの実装方法
フリックスクロールメニューはHTMLとCSSのみだけで実装できます。
- HTMLを組む
|
<div class="nav-wrap"> <div class="scroll-nav"> <ul> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> <li><a href="#">menu6</a></li> <li><a href="#">menu7</a></li> </ul> </div> </div> |
- CSSで横にスクロールできるメニューを実装する
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
|
.nav-wrap { position: relative; } .scroll-nav { width: 100%; background: #555; /* メニューの背景色 */ overflow-x: auto; /* 慣性スクロール */ -webkit-overflow-scrolling: touch; } .scroll-nav ul { max-width: 1060px; /* メニューの最大幅 */ min-width: 770px; /* メニューの最小幅 */ height: 40px; line-height: 40px; margin: 0 auto; list-style: none; padding-right: 25px; /* 右側の固定分余白を空ける */ } .scroll-nav ul li { float: left; width: 110px; /* メニューの個別の幅 */ text-align: center; } .scroll-nav ul li:hover { background: #222; /* マウスホバー時の背景色 */ } .scroll-nav ul li a { display: inline-block; color: #fff; /* メニューの文字色 */ text-decoration: none; } /* スクロールバーを非表示にする */ ::-webkit-scrollbar { display: none; } |
このコードで実装したフリックスクロールメニューのプレビューは以下から確認できます。
HTML・CSSだけで実装したフリックスクロールメニュープレビュー
実装をおすすめするシーン
フリックスクロールメニューとハンバーガーメニューのどちらを実装するか迷った際には、メニューの項目数の多さで判断することがおすすめです。そのため、記事カテゴリーなどで表示したい項目が多くなりがちな、メディア系のWebサイトを制作する時に実装を検討するのがおすすめです。
- ブログやNewsのカテゴリをスマートフォンやタブレットでも分かりやすく表示したい時
- 第二階層のページメニューとは別に強調したい項目がある時
- ブログのような投稿要素のある項目の新着表示を目立たせたい時
レスポンシブメニュー③ボトムメニュー
ボトムメニューはヘッダーに固定されるハンバーガーメニューや、フリックスクロールメニューとは異なり画面の一番下に固定表示されるメニューです。これはPC表示では使われることが少なく、スマートフォンやタブレット等のレスポンシブデザインが求められるデバイスで表示されることがほとんどです。
ボトムメニューを実装しているセントレア空港のWebサイトでは、以下の画像のように5つの項目が固定表示されています。
ボトムメニューの特徴
- アイコンとテキストを合わせて表示することで分かりやすさUP
- 片手で操作するユーザーにとって使いやすい
- メニュー項目数を絞って実装すれば押される確率も上がりやすい
- ユーザーにアクションを求めやすい
ボトムメニューの実装方法
- HTMLを組む
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous"> <div> <ul class="menu"> <li> <a href="#"><i class="fas fa-home"></i><br> <span class="iconname">ホーム</span></a> </li> <li> <a href="#"><i class="fab fa-html5"></i><br> <span class="iconname">HTML5</span></a> </li> <li> <a href="#"><i class="fab fa-css3-alt"></i><br> <span class="iconname">CSS3</span></a> </li> <li> <a href="#"><i class="fab fa-js-square"></i><br> <span class="iconname">Javascript</span></a> </li> </ul> </div> |
- CSSを書く
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
|
.div { height: 600px; } .menu { position: fixed; left: 0; /* ページの一番下に固定する */ bottom: 0; background: blue; width: 100%; height: 60px; display: flex; justify-content: center; align-items: center; } .menu li { display: table; table-layout: fixed; width: 100%; padding: 5px; list-style: none; text-align: center; } .menu a { text-decoration: none; color: white; } .menu a span { display: block; font-size: 4px; } /* PCでは非表示にする */ @media(min-width: 768px) { .bottom-menu { display: none; } } |
ボトムメニューの実装プレビュー
実装をおすすめするシーン
ボトムメニューの最大の特徴は「わかりやすさ」です。スクロールする位置を絶妙に邪魔せず、わかりやすくユーザーにメニューの存在をアピールできます。ボトムメニューの実装を
おすすめするシーンとしては、以下のような状況が挙げられます。
- ユーザーに購入や会員登録のように行動を求めたい時
- メニュー項目数を絞って表示できる時
- ブログのような投稿要素のある項目の新着表示を目立たせたい時
まとめ
メニューのレスポンシブ表示について解説しました。画面幅に合わせてレスポンシブに変化するメニューは、あまり難しくないコードで組まれているためWeb制作初心者の方でも簡単に実装することができます。
各Webサイトが扱うコンテンツによっても推奨されるメニューの種類は異なります。レスポンシブに変化するのは前提として、コンテンツに合った見やすいメニューを実装できるようになりましょう!
レスポンシブに対応した画像調整・サイズ切り替えの実装方法
画像をレスポンシブ対応させる方法を3つ紹介します。
レスポンシブでスライダーを実装する方法(HTML/CSS/jQuery)
Webサイトにレスポンシブレイアウトのスライダーを実装する方法をまとめます。
レスポンシブデザインを制作するためのCSSサンプルコード集
レスポンシブデザインを実装する際に知っておいて損がないCSSの基礎知識を解説します。
最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。
この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします
minweb編集部(株)セルリア
”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。
タイトル・URLをコピー
記事タイトルデバイスによって変わるレスポンシブメニューの作り方
記事URLhttps://digitor.jp/textbook/responsive-menu/
記事タイトルデバイスによって変わるレスポンシブメニューの作り方
記事URLhttps://digitor.jp/textbook/responsive-menu/
こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料
Googleサーチコンソール使い倒し活用術 <AOHON>
Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。
サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。