2列表示の固定フッターメニューを作る方法【HTML/CSS・サンプルコード付き】

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

2列表示の固定フッターメニューを作る方法

2列表示の固定フッターメニューをHTMLとCSSだけで作る方法を紹介します。このサンプルでは、ホーム・検索・お気に入り・通知・マイページ・メニュー・ランキング・履歴の8項目を、画面下部の固定フッターメニューへ上下2段で表示します。1段だけでは項目数が多くなりやすい場合でも、2段に分けることで複数のメニューをまとめて配置できます。

レイアウトにはCSS Gridを使用し、4列×2段の構成で8個のメニューを均等に配置します。各項目にはSVGアイコンとメニュー名を縦方向に並べ、ページをスクロールしてもフッターメニューは画面下部に固定されたまま表示されます。会員サイトのマイページ、ECサイトの主要機能、管理画面など、画面下部から複数のページへ移動できるナビゲーションを設置したい場合に利用できます。

JavaScriptや外部ライブラリを使用しないため、HTMLとCSSだけで導入できます。HTMLではメニュー名・リンク先・SVGアイコンを変更でき、CSSでは列数、メニューの高さ、文字サイズ、アイコンサイズ、色などを調整できます。画面幅に合わせて表示できるため、スマートフォン・タブレット・PCで利用できる固定フッターメニューのサンプルとして活用できます。

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

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

デモ

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

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

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

  <!-- スマートフォン対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>2列表示の固定フッターメニュー</title>

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

</head>
<body>

  <!-- ページ上部 -->
  <header class="footer-menu-two-row_header">

    <!-- タイトル -->
    <div class="footer-menu-two-row_title">
      2列フッターメニュー
    </div>

    <!-- 説明文 -->
    <p class="footer-menu-two-row_description">
      メニューを上下2段に分けて表示できます。
    </p>

  </header>

  <!-- ページコンテンツ -->
  <main class="footer-menu-two-row_main">

    <!-- コンテンツ1 -->
    <div class="footer-menu-two-row_card">
      <div class="footer-menu-two-row_heading">
        多くの機能を表示
      </div>
      <p>
        1段では収まらないメニューも、上下2段にすることで一覧表示できます。
      </p>
    </div>

    <!-- コンテンツ2 -->
    <div class="footer-menu-two-row_card">
      <div class="footer-menu-two-row_heading">
        HTML・CSSだけで実装
      </div>
      <p>
        CSS Gridを利用して4列×2段のレイアウトを作成しています。
      </p>
    </div>

    <!-- コンテンツ3 -->
    <div class="footer-menu-two-row_card">
      <div class="footer-menu-two-row_heading">
        8個のメニューを配置
      </div>
      <p>
        ホームや検索など、8個のメニューを画面下部へまとめて表示できます。
      </p>
    </div>

  </main>

  <!-- 2段表示の固定フッターメニュー -->
  <nav class="footer-menu-two-row_nav" aria-label="固定フッターメニュー">

    <!-- ホーム -->
    <a href="#" class="footer-menu-two-row_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>ホーム</span>
    </a>

    <!-- 検索 -->
    <a href="#" class="footer-menu-two-row_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>検索</span>
    </a>

    <!-- お気に入り -->
    <a href="#" class="footer-menu-two-row_item">
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <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"></path>
      </svg>
      <span>お気に入り</span>
    </a>

    <!-- 通知 -->
    <a href="#" class="footer-menu-two-row_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>
      </svg>
      <span>通知</span>
    </a>

    <!-- マイページ -->
    <a href="#" class="footer-menu-two-row_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>マイページ</span>
    </a>

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

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

    <!-- 履歴 -->
    <a href="#" class="footer-menu-two-row_item">
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M12 7V12L15 15" stroke="currentColor" stroke-width="2"></path>
        <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"></circle>
      </svg>
      <span>履歴</span>
    </a>

  </nav>

</body>
</html>

