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

メニュー項目・サイズ・色・余白・アイコンなどを設定して、HTML・CSS・JavaScriptを自動生成できます。

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

横にスクロールできる固定フッターメニューを作る方法を紹介します。このサンプルでは、画面下部に固定したメニューへ複数の項目を横一列に配置し、画面幅に収まらない場合は左右へスクロールして残りのメニューを表示できるようにします。メニュー項目を無理に縮小しないため、項目数が多い場合でもアイコンや文字を見やすい大きさで表示できます。

固定フッターメニューには「ホーム」「検索」「お気に入り」「通知」「履歴」「設定」「マイページ」の7項目を配置しています。各項目にはSVGアイコンと文字を表示し、メニュー全体は画面下部へ固定します。横方向のスクロールはCSSのoverflow-x:autoで実装するため、JavaScriptを使用せずHTMLとCSSだけで動作します。

会員サイトやECサイト、管理画面など、スマートフォンで利用するナビゲーション項目が多い場合に利用できます。HTMLではメニュー名、リンク先、SVGアイコンを変更でき、CSSでは各項目の横幅、固定フッターの高さ、文字サイズ、アイコンサイズ、色などを調整できます。画面幅に応じて横スクロールできるため、スマートフォン・タブレット・PCで利用できる固定フッターメニューとして活用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

横スクロールメニュー

画面下部のメニューを左右へスクロールできます。

メニュー項目を横一列に表示

画面幅に収まらないメニューは、固定フッターを横へスクロールすると確認できます。

7つのメニュー

ホームからマイページまで7つの項目を配置しています。

画面下部の固定フッターメニューを左右へスクロールして、隠れているメニュー項目を確認してください。

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

<!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>

  <!-- ページ上部 -->
  <header class="horizontal-scroll-fixed-footer_header">

    <!-- タイトル -->
    <div class="horizontal-scroll-fixed-footer_title">
      横スクロールメニュー
    </div>

    <!-- 説明文 -->
    <p class="horizontal-scroll-fixed-footer_description">
      画面下部のメニューを左右へスクロールできます。
    </p>

  </header>

  <!-- メインコンテンツ -->
  <main class="horizontal-scroll-fixed-footer_main">

    <!-- 説明ブロック -->
    <div class="horizontal-scroll-fixed-footer_card">

      <!-- 見出し -->
      <div class="horizontal-scroll-fixed-footer_heading">
        メニュー項目を横一列に表示
      </div>

      <!-- 本文 -->
      <p class="horizontal-scroll-fixed-footer_text">
        画面幅に収まらないメニューは、固定フッターを横へスクロールすると確認できます。
      </p>

    </div>

    <!-- 説明ブロック -->
    <div class="horizontal-scroll-fixed-footer_card">

      <!-- 見出し -->
      <div class="horizontal-scroll-fixed-footer_heading">
        7つのメニュー
      </div>

      <!-- 本文 -->
      <p class="horizontal-scroll-fixed-footer_text">
        ホームからマイページまで7つの項目を配置しています。
      </p>

    </div>

  </main>

  <!-- 画面下部へ固定する横スクロールメニュー -->
  <nav class="horizontal-scroll-fixed-footer_nav">

    <!-- ホーム -->
    <a href="#" class="horizontal-scroll-fixed-footer_item">
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M3 10L12 3L21 10M6 10V20H18V10" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
      </svg>
      <span class="horizontal-scroll-fixed-footer_label">ホーム</span>
    </a>

    <!-- 検索 -->
    <a href="#" class="horizontal-scroll-fixed-footer_item">
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <circle cx="11" cy="11" r="6" stroke="currentColor" stroke-width="2"></circle>
        <path d="M16 16L21 21" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
      </svg>
      <span class="horizontal-scroll-fixed-footer_label">検索</span>
    </a>

    <!-- お気に入り -->
    <a href="#" class="horizontal-scroll-fixed-footer_item">
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M12 20L4.8 13.1C1.3 9.8 3.7 4 8.4 4C10 4 11.2 4.8 12 6C12.8 4.8 14 4 15.6 4C20.3 4 22.7 9.8 19.2 13.1L12 20Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>
      </svg>
      <span class="horizontal-scroll-fixed-footer_label">お気に入り</span>
    </a>

    <!-- 通知 -->
    <a href="#" class="horizontal-scroll-fixed-footer_item">
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <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>
        <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"></path>
      </svg>
      <span class="horizontal-scroll-fixed-footer_label">通知</span>
    </a>

    <!-- 履歴 -->
    <a href="#" class="horizontal-scroll-fixed-footer_item">
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="2"></circle>
        <path d="M12 8V12L15 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
      </svg>
      <span class="horizontal-scroll-fixed-footer_label">履歴</span>
    </a>

    <!-- 設定 -->
    <a href="#" class="horizontal-scroll-fixed-footer_item">
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"></circle>
        <path d="M12 3V5M12 19V21M3 12H5M19 12H21M5.6 5.6L7 7M17 17L18.4 18.4M18.4 5.6L17 7M7 17L5.6 18.4" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
      </svg>
      <span class="horizontal-scroll-fixed-footer_label">設定</span>
    </a>

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

  </nav>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding-bottom:76px; /* 固定フッター分の余白。フッターの高さを変更した場合は同じ値に変更 */
  background:#f8fafc; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体のフォント */
}

