ブログ

Blog

コピペで使える！グローバルナビ【4】上段中心にロゴ、下段にナビゲーションのシンプルデザイン（レスポンシブ）

アクセシビリティに対応したグローバルナビゲーションのサンプルHTMLとCSSをご紹介する企画第４弾

  • ※こちらのページで紹介しているコードは自由に使用していただいてかまいません。
  • ※アクセシビリティ規格に準拠しています。
  • ※レスポンシブデザインです。
  • ※下記コードではBootstrapを使用しています。

デザイン

サンプルはこちら

PCでの表示

上段中心にロゴ、左側にキャッチコピー、右側にボタン（資料請求）
ナビゲーションは下段に配置しています。
タブレットサイズ（991px）よりも狭いサイズではトグルメニューに切り替わります。

スマホでの表示

トグルメニュー（ハンバーガーメニュー）が表示されます。
このサイズではPC時左側にあったキャッチコピーは非表示になります。右側にあったボタン（資料請求）も非表示になりますが、トグルメニューをタップした際に一番下に表示されるようにしています。

コード

HTML（head内の記述）

今回のサンプルHTMLにはCSSフレームワークであるBootstrapを使用しています。下記ではcdnから読み込んでいます。

※metaタグやtitleタグなどは下記では省略しています。それらのタグは作成するサイトに合わせて別途設定してください。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

HTML（bodyタグ開始直後の記述）

スキップリンクを設置しています。スキップリンクとはアクセシビリティ規格の項目にもあるもので、フォーカスをページのメインコンテンツまで移動させるものです。

クラスはほとんどがbootstrapのクラスですので、カスタマイズする際は適宜クラスを付与してください。

<div id="blockskip"><a href="#main">このページの本文へ移動</a></div>
    <header>
        <div class="container py-4">
            <div class="row no-gutters">
                <div class="col-lg-4 d-none d-lg-flex align-items-center">
                    キャッチコピー
                </div>
                <div class="col-lg-4">
                    <h1 class="text-center mb-0">
                        <a class="color__logo font-weight-bold" href="">
                            Logo
                        </a>
                    </h1>
                </div>
                <div class="col-lg-4 d-none d-lg-flex align-items-center justify-content-end">
                    <a href="" class="btn btn-primary font-weight-bold">資料請求</a>
                </div>
            </div>
        </div>
        <nav class="navbar navbar-default navbar-expand-lg py-0 navbar-light color__navi ">
            <div class="container font-weight-bold justify-content-center">
                <button class="navbar-toggler mb-3" type="button" data-toggle="collapse" data-target="#navbarContent"
                    aria-controls="navbarContent" aria-expanded="false" aria-label="スマートフォン用ナビゲーション">
                    <span class="navbar-toggler-icon"></span>
                    <span class="toggler__txt">メニュー</span>
                </button>
                <div class="navbar-collapse collapse" id="navbarContent">
                    <ul class="w-100 navbar-nav pb-3 pb-lg-0 d-flex align-items-center justify-content-between">
                        <li class="nav-item active"><a class="nav-link py-4" href="#">リンク１</a></li>
                        <li class="nav-item dropdown ">
                            <a href="#" id="navbarDropdownMenuLink" class="nav-link dropdown-toggle p-4"
                                data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">リンク２</a>
                            <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item" href="#">ドロップダウンリンク１</a>
                                <a class="dropdown-item" href="#">ドロップダウンリンク２</a>
                                <a class="dropdown-item" href="#">ドロップダウンリンク３</a>
                            </div>
                        </li>
                        <li class="nav-item "><a class="nav-link py-4" href="#">リンク３</a></li>
                        <li class="nav-item "><a class="nav-link py-4" href="#">リンク４</a></li>
                        <li class="nav-item "><a class="nav-link py-4" href="#">リンク５</a></li>
                        <li class="nav-item "><a class="nav-link py-4" href="#">リンク６</a></li>
                        <li class="nav-item d-lg-none"><a href="" class="btn btn-primary font-weight-bold">資料請求</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <main id="main">
		<!-- ここにメインコンテンツの内容 -->
    </main>

HTML（bodyタグ終了直前の記述）

jQueryとBootstrapのJavascriptを読み込んでいます。

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
    </script>

CSS

		#blockskip a {
            position: absolute;
            top: 0;
            left: -9999px;
            display: block;
            text-align: center;
        }

        #blockskip a:focus {
            z-index: 11000;
            left: 0;
            right: 0;
            margin: auto;
        }

        .toggler__txt {
            display: block;
            font-size: 0.5em;
        }

        .color__logo {
            color: #000;
        }

        .color__navi {
            border-bottom: 2px solid #303F9F;
        }

        .navbar-light .navbar-toggler {
            color: rgba(0, 0, 0, 1);
        }

おすすめ書籍のご紹介

Bootstrap関連のおすすめ書籍をご紹介します。