/* ページ全体 */
*{
  box-sizing:border-box; /* paddingとborderを要素の横幅・高さへ含める */
}

body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding-bottom:145px; /* 2段の固定メニューでページ内容が隠れないよう下側に余白を確保 */
  background:#f8fafc; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* ページ上部 */
.footer-menu-two-row_header{
  padding:20px; /* 内側の余白。値を大きくすると余白が広がる */
  border-bottom:1px solid #e5e7eb; /* ページ上部の境界線 */
  background:#ffffff; /* ページ上部の背景色 */
  text-align:center; /* タイトルと説明文を中央揃えにする */
}

/* タイトル */
.footer-menu-two-row_title{
  margin:0; /* 外側余白を削除 */
  color:#111827; /* タイトルの文字色 */
  font-size:28px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
}

/* 説明文 */
.footer-menu-two-row_description{
  margin:8px 0 0; /* タイトルとの間隔。8pxを大きくすると間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  font-size:13px; /* 説明文の文字サイズ */
  line-height:1.7; /* 説明文の行間。値を大きくすると行間が広がる */
}

/* ページコンテンツ */
.footer-menu-two-row_main{
  min-height:720px; /* スクロールを確認できる最低高さ。値を大きくするとページが長くなる */
  padding:28px 24px; /* 上下28px・左右24px。値を大きくすると余白が広がる */
}

/* コンテンツ */
.footer-menu-two-row_card{
  margin-bottom:28px; /* コンテンツ同士の間隔。値を大きくすると間隔が広がる */
}

/* コンテンツのタイトル */
.footer-menu-two-row_heading{
  margin:0 0 8px; /* 下側8pxの余白。値を大きくすると本文との間隔が広がる */
  color:#111827; /* タイトルの文字色 */
  font-size:20px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
}

/* コンテンツの本文 */
.footer-menu-two-row_card p{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  color:#4b5563; /* 本文の文字色 */
  line-height:1.8; /* 本文の行間。値を大きくすると行間が広がる */
}

/* 2段表示の固定フッターメニュー */
.footer-menu-two-row_nav{
  position:fixed; /* メニューを画面へ固定 */
  right:0; /* 画面右端へ配置 */
  bottom:0; /* 画面下端へ配置 */
  left:0; /* 画面左端へ配置 */
  z-index:1000; /* ページコンテンツより手前へ表示 */
  display:grid; /* CSS Gridでメニューを配置 */
  grid-template-columns:repeat(4,1fr); /* 4列に均等分割。8項目を4列×2段で表示 */
  width:100%; /* 画面幅いっぱいに表示 */
  border-top:1px solid #d1d5db; /* メニュー上側の境界線 */
  background:#ffffff; /* メニューの背景色 */
}

/* 各メニュー */
.footer-menu-two-row_item{
  display:flex; /* アイコンと文字を配置する */
  flex-direction:column; /* アイコンと文字を縦方向へ配置 */
  align-items:center; /* 左右中央へ配置 */
  justify-content:center; /* 上下中央へ配置 */
  gap:6px; /* アイコンと文字の間隔。値を大きくすると間隔が広がる */
  height:72px; /* 1項目の高さ。値を大きくすると固定メニュー全体も高くなる */
  border-top:1px solid #eef2f7; /* 2段目の上側に境界線を表示 */
  color:#2563eb; /* アイコンと文字の色 */
  font-size:12px; /* メニュー名の文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* メニュー名を太字にする */
  text-decoration:none; /* リンクの下線を非表示 */
}

/* 1段目の境界線を非表示 */
.footer-menu-two-row_item:nth-child(-n+4){
  border-top:none; /* 最初の4項目には上側の境界線を付けない */
}

