横にスクロールできる固定フッターメニューを作る方法【HTML/CSS・サンプルコード付き】

フッターメニュー

横にスクロールできる固定フッターメニューを作る方法

横にスクロールできる固定フッターメニューを作る方法を紹介します。本記事では、HTMLとCSSを使って、画面下部へ固定表示したフッターメニューを左右へスクロールできるレイアウトを実装します。メニュー項目が多くても画面内へ無理に詰め込む必要がなく、必要に応じて横へスクロールしながら各メニューへアクセスできるため、スマートフォン向けサイトでも見やすく操作しやすいUIを作成できます。

このサンプルコードでは、フッターメニューを横方向へスクロール可能にし、アイコンとメニュー名を横一列へ配置しています。メニュー数が増えてもレイアウトが崩れにくく、必要な項目だけを表示しながら残りのメニューはスワイプ操作で確認できます。JavaScriptを使用せず、HTMLとCSSだけで実装できるため、導入やカスタマイズも簡単です。

このようなレイアウトは、ECサイト、ニュースサイト、会員サイト、管理画面、Webアプリなど、多数のメニューを表示したい場面で活用されています。限られた画面幅でも操作性を維持したい場合や、固定フッターメニューへ多くの機能を追加したい場合にも利用しやすいサンプルです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

横スクロールメニュー

メニュー項目が多い場合でも、横にスクロールして表示できます。

横スクロール

フッターメニューを横方向へスクロールできるようにしています。

項目数が多い場合

画面幅に収まらないメニューも、横に移動して確認できます。

CSSだけで実装

JavaScriptを使わず、HTMLとCSSだけで横スクロール対応にできます。

overflow-x:auto; を指定すると、横方向にスクロールできる固定フッターメニューを作成できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードを指定 -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>横にスクロールできる固定フッターメニュー</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- ページ全体 -->
  <div class="footer-menu-horizontal-scroll_wrap">

    <!-- タイトル -->
    <h1 class="footer-menu-horizontal-scroll_title">
      横にスクロールできる固定フッターメニュー
    </h1>

    <!-- コンテンツ -->
    <main class="footer-menu-horizontal-scroll_content">
      <p>メニュー項目が多い場合でも、横にスクロールして表示できます。</p>
    </main>

  </div>

  <!-- フッターメニュー -->
  <nav class="footer-menu-horizontal-scroll_nav">

    <a href="#" class="footer-menu-horizontal-scroll_item">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M3 10L12 3L21 10M6 10V20H18V10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>ホーム</span>
    </a>

    <a href="#" class="footer-menu-horizontal-scroll_item">
      <svg viewBox="0 0 24 24" fill="none">
        <circle cx="11" cy="11" r="6" stroke="currentColor" stroke-width="2"/>
        <path d="M16 16L21 21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>検索</span>
    </a>

    <a href="#" class="footer-menu-horizontal-scroll_item">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M12 20L5 13C3.5 11.5 3.5 9 5 7.5C6.5 6 9 6 10.5 7.5L12 9L13.5 7.5C15 6 17.5 6 19 7.5C20.5 9 20.5 11.5 19 13L12 20Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
      </svg>
      <span>お気に入り</span>
    </a>

    <a href="#" class="footer-menu-horizontal-scroll_item">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M7 17H17L16 15V10C16 7.8 14.2 6 12 6C9.8 6 8 7.8 8 10V15L7 17Z" stroke="currentColor" stroke-width="2"/>
        <path d="M10.5 19C10.8 19.6 11.3 20 12 20C12.7 20 13.2 19.6 13.5 19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>通知</span>
    </a>

    <a href="#" class="footer-menu-horizontal-scroll_item">
      <svg viewBox="0 0 24 24" fill="none">
        <circle cx="12" cy="8" r="3" stroke="currentColor" stroke-width="2"/>
        <path d="M6 20C6 16.7 8.7 14 12 14C15.3 14 18 16.7 18 20" stroke="currentColor" stroke-width="2"/>
      </svg>
      <span>マイページ</span>
    </a>

    <a href="#" class="footer-menu-horizontal-scroll_item">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M5 7H19M5 12H19M5 17H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>メニュー</span>
    </a>    <a href="#" class="footer-menu-horizontal-scroll_item">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M5 7H19M5 12H19M5 17H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>メニュー</span>
    </a>    <a href="#" class="footer-menu-horizontal-scroll_item">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M5 7H19M5 12H19M5 17H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>メニュー</span>
    </a>    <a href="#" class="footer-menu-horizontal-scroll_item">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M5 7H19M5 12H19M5 17H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>メニュー</span>
    </a>    <a href="#" class="footer-menu-horizontal-scroll_item">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M5 7H19M5 12H19M5 17H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>メニュー</span>
    </a>    <a href="#" class="footer-menu-horizontal-scroll_item">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M5 7H19M5 12H19M5 17H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>メニュー</span>
    </a>    <a href="#" class="footer-menu-horizontal-scroll_item">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M5 7H19M5 12H19M5 17H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>メニュー</span>
    </a>    <a href="#" class="footer-menu-horizontal-scroll_item">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M5 7H19M5 12H19M5 17H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>メニュー</span>
    </a>    <a href="#" class="footer-menu-horizontal-scroll_item">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M5 7H19M5 12H19M5 17H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>メニュー</span>
    </a>    <a href="#" class="footer-menu-horizontal-scroll_item">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M5 7H19M5 12H19M5 17H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>メニュー</span>
    </a>    <a href="#" class="footer-menu-horizontal-scroll_item">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M5 7H19M5 12H19M5 17H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>メニュー</span>
    </a>    <a href="#" class="footer-menu-horizontal-scroll_item">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M5 7H19M5 12H19M5 17H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>メニュー</span>
    </a>    <a href="#" class="footer-menu-horizontal-scroll_item">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M5 7H19M5 12H19M5 17H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>メニュー</span>
    </a>    <a href="#" class="footer-menu-horizontal-scroll_item">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M5 7H19M5 12H19M5 17H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>メニュー</span>
    </a>    <a href="#" class="footer-menu-horizontal-scroll_item">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M5 7H19M5 12H19M5 17H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>メニュー</span>
    </a>    <a href="#" class="footer-menu-horizontal-scroll_item">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M5 7H19M5 12H19M5 17H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>メニュー</span>
    </a>    <a href="#" class="footer-menu-horizontal-scroll_item">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M5 7H19M5 12H19M5 17H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>メニュー</span>
    </a>

    <a href="#" class="footer-menu-horizontal-scroll_item">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M12 3L15 9L22 10L17 15L18 22L12 18L6 22L7 15L2 10L9 9L12 3Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
      </svg>
      <span>ランキング</span>
    </a>

  </nav>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTMLとCSSを別ファイルで管理します。HTMLに複数のフッターメニュー項目を配置し、CSSで画面下部へ固定表示しながら、横方向へスクロールできるように設定します。メニュー数が多い場合でも、横スクロールで表示できるため、画面幅に無理なく収められます。 

sample/
├── index.html
└── style.css

2つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。フッターメニューに overflow-x:auto; を指定することで、画面幅に収まらないメニューを横方向へスクロールできるようになります。

コメント