2019.11.27

WordPressにおすすめ！CSSだけで作るレスポンシブメニュー

全力疾走熱中症

CSS CSSテクニック WordPress スニペット

この記事は、2019年11月25日に編集し、約 15 分で読めます。

今回はスマートフォン(SP)やiPadなどのタブレット(TB)向けナビゲーションメニューのコードスニペットを紹介したいと思います。

このコードは普段、自分がWordPress向けのレスポンシブによく使うコードなのでデザインに悩んでいる方にもおすすめです！

Responsive Menu (Only CSS)
まとめ

Responsive Menu (Only CSS)

早速紹介していきます！
まずはデモサイトをご覧下さい！
デモサイト

CodePenでもシェアしています。
CodePen Share

コード紹介

下記のコードが実際に動作しています。
（※ ダミー用のテキストは都合上、こちらには載せていません。）

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>SPメニュー</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  </head>
  <body id="scroll-top">
    <main>
      <section style="padding:15px; margin-bottom:70px;">
        <!-- コンテンツエリア -->
      </section>

      <!-- SP用メニュー 開始 -->
      <ul class="sp-menu">
        <!-- メニューアイテム -->
        <li class="sp-menu__item">
          <input type="checkbox" id="sp-menu__item-menu1" class="sp-menu__check">
          <label class="sp-menu__item--open" for="sp-menu__item-menu1">
            <span class="sp-menu__icon"><i class="fas fa-bars"></i></span>
            <span class="sp-menu__icon-txt">メニュー</span>
          </label>
          <label class="sp-menu__item--close" for="sp-menu__item-menu1"></label>
          <div class="sp-menu__contents sp-menu__contents-menu">
            <label class="sp-menu__contents--close" for="sp-menu__item-menu1"><i class="fas fa-times"></i></label>
            メニュー領域
          </div>      
        </li>

        <!-- メニューアイテム -->
        <li class="sp-menu__item">
          <a href="#">
            <div class="sp-menu__item--open">
              <span class="sp-menu__icon"><i class="fas fa-home"></i></span>
              <span class="sp-menu__icon-txt">ホーム</span>
            </div>
          </a>
        </li>

        <!-- メニューアイテム -->
        <li class="sp-menu__item">
          <input type="checkbox" id="sp-menu__item-search" class="sp-menu__check">
          <label class="sp-menu__item--open" for="sp-menu__item-search">
            <span class="sp-menu__icon"><i class="fas fa-search"></i></span>
            <span class="sp-menu__icon-txt">検索</span>
          </label>
          <label class="sp-menu__item--close" for="sp-menu__item-search"></label>
          <div class="sp-menu__contents sp-menu__contents-search">
            <!-- 使用する環境に合わせて検索フォームを挿入してください -->
            <form method="get" action="#">
              <input type="text" placeholder="サイト内を検索" name="s" value="">
              <input type="submit" value="" alt="検索" title="検索">
            </form>
          </div>      
        </li>

        <!-- メニューアイテム -->
        <li class="sp-menu__item">
          <a href="#scroll-top">
            <div class="sp-menu__item--open">
              <span class="sp-menu__icon"><i class="fas fa-arrow-up"></i></span>
              <span class="sp-menu__icon-txt">トップ</span>
            </div>
          </a>
        </li>

        <!-- メニューアイテム -->
        <li class="sp-menu__item">
          <input type="checkbox" id="sp-menu__item-menu2" class="sp-menu__check">
          <label class="sp-menu__item--open" for="sp-menu__item-menu2">
            <span class="sp-menu__icon"><i class="fas fa-outdent"></i></span>
            <span class="sp-menu__icon-txt">サイドバー</span>
          </label>
          <label class="sp-menu__item--close" for="sp-menu__item-menu2"></label>
          <div class="sp-menu__contents sp-menu__contents-menu2">
            <label class="sp-menu__contents--close" for="sp-menu__item-menu2"><i class="fas fa-times"></i></label>
            サイドバー領域
          </div>
        </li>
      </ul>
      <!-- SP用メニュー 終了 -->
    </main>
  </body>
</html>

CSS

/* 全体設定 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; 
}

html {
  scroll-behavior: smooth;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, li{
  list-style: none;
}

/* SP用メニュー */
.sp-menu {
  display: flex;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  height: 50px;
  background-color: #eee;
}

.sp-menu__item {
  width: calc(100%/5);  /* メニュー数に応じて変更 */
  height: 100%;
  text-align: center;
}

.sp-menu__check {
  display: none;
}

.sp-menu__item--open {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}

.sp-menu__item--close {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  transition: .3s ease-in-out;
}

.sp-menu__icon {
  text-align: center;
}

.sp-menu__icon-txt {
  display: block;
  font-size: 10px;
}

.sp-menu__contents--close {
  display: block;
  margin: 10px 0;
  font-size: 30px;
}

.sp-menu__contents-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  transform: translateX(-100%);
  width: 80vw;
  height: 100vh;
  background-color: #fff;
  transition: .3s ease-in-out;
}
#sp-menu__item-menu1:checked ~ .sp-menu__contents-menu {
  transform: translateX(0%);
}
#sp-menu__item-menu1:checked ~ .sp-menu__item--close {
  display: block;
}

