レスポンシブデザインに対応しているナビゲーションメニューの作り方

レスポンシブデザインを実装する上で必須と言っても良いのが、ナビゲーションメニューのレスポンシブ対応です。Webサイトを訪れるユーザーが必ずと言っても良い程必要とするナビゲーションは、どのデバイスでも適切に表示される必要があります。

本記事では、各デバイスに対応できるレスポンシブなナビゲーションの作り方をご紹介します。

レスポンシブデザインについて

レスポンシブデザインは「閲覧ユーザーの使用するデバイス・ブラウザに合わせて見やすい表示に変化するWebサイト」のデザインのことを意味します。

具体的には、画像のように同じURLのWebサイトを閲覧していても、どのブラウザで表示しても表示崩れがなく、各デバイスに合った見やすい表示に自動で切り替わることが例として挙げられます。

レスポンシブデザインの切り替え方

レスポンシブデザインの切り替え方は、大きく分けて4つに分類されます。それぞれ制作に使用する言語や方針によって切り替えるのがオーソドックスです。

CSSで切り替える
Javascriptで切り替える
PHPで切り替える
WordPressの関数で切り替える

本記事では、タブレットにおけるレスポンシブデザインを主にCSSで切り替える方法を前提として記載しています。

レスポンシブデザインにおけるナビゲーションの考え方

ナビゲーションとは

ナビゲーションとは、ユーザーがWebサイトを訪れた時に、Webサイトの各ページへのリンクが掲載されている案内表示のことを意味します。

ナビゲーション自体に明確な名称は決まっておらず、大まかには「グローバルメニュー」「ヘッダーナビ」「ヘッダー」「メインメニュー」のような呼ばれ方をしています。

ナビゲーションの役割

ナビゲーションの役割は「ユーザーを迷わせず、目的のWebページに辿り着かせるためのサポートをすること」です。ユーザーがWebサイト内で迷わず、目的のページに辿り着くためのサポートをすることで、ユーザーがどれだけ快適にWebサイトを閲覧できるかが決まります。

3クリック以内に目的のページに辿り着けることが理想であり、目的のページに辿り着くまでに労力がかかるとユーザーはWebサイトから離脱しやすくなってしまいます。

全てのレスポンシブなナビゲーションにおける前提

プラグインのような既にオープンソースでCSSを公開しているものを使う以外、レスポンシブなナビゲーションを作成するには、viewportとメディアクエリの設定が必要です。

後述で紹介するレスポンシブなナビゲーションを作成する前に、タグ内でviewportを指定し、style.cssなどでメディアクエリを設定しましょう。

viewportとは

viewportはスマートフォンやタブレットなどのモバイル端末で、ユーザーが閲覧しやすい

最適な表示（＝レスポンシブ表示）をするために不可欠なhtmlタグのことです。これを以下のように設定することで、さまざまなモバイル端末とPC表示を円滑に切り替えることができます。

メディアクエリとは

メディアクエリとは、CSSで適切にレスポンシブデザインを切り替えるために必要な、

表示切り替えのための画面幅を指定したものです。

スマートフォン、タブレットのモバイル端末での表示のみレスポンシブなナビゲーションを表示するために、まずはそれぞれの端末で表示される最大の画面幅を指定します。今回はタブレット幅を960px以下、スマートフォン幅を520px以下と仮定し、メディアクエリ

を以下のように設定します。

@media screen and (max-width: 959px) {
タブレット・スマートフォンで共通のCSSを記入
}
@media screen and (max-width: 519px) {
スマホ用のCSSを記入
}

レスポンシブなナビゲーションの作り方

ハンバーガーメニュー

特徴

スマートフォンのメニューとして最も汎用的に使われているため、慣れている
ユーザーからは即座にメニューと認識されやすい
ユーザーがタップすることでメニューを表示するため、必要な時のみメニューを表示することでスペースを取らなくて済む。

サンプル①

デモ

コード

HTML

CSS

/* =================
ハンバーガーボタンの実装
================= */

.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);
}
/* =================
メニュー部分の実装
================= */

.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%; /*メニューを画面内へ動かす*/
}

サンプル②Bootstrap使用ナビゲーション

デモ

Bootstrapとは

BootstrapはTwitter社が開発した、Web制作で使いまわしできるデザインやパーツを定義したフレームワークのことです。既にレイアウトが決まったCSSをオープンソースで公開しているため、必要なHTMLを記載するだけでレスポンシブなナビゲーションを作成することが可能です。

コード②