/* メニューアイコン */
.footer-menu-two-row_item svg{
  width:24px; /* アイコンの横幅。値を大きくするとアイコンが大きくなる */
  height:24px; /* アイコンの高さ。値を大きくするとアイコンが大きくなる */
}

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

  /* ページコンテンツ */
  .footer-menu-two-row_main{
    padding:24px 18px; /* スマートフォンでは左右の余白を小さくする */
  }

  /* タイトル */
  .footer-menu-two-row_title{
    font-size:24px; /* スマートフォンではタイトルを小さくする */
  }

  /* 各メニュー */
  .footer-menu-two-row_item{
    height:68px; /* スマートフォンでは各メニューの高さを少し小さくする */
    font-size:11px; /* スマートフォンではメニュー名を小さくする */
  }

  /* メニューアイコン */
  .footer-menu-two-row_item svg{
    width:22px; /* スマートフォンではアイコンを小さくする */
    height:22px; /* スマートフォンではアイコンを小さくする */
  }

}

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

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

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

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

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではホーム・検索・お気に入り・通知・マイページ・メニュー・ランキング・履歴の8項目を配置し、CSS Gridを使用して4列×2段の固定フッターメニューとして表示します。JavaScriptや外部ライブラリは使用しません。

固定フッターメニューにはposition:fixedを使用しているため、ページをスクロールしても画面下部に表示され続けます。メニュー全体には最大横幅を設定せず、画面幅いっぱいを4列に均等分割して8個のメニューを上下2段へ配置します。

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

各ファイルの役割
index.htmlはページコンテンツと固定フッターメニューを構成するファイルです。8個のメニューについて、メニュー名、リンク先、SVGアイコンを変更できます。

style.cssは固定フッターメニューの配置とデザインを設定するファイルです。CSS Gridによる列数、各メニューの高さ、アイコンと文字の間隔、文字サイズ、アイコンサイズ、色などを変更できます。

設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssを読み込み、8個のメニューが画面下部へ4列×2段で固定表示されます。

各メニューのリンク先は、index.htmlに記述しているhref="#"を移動させたいページのURLへ変更してください。「ホーム」「検索」「お気に入り」などのメニュー名も、Webサイトで使用する内容に合わせて変更できます。

カスタマイズできる内容
index.htmlでは8個のメニュー名、リンク先、SVGアイコンを変更できます。項目を追加・削除する場合は、footer-menu-two-row_itemを付けたリンク要素を追加・削除します。style.cssではメニューの列数、各項目の高さ、文字色、文字サイズ、アイコンサイズ、項目同士の配置を変更できます。

grid-template-columns:repeat(4,1fr);では1段あたり4項目を均等に配置しています。列数を変更する場合は、この4を表示したい列数に変更できます。

数値調整
style.css
padding-bottom:145px;
2段の固定フッターメニューによってページ内容が隠れないように確保する下側の余白です。各メニューの高さを変更した場合は、この値も合わせて調整してください。

grid-template-columns:repeat(4,1fr);
固定フッターメニューの列数です。4を変更すると1段に表示するメニュー数が変わります。現在は8項目を4列×2段で表示します。

height:72px;
各メニューの高さです。値を大きくすると1段の高さが高くなり、2段分の固定フッターメニュー全体も高くなります。

gap:6px;
アイコンとメニュー名の間隔です。値を大きくするとアイコンと文字の間隔が広がります。

font-size:12px;
メニュー名の文字サイズです。値を大きくすると文字が大きくなり、小さくするとコンパクトになります。

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

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

min-height:720px;
サンプルページのコンテンツ部分に設定している最低高さです。値を大きくするとページが長くなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssの固定フッターメニューにwidth:100%を設定し、grid-template-columns:repeat(4,1fr)によって利用できる画面幅を4列へ均等に分割します。最大横幅による制限は設けていません。

画面幅が640px以下になると、メディアクエリによって各メニューの高さを68px、文字サイズを11px、SVGアイコンを22pxへ変更します。ページコンテンツの左右余白も小さくし、スマートフォン・タブレット・PCの画面幅に合わせて表示できるようにしています。