/* ページ上部 */
.horizontal-scroll-fixed-footer_header{
  padding:20px; /* ヘッダー内側の余白。大きくすると上下左右の余白が広がる */
  border-bottom:1px solid #e5e7eb; /* ヘッダー下部の線。1pxを変更すると線の太さが変わる */
  background:#ffffff; /* ヘッダーの背景色 */
  text-align:center; /* タイトルと説明文を中央揃えにする */
}

/* ページタイトル */
.horizontal-scroll-fixed-footer_title{
  margin:0; /* タイトルの外側余白を削除 */
  color:#111827; /* タイトルの文字色 */
  font-size:28px; /* タイトルの文字サイズ。大きくするとタイトルも大きくなる */
  font-weight:700; /* タイトルの太さ */
  line-height:1.4; /* タイトルの行間。大きくすると行間が広がる */
}

/* ページ上部の説明文 */
.horizontal-scroll-fixed-footer_description{
  margin:8px 0 0; /* タイトルとの間隔。8pxを大きくすると間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  font-size:13px; /* 説明文の文字サイズ。大きくすると文字が大きくなる */
  line-height:1.7; /* 説明文の行間。大きくすると行間が広がる */
}

/* メインコンテンツ */
.horizontal-scroll-fixed-footer_main{
  min-height:900px; /* ページを縦にスクロールできるようにする最低高さ。大きくするとページが長くなる */
  padding:28px 24px 100px; /* 上28px・左右24px・下100pxの内側余白 */
}

/* 説明ブロック */
.horizontal-scroll-fixed-footer_card{
  margin:0 0 28px; /* 各ブロック下の間隔。28pxを大きくすると間隔が広がる */
}

/* 最後の説明ブロック */
.horizontal-scroll-fixed-footer_card:last-child{
  margin-bottom:0; /* 最後のブロックには下余白を付けない */
}

/* 説明ブロックの見出し */
.horizontal-scroll-fixed-footer_heading{
  margin:0 0 8px; /* 見出しと本文の間隔。8pxを大きくすると間隔が広がる */
  color:#111827; /* 見出しの文字色 */
  font-size:20px; /* 見出しの文字サイズ。大きくすると文字が大きくなる */
  font-weight:700; /* 見出しの太さ */
  line-height:1.4; /* 見出しの行間 */
}

/* 説明ブロックの本文 */
.horizontal-scroll-fixed-footer_text{
  margin:0; /* 本文の外側余白を削除 */
  color:#4b5563; /* 本文の文字色 */
  font-size:14px; /* 本文の文字サイズ。大きくすると文字が大きくなる */
  line-height:1.8; /* 本文の行間。大きくすると行間が広がる */
}

/* 画面下部へ固定する横スクロールメニュー */
.horizontal-scroll-fixed-footer_nav{
  position:fixed; /* ページをスクロールしても画面下部へ固定 */
  right:0; /* 右端を画面右端へ合わせる */
  bottom:0; /* 下端を画面下端へ合わせる */
  left:0; /* 左端を画面左端へ合わせる */
  z-index:1000; /* 通常のページ内容より手前へ表示 */
  display:flex; /* メニューを横一列に並べる */
  width:100%; /* 固定フッターを画面幅いっぱいに表示 */
  height:76px; /* 固定フッターの高さ。変更する場合はbodyのpadding-bottomも合わせて変更 */
  overflow-x:auto; /* 横幅に収まらない部分を左右へスクロールできるようにする */
  overflow-y:hidden; /* 縦方向にはスクロールさせない */
  border-top:1px solid #d1d5db; /* フッター上部の線。1pxを変更すると線の太さが変わる */
  background:#ffffff; /* 固定フッターの背景色 */
  -webkit-overflow-scrolling:touch; /* 対応端末で横スクロールを滑らかにする */
}