HTML



  
    Navbar
    
    
      
        
          Home
        
        
          Link
        
        
          
            Dropdown
          
          
            Action
            Another action
            
            Something else here
          
        
        
          Disabled

サンプル③HTML/CSS/Javascript(jQuery)

デモ

コード③

HTML



  
    
      
        menu1
        menu2
        menu3

CSS

/*============
.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: #000000;
}
.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;
  }
}

/*============
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;
  }
}

Javascript(jQuery)

(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);

サンプル④プラグイン「drawer.js」使用

drawer.jsとは

「drawer.js」はオープンソースで公開されているCSS,JQueryを読み込み、必要なHTMLとjQueryを書くだけでハンバーガーメニューを作れる無料プラグインです。

デモ

コード④

HTML

Javascript(jQuery)

$(document).ready(function() {
  // .drawer　というclassがついているメニューを起動する
  $('.drawer').drawer();
});

ドロップダウン

ドロップダウンメニューとは、クリックやホバーなどの操作により子階層のメニュー項目を表示させるタイプのメニューのことです。第二階層があるメニューにはもちろん、第三階層、第四階層と深い階層のメニューを制作したい時に用いられます。

サンプル①

デモ

コード①

HTML

CSS

/* メニュー全体の基本設定 */
ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    font-weight: normal;
}

#navi {
    background-color: #FFF;
    position: fixed;
    top: 0;
    left: 0;
    height: 60px;
    width: 100%;
}

/* チェックボックスを非表示 */
#navi input {
    display: none;
}

/* 上部メニュー */
#menu {
    float: right;
    margin-right: 10px;
}

#menu li {
    position: relative;
    white-space: nowrap;
}

#menu li a {
    display: block;
}

#menu>li {
    float: left;
    margin: 0 15px;
    line-height: 60px;
    font-size: 17px;
    font-weight: bold;
}

/* パソコンでは V を非表示 */
#menu>li .pd {
    display: none;
}

#menu-navibtn {
    display: none;
    cursor: pointer;
    cursor: hand;
}

#navibtn span span {
    border: 1px solid black;
    margin: 20px 0;
    display: inline-flex;
    align-items: center;
    padding: 20px 30px;
}

/* ハンバーガーメニューの基本設定 */
@media screen and (max-width: 620px) {

    /* 基本非表示 */
    #menu {
        display: none;
    }

    #menu li {
        height: auto;
        width: 100%;
        padding: 0px 20px;
        border-bottom: 1px solid #DDD;
        white-space: nowrap;
    }

    #menu>li {
        margin-right: -20px;
    }

    /* V を表示 */
    #menu>li .pd {
        display: inline-block;
        width: 100%;
    }

    #menu li a {
        display: inline-block;
    }

    #menu li:first-child {
        border-top: 1px solid #DDD;
    }

    #menu li i {
        padding: 0px 6px;
    }

    /* メニューを移動させないため */
    #menu-navibtn:checked~#navi {
        position: fixed;
        overflow-y: scroll;
        overflow-x: hidden;
        height: 100%;
    }
}

/* ドロップダウンメニュー */
#menu li ul {
    position: absolute;
}

/* 子メニュー */
#menu>li>ul li {
    font-size: 14px;
    display: none;
    padding: 0px 20px;
    background-color: #FFF;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #DDD;
}

#menu li ul li:first-child {
    border-top: 1px solid #000;
}

#menu li ul li:last-child {
    border-bottom: 1px solid #000;
}

#menu li ul li ul {
    top: -1px;
    left: 100%;
}

#menu li ul li ul li ul,
#menu li:nth-child(n+3) ul li ul {
    left: inherit;
    right: 100%;
}

#menu>li>ul {
    margin-left: -40px;
    width: auto;
}

/* パソコン用 */
@media screen and (min-width: 620px) {
    #menu li:hover {
        background: #EEE;
    }

    #menu>li:hover>ul>li,
    #menu li ul li:hover>ul>li {
        display: block;
    }

    /* 階層がある場合の誘導の印 */
    #menu li ul li ul:before,
    #menu li ul li ul li ul:before,
    #menu li:nth-child(n+3) ul li ul:before {
        position: absolute;
        top: 28px;
        content: "";
        border: 5px solid transparent;
        display: block;
    }

    /* 通常タイプ */
    #menu li ul li ul:before {
        left: -10px;
        border-left-color: #666;
    }

    /* 右側タイプ */
    #menu li ul li ul li ul:before,
    #menu li:nth-child(n+3) ul li ul:before {
        right: -10px;
        border-right-color: #666;
    }
}