.sp-menu__contents-search{
  position: fixed;
  top: 40%;
  right: 5%;
  left: 5%;
  z-index: 10000;
  transform: translateY(1500%);  /* 画面からギリギリ飛ぶ範囲に設定 */
  width: 90vw;
  transition: .3s ease-in-out;
}
#sp-menu__item-search:checked ~ .sp-menu__contents-search {
  transform: translateY(0%);
}
#sp-menu__item-search:checked ~ .sp-menu__item--close {
  display: block;
}

.sp-menu__contents-menu2{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10000;
  transform: translateX(100%);
  width: 80vw;
  height: 100vh;
  background-color: #fff;
  transition: .3s ease-in-out;
}
#sp-menu__item-menu2:checked ~ .sp-menu__contents-menu2 {
  transform: translateX(0%);
}
#sp-menu__item-menu2:checked ~ .sp-menu__item--close {
  display: block;
}

/* 検索フォーム（必要に応じて） */
input[type="text"] {
  width: 100%;
  padding: 10px;
  border: solid 1px #bbb;
  border-radius: 4px;
  font-size: 16px;
}
input[type="submit"] {
  position: absolute;
  top: -3px;
  right: 3%;
  margin-top: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: #ccc;
  font-weight: 900;
  font-size: 1.4em;
  font-family: "Font Awesome 5 Free";
  cursor: pointer;
}

アイコンにFont Awesomeを用いているため、別途CSSを用意する必要があります。

ポイント

作成するにあたっていくつかのポイントがあります。

transform

メニュー・検索フォーム・サイドバーの出現にはtransformプロパティとtransitionプロパティを使用しています。

このような単調な動きならCSSのみで問題ありません（複雑な動作も可能です）。

一般兄弟結合子(~)

今回のレスポンシブメニュー作成で最も重要な一般兄弟結合子です。

一般兄弟結合子 (general sibling combinator, ~) は2つのセレクターを接続し、同じ親要素の子同士であって、1つ目の要素の後にある2つ目の要素を選択します（直後である必要はありません）。
MDN Web Docs 一般兄弟結合子より

この結合子を用いることによってチェックボックスが有効(チェックされた状態)な要素と兄弟関係にあるコンテンツに対してスタイル付与が行えるようになります。

<li class="sp-menu__item">
  <input type="checkbox" id="sp-menu__item-menu1" class="sp-menu__check">
  <label class="sp-menu__item--open" for="sp-menu__item-menu1">
    <span class="sp-menu__icon"><i class="fas fa-bars"></i></span>
    <span class="sp-menu__icon-txt">メニュー</span>
  </label>
  <label class="sp-menu__item--close" for="sp-menu__item-menu1"></label>
  <div class="sp-menu__contents sp-menu__contents-menu">
  <label class="sp-menu__contents--close" for="sp-menu__item-menu1"><i class="fas fa-times"></i></label>
  メニュー領域
  </div>      
</li>

#sp-menu__item-menu1:checked ~ .sp-menu__contents-menu {
  transform: translateX(0%);
}
#sp-menu__item-menu1:checked ~ .sp-menu__item--close {
  display: block;
}

モーダル背景をlabel要素で用意することによって、チェックを外し再びコンテンツを非表示にすることができます。

各ボタンにチェックボックスを仕込むことで起動する画面を制御し、モーダルバック(黒色背景)や×ボタンにはチェックボックスへのリンク(for属性記述)をしておくことで画面が閉じられるようになる仕組みです。

scroll-behavior

html {
  scroll-behavior: smooth;
}

scroll-behaviorはページ内リンクがあった場合のスクロール挙動を変更することができます。

2019年10月現在、あまり使われている傾向ではないですが今後注目すべきプロパティの1つです。
Can I use “scroll-behavior” ?

動作が不安定な場合はJavaScriptで記述することになります。

改良ポイント

今回はCSSのみで実装するというテーマだったのでJavaScriptは一切使用しませんでしたが、ワンポイント追加でUXを向上させることができます。

検索フォームに自動フォーカス

検索ボタンを押した時、自動でinputフォームにフォーカスが当たるように設定するとUXの向上に繋がります。

// jQueryを使用
$(function(){
  $('#sp-menu__item-search').on('change', function(){
    $('input[type="text"]').focus();
  });
});

まとめ

以上、CSSのみで実装するレスポンシブメニューの紹介でした。

CSSアニメーションや一般兄弟結合子はこれからよく使うことになると思うのでしっかり使いこなせるようになりたいですね！
最後まで読んでいただきありがとうございました！

日々、進化していく技術を私達と一緒に共有していきませんか？
職場で待っています！

WordPressにおすすめ！CSSだけで作るレスポンシブメニュー

Responsive Menu (Only CSS)

コード紹介

HTML

CSS

ポイント

transform

一般兄弟結合子(~)

scroll-behavior

改良ポイント

検索フォームに自動フォーカス

まとめ

WEBの事でお悩みなら、まずは一度 I-SEED にご相談ください！

「さようなら、Flash」2020年では検索で無視されるように

CSS font-family で游ゴシックや游明朝を指定する時の注意

新CSSテクニック「フクロウセレクタ」で均等な間隔を設定しよう

markdown(マークダウン)記法で外部リンク(別タブ)にする方法

markdown(マークダウン)記法の例

WordPress パーマリンク設定やスラッグを変更したときのリダイレクトについて