/* 固定フッターの各メニュー */
.horizontal-scroll-fixed-footer_item,
.horizontal-scroll-fixed-footer_item:link,
.horizontal-scroll-fixed-footer_item:visited,
.horizontal-scroll-fixed-footer_item:hover,
.horizontal-scroll-fixed-footer_item:focus,
.horizontal-scroll-fixed-footer_item:active{
  display:flex; /* アイコンと文字の配置にFlexboxを使用 */
  flex:0 0 220px; /* 1項目を220px幅に固定。大きくすると横スクロール量が増える */
  flex-direction:column; /* アイコンと文字を縦方向に並べる */
  align-items:center; /* 横方向の中央へ配置 */
  justify-content:center; /* 縦方向の中央へ配置 */
  gap:6px; /* アイコンと文字の間隔。大きくすると間隔が広がる */
  margin:0; /* リンクの外側余白を削除 */
  padding:0; /* リンクの内側余白を削除 */
  border:0; /* リンクの枠線を表示しない */
  background:transparent; /* リンク背景を透明にする */
  color:#2563eb; /* アイコンとメニュー名の色 */
  font-family:inherit; /* ページと同じフォントを使用 */
  font-size:12px; /* メニュー名の文字サイズ。大きくすると文字も大きくなる */
  font-weight:700; /* メニュー名の太さ */
  line-height:1.2; /* メニュー名の行間 */
  text-decoration:none; /* リンクの下線を表示しない */
  box-shadow:none; /* テーマなどによるリンクの影を表示しない */
  outline:none; /* ブラウザ標準のアウトラインを表示しない */
}

/* 固定フッターのSVGアイコン */
.horizontal-scroll-fixed-footer_item svg{
  flex:none; /* アイコンが縮小されないようにする */
  width:24px; /* アイコンの横幅。大きくするとアイコンが大きくなる */
  height:24px; /* アイコンの高さ。大きくするとアイコンが大きくなる */
}

/* メニュー名 */
.horizontal-scroll-fixed-footer_label{
  white-space:nowrap; /* メニュー名を途中で改行しない */
}

/* 画面幅640px以下 */
@media (max-width:640px){

  /* スマートフォンのページタイトル */
  .horizontal-scroll-fixed-footer_title{
    font-size:24px; /* タイトルを24pxへ縮小 */
  }

  /* スマートフォンのメインコンテンツ */
  .horizontal-scroll-fixed-footer_main{
    padding:24px 18px 92px; /* 上24px・左右18px・下92pxへ余白を変更 */
  }

  /* スマートフォンの固定フッター */
  .horizontal-scroll-fixed-footer_nav{
    height:68px; /* 固定フッターの高さを68pxへ縮小 */
  }

  /* スマートフォンの各メニュー */
  .horizontal-scroll-fixed-footer_item,
  .horizontal-scroll-fixed-footer_item:link,
  .horizontal-scroll-fixed-footer_item:visited,
  .horizontal-scroll-fixed-footer_item:hover,
  .horizontal-scroll-fixed-footer_item:focus,
  .horizontal-scroll-fixed-footer_item:active{
    flex-basis:140px; /* 1項目を140px幅にして横スクロールできる状態を維持 */
    font-size:11px; /* メニュー名を11pxへ縮小 */
  }

  /* スマートフォンのSVGアイコン */
  .horizontal-scroll-fixed-footer_item svg{
    width:22px; /* アイコンの横幅を22pxへ縮小 */
    height:22px; /* アイコンの高さを22pxへ縮小 */
  }

}

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは画面下部に固定する7つのメニュー項目を作成し、CSSでは固定位置、メニューの横幅、アイコンや文字のサイズ、横スクロールなどを設定します。JavaScriptや外部ライブラリを使用せず、HTMLとCSSだけで動作します。

固定フッターメニューには「ホーム」「検索」「お気に入り」「通知」「履歴」「設定」「マイページ」の7項目を横一列に配置しています。各項目には一定の横幅を設定し、画面内にすべて収まらない場合はoverflow-x:auto;によって固定フッター内を左右へスクロールできる仕組みです。

固定フッター自体はwidth:100%;で画面幅いっぱいに表示され、ページを縦にスクロールしても画面下部に固定されます。メニュー項目を画面幅に合わせて無理に縮小しないため、項目数が多い固定フッターメニューとして利用できます。

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