/* スマホ用 */
@media screen and (max-width: 620px) {

    /* ハンバーガーメニューがクリックされた時 */
    #menu-navibtn:checked~* #menu {
        display: block;
    }

    #menu-navibtn:checked~* #menu>li {
        max-height: inherit;
        overflow-y: visible;
    }

    #menu>li ul {
        line-height: 50px;
    }

    #menu>li>label:hover {
        cursor: pointer;
        cursor: hand;
    }

    #menu li ul {
        position: static;
    }

    /* 子メニュー */
    #menu>li>ul {
        margin-left: initial;
        position: relative;
    }

    #menu li ul li:first-child {
        border-top: 1px solid #DDD;
    }

    #menu ul li:last-child {
        border-bottom: none;
    }

    #menu>li>ul li {
        border-left: 1px solid #FFF;
        border-right: 1px solid #FFF;
    }

    #menu li ul li ul {
        top: inherit;
        left: 0;
    }

    #menu li ul li:last-child {
        border-bottom: none;
    }

    /* 子メニューがクリックされた時 */
    #menu input[type="checkbox"]:checked~label~ul>li {
        max-height: inherit;
        overflow-y: visible;
        display: block;
    }

    .angletoggle:before {
        content: "\f107";
    }

    #navi input[type="checkbox"]:checked~label .pd .angletoggle:before {
        content: "\f106";
    }
}

サンプル②Bootstrap

デモ

コード②

HTML



  
    Dropdown link
  

  
    Action
    Another action
    Something else here

サンプル③drawer.js

デモ

コード②

HTML











  
    
    
     
  第一階層
第一階層


  
    
      第一階層 
    
    
      第二階層
      第二階層
      第二階層

Javascript(jQuery)

$(document).ready(function() {
  $('.drawer').drawer();
});

ブロックナビゲーション

特徴

デバイスのサイズに合わせてリンクのサイズが変わる
モバイル端末でもブロック要素として表示される
一覧性に長けている

サンプル①

デモ

特徴

デバイスのサイズに合わせてリンクのサイズが変わる

モバイル端末でもブロック要素として表示される

コード①

HTML

  
    Home
    
        About 
    
    
      Works
    
    News
    Contact

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
}


li {
  display: inline-block;
  float: left;
  margin-right: 1px;
}


li a {
  display: block;
  min-width: 140px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  background: #2f3036;
  text-decoration: none;

}


li:hover a {
  background: #19c589;
}

サンプル②

デモ

コード②

HTML

CSS




CSS
body {
	margin:0 auto;
	padding:0;
	width:90%;
	font-size:16px;
	font-size:1.6rem;
	font-family:"Cambria, Georgia, Times, " Times New Roman;
	color:#282828;
	background-color:transparent;
}
button, input, select, textarea {
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#404040;
}

p, ol, ul, dl, address {
	margin-bottom:1.5em;
	font-size:16px;
	font-size:1.6rem;
}

ul, ol {
	margin:0 0 1.5em -24px;
	padding:0 0 0 24px;
}
li ul, li ol {
	margin:0;
	font-size:16px;
	font-size:1.6rem;
}

a { color:#013568; }
a:visited { color:#011b35; }
a:hover { color:#011b35; }
a:focus {
	outline:thin dotted;
	color:#011b35;
}
a:hover, a:active { outline:0; }

html {
	-webkit-overflow-scrolling:touch;
	-webkit-tap-highlight-color:#c3d9e6;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
}
::-webkit-selection {
background:#e6e6e6;
color:#fafafa;
text-shadow:none;
}
::-moz-selection {
background:#7bacc8;
color:#c8977b;
text-shadow:none;
}
::selection {
background:#7bacc8;
color:#c8977b;
text-shadow:none;
}


.hidden {
	display:none;
	visibility:hidden;
}

@media print {
* {
	background:transparent !important;
	color:black !important;
	text-shadow:none !important;
	filter:none !important;
	-ms-filter:none !important;
}
@page {
margin:0.5cm;
}

a, a:visited {
	color:#000000 !important;
	text-decoration:underline;
}
a[href]:after { content:" (" attr(href) ")"; }
a[href^="javascript:"]:after, a[href^="#"]:after {
content:"";
}

thead { display:table-header-group; }
tr { page-break-inside:avoid; }
.ir a:after { content:""; }
}



/* =Navigation
-------------------------------------------------------------- */

#access {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    overflow:visible;
    z-index:100;
}
/* style the main menu 8*/
.sf-menu{
    border: 1px solid #000;
    border-top: none;
}
/* get rid of padding and margin off all ul's (not sure about using * here, could be better) */
.sf-menu, .sf-menu * {
    margin:0;
    padding:0;
    list-style:none;
}
/* position all dropdowns off screen */
.sf-menu ul {
    position:absolute;
    top:-999em;
}
/* style the main nav list items */
.sf-menu li {
    background: #000;
    background-image: url('../img/menuBg.png'), linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%);
    background-image: url('../img/menuBg.png'), -o-linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%);
    background-image: url('../img/menuBg.png'), -moz-linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%);
    background-image: url('../img/menuBg.png'), -webkit-linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%);
    background-image: url('../img/menuBg.png'), -ms-linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%);
    background-image: url('../img/menuBg.png'), -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(36,35,36)), color-stop(1, rgb(0,0,0)));
    background-repeat: repeat-x;
    border-top: 1px solid #242324;
    clear: left;
    float:left;
    position:relative;
    width: 100%;
}
/* change the main nav list items on hover */
.sf-menu li:hover {
    background-image: url('../img/menuBg.png');
    visibility:inherit; /* fixes IE7 'sticky bug' */
}
/* style all the links */
.sf-menu a {
    font-size: .8em;
    color: #fff;
    display:block;
    padding: 12px 0;
    text-decoration: none;
    text-indent: 12px;
}
/* style the first drop */
.sf-menu li li, .sf-menu li li:hover{
    background: none;
    background-image: none;
}
/* add a larger text indent for the first drop links */
.sf-menu li li a{
    text-indent: 24px;
}
/* add a larger text indent for the second drop links */
.sf-menu li li li a{
    text-indent: 36px;
}
/* add a larger text indent for the third drop links */
.sf-menu li li li li a{
    text-indent: 48px;
}
/* position first drop */
.sf-menu li:hover ul {
    top:auto; /* match top ul list item height */
    position:relative;
}
/* make sure second drop is still off screen */
ul.sf-menu li:hover li ul {
    position: absolute;
    top:-999em;
}
/* position second drop */
ul.sf-menu li li:hover ul {
    top:auto;
    position:relative;
}
/* make sure third drop is still off screen */
ul.sf-menu li li:hover li ul {
    position: absolute;
    top:-999em;
}
/* position third drop */
ul.sf-menu li li li:hover ul {
    top:auto;
    position:relative;
}
@media only screen and (min-width: 480px) {
}
@media only screen and (min-width: 600px) {
    /* set height so content isn't pushed down */
    #access{
        float: left;
        height: 36px;
        width: 100%;
    }
    /* set height so content isn't pushed down add z-index to keep drops above content */
    .sf-menu{
        height: 36px;
        z-index: 100;
    }
    /* restyle so main links are horizontally aligned */
    .sf-menu li {
        clear: none;
        width: 25%; /* this will need to be adjusted for your needs */
    }
    /* new style for drop list items */
    .sf-menu li li{
        background: #000;
        background-image: url('../img/menuBg.png'), linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%);
        background-image: url('../img/menuBg.png'), -o-linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%);
        background-image: url('../img/menuBg.png'), -moz-linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%);
        background-image: url('../img/menuBg.png'), -webkit-linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%);
        background-image: url('../img/menuBg.png'), -ms-linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%);
        background-image: url('../img/menuBg.png'), -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(36,35,36)), color-stop(1, rgb(0,0,0)));
        background-repeat: repeat-x;
        clear: left;
        width: 100%;
    }
    /* reset text indent on all drop a tags and set the width to 100% */
    .sf-menu li li a, .sf-menu li li li a, .sf-menu li li li li a{
        text-indent: 12px;
        width: 100%;
    }
    /* reposision and style the first drop */
    .sf-menu li:hover ul{
        background: #000;
        left: auto;
        position: absolute;
        top: -1;
        width: 100%;
        z-index: 100;
    }
    /* reposision and style the second drop */
    ul.sf-menu li li:hover ul{
        background: #000;
        position: absolute;
        top: -1px;
        left:100%;
    }
    /* reposision and style the third drop */
    ul.sf-menu li li li:hover ul{
        background: #000;
        position: absolute;
        top: -1px;
        left:100%;
    }
}