各ファイルの役割
index.htmlはページ全体と固定フッターメニューを構成するファイルです。「ホーム」「検索」「お気に入り」「通知」「履歴」「設定」「マイページ」のメニュー名、リンク先、SVGアイコンを変更できます。メニューを追加する場合は、同じ構造のリンクを追加します。

style.cssはページ全体と固定フッターメニューのデザインを設定するファイルです。固定フッターの高さ、各メニューの横幅、アイコンと文字の間隔、文字サイズ、アイコンサイズ、文字色、背景色、境界線、横スクロールなどを変更できます。

設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを同じ階層で配置します。index.htmlからstyle.cssを読み込む構成になっているため、2つのファイルを配置したあと、sample/index.htmlをブラウザで開いてください。固定フッターメニューが画面下部に表示されます。

固定フッターメニューはページを縦にスクロールしても画面下部に固定されます。メニュー全体が画面幅より広い場合は、固定フッター部分を左右へスクロールすると、画面外に隠れているメニュー項目を表示できます。

実際のWebサイトで使用するときは、index.htmlにある各メニューのhref="#"を移動先のURLへ変更してください。

カスタマイズできる内容
index.htmlではメニュー名、リンク先、SVGアイコン、メニュー項目の数を変更できます。「ホーム」「検索」などの文字を用途に合わせて変更したり、同じ構造のリンクを追加して項目数を増やしたり、不要な項目を削除したりできます。

style.cssでは固定フッターの高さ、1項目あたりの横幅、アイコンと文字の間隔、文字サイズ、アイコンサイズ、文字色、背景色、境界線などを変更できます。横スクロールする範囲を調整したい場合は、各メニューに設定している横幅を変更します。

数値調整
style.css
padding-bottom:76px;
固定フッターメニューとページ内容が重ならないように確保する下側の余白です。固定フッターの高さを変更するときは、この値も合わせて調整します。

padding:20px;
ページ上部の内側余白です。値を大きくするとタイトルや説明文と画面端との間隔が広がり、小さくすると狭くなります。

font-size:28px;
ページタイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると小さくなります。

margin:8px 0 0;
ページタイトルと説明文の間隔です。8pxを大きくすると間隔が広がり、小さくすると狭くなります。

font-size:13px;
ページ上部にある説明文の文字サイズです。値を大きくすると文字が大きくなります。

min-height:900px;
メインコンテンツの最低高さです。値を大きくするとページの縦方向の表示領域が長くなり、小さくすると短くなります。

padding:28px 24px 100px;
メインコンテンツの内側余白です。上28px、左右24px、下100pxを設定しています。それぞれの値を変更すると対応する方向の余白が変わります。

margin:0 0 28px;
説明ブロックの下側余白です。28pxを大きくすると各ブロックの間隔が広がり、小さくすると狭くなります。

font-size:20px;
説明ブロックの見出し文字サイズです。値を大きくすると見出しが大きくなり、小さくすると小さくなります。

font-size:14px;
説明ブロック本文の文字サイズです。値を大きくすると本文が大きくなり、小さくすると小さくなります。

height:76px;
固定フッターメニューの高さです。値を大きくするとフッターが高くなり、小さくすると低くなります。変更するときはbodyのpadding-bottom:76px;も合わせて調整してください。

flex:0 0 220px;
PC表示でのメニュー1項目の横幅です。220pxを大きくすると1項目が横に広がって横スクロールする距離が長くなり、小さくすると一度に表示できる項目数が増えます。

gap:6px;
SVGアイコンとメニュー名の間隔です。値を大きくするとアイコンと文字が離れ、小さくすると近くなります。

font-size:12px;
固定フッターメニューの文字サイズです。値を大きくするとメニュー名が大きくなり、小さくすると小さくなります。

width:24px;・height:24px;
SVGアイコンの横幅と高さです。値を大きくするとアイコンが大きくなり、小さくすると小さくなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%;によって固定フッター自体は画面幅いっぱいに表示され、overflow-x:auto;によって画面内に収まらないメニューを左右へスクロールできます。

@media (max-width:640px)では、画面幅640px以下になるとタイトルを24px、メインコンテンツの余白を24px 18px 92px、固定フッターの高さを68pxへ変更します。また、メニュー1項目の横幅を140px、文字サイズを11px、SVGアイコンを22pxへ変更します。各メニューの横幅を維持したまま横スクロールできるため、スマートフォン・タブレット・PCで利用できます。