@media only screen and (min-width: 992px) {

    /* bigger screen bigger nav */
    #access{
        height: 50px;
    }
    /* bigger screen bigger nav */
    .sf-menu{
        height: 50px;
    }
    /* bigger screen bigger font size and padding */
    .sf-menu a {
        font-size: 1em;
        padding: 17px 0;
    }
}
@media only screen and (min-width: 1382px) {
    /* move the header to the left side of the screen */
    header{
        float: left;
        margin: 0 2% 0 0;
        width: 20%;
    }

    #access, .sf-menu{
        height: auto;
    }
    .sf-menu li {
        clear: left;
        width: 100%;
    }
    /* reposition the first drop */
    .sf-menu li:hover ul{
        left: 100%;
        top: -1px;
        position: absolute;
    }

}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5)

スライドバー

特徴

メニューが多い時でもユーザーが見やすい
ヘッダーの高さを下げられるため、一覧としてコンテンツを見やすい
ユーザーが一目でメニューであると分かりやすい

サンプル

デモ

コード

HTML

  
      
        
          menu1
          menu2
          menu3
          menu4
          menu5
          menu6
          menu7

CSS

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

ボトムナビゲーション

出典：▷三井のリフォーム

特徴

アイコンとテキストを合わせて表示することで分かりやすさUP
片手で操作するユーザーにとって使いやすい
メニュー項目数を絞って実装すれば押される確率も上がりやすい
ユーザーにアクションを求めやすい

サンプル

デモ

コード

HTML




  
    

      ホーム
  
  
    

      HTML5
  
  
    

      CSS3
  
  
    

      Javascript

CSS

body {
  height: 900px;
}

.menu {

  padding-left: 0 !important ;
  position: fixed;
  left: 0;
 /*  ページの一番下に固定する */
  bottom: 0;
  background: white;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
align-items: center;
}
.menu li {
  border: 1px solid gray;

  border-right: none;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 5px;
  list-style: none;
  text-align: center;

}
.menu a {
  text-decoration: none;
  color: black;
}
.menu a span {
  display: block;
  font-size: 4px;
}
/* PCでは非表示にする */
@media(min-width: 768px) {
	.bottom-menu {
		display: none;
	}
}

まとめ

レスポンシブなナビゲーションについてご紹介しました。Webサイトの種類や方向性、ユーザー層によってどのメニューを実装すればいいかは異なります。今回ご紹介した4つのメニューを適切に実装し、よりユーザビリティに特化したWebサイトを目指しましょう！

!– =========================== *** ここから下のコードを管理画面の各投稿エディタの下に（今回と同じように）コピペする *** =========================== –>

その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

記事に対するご意見・ご要望フォーム

minweb編集部（株）セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ！完全無料のダウンロード資料

無料でできるWebマーケティング11選 <MIDORIBON>

Webマーケティングに取り組もうとしている方に向けて、無料で利用できるWebマーケティングに役立つツールを9つ集めました。ツールの始め方からWebマーケティングに利用するメリット、実践的な活用方法まで解説します。

コストをかけずにまずはWebマーケティングに取り組んでみたい思いの方にぴったりの一冊です。

【全3種】他の資料もチェックする

無料で資料をダウンロードする

運営会社

Web制作・広告・コンサルティングのセルリア

運営：株式会社セルリア

レスポンシブデザインに対応しているナビゲーションメニューの作り方

レスポンシブデザインについて

レスポンシブデザインの切り替え方

レスポンシブデザインにおけるナビゲーションの考え方

ナビゲーションとは

ナビゲーションの役割

全てのレスポンシブなナビゲーションにおける前提

viewportとは

メディアクエリとは

レスポンシブなナビゲーションの作り方

ハンバーガーメニュー

特徴

サンプル①

コード

HTML

CSS

サンプル②Bootstrap使用ナビゲーション

Bootstrapとは

コード②

HTML

サンプル③HTML/CSS/Javascript(jQuery)

コード③

HTML

CSS

Javascript(jQuery)

サンプル④プラグイン「drawer.js」使用

drawer.jsとは

コード④

HTML

Javascript(jQuery)

ドロップダウン

サンプル①

コード①

HTML

CSS

サンプル②Bootstrap

コード②

HTML

サンプル③drawer.js

コード②

HTML

Javascript(jQuery)

ブロックナビゲーション

特徴

サンプル①

特徴

コード①

HTML

CSS

サンプル②

コード②

HTML

CSS

スライドバー

特徴

サンプル

コード

HTML

CSS

ボトムナビゲーション

特徴

サンプル

コード

HTML

CSS

まとめ

運営会社

記事を検索する

人気の記事TOP20

CATEGORY

解析ツール

広告・マーケティング

デザイン・Web制作

Google Workspace

SNS運用