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

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

基本の固定フッターメニューを作る方法

基本の固定フッターメニューを作る方法を紹介します。このサンプルでは、HTMLでホーム・検索・お気に入り・マイページの4つのメニュー項目を作成し、CSSのposition:fixedを使用して画面下部へ固定表示します。ページを上下にスクロールしてもメニューは画面下部に残るため、よく利用するページへのリンクを常に表示しておきたい場合に利用できます。

スマートフォン向けサイトや会員サイト、ECサイト、Webアプリなど、主要なページへすぐ移動できるナビゲーションを設置したい場面に適しています。各メニューにはSVGアイコンと文字を縦並びで表示し、マウスを重ねると文字とアイコンの色が青色へ変化します。また、固定メニューとページ下部のコンテンツが重ならないように、ページ全体へメニューの高さに合わせた下側余白を設定しています。

JavaScriptを使用せずHTMLとCSSだけで実装でき、リンク先、メニュー名、SVGアイコン、文字色、背景色、メニューの高さ、アイコンサイズなどを用途に合わせて変更できます。画面幅640px以下ではページコンテンツの余白とタイトルサイズを調整するレスポンシブ対応も行っているため、スマートフォン・タブレット・PCで利用しやすく、初心者でも導入しやすい固定フッターメニューの基本サンプルとして活用できます。

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

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

デモ

下へスクロールしても、画面下部の固定フッターメニューは常に表示されたままになります。

デモ内をスクロールすると、固定フッターメニューが常に下部へ表示されることを確認できます。

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

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

  <!-- ページコンテンツ -->
  <main class="basic-fixed-footer-content">

    <!-- タイトル -->
    <div class="basic-fixed-footer-title">
      基本の固定フッターメニュー
    </div>

    <!-- 説明文 -->
    <p class="basic-fixed-footer-text">
      下へスクロールしても、画面下部の固定フッターメニューは常に表示されたままになります。
    </p>

    <!-- コンテンツカード -->
    <div class="basic-fixed-footer-card">
      <div class="basic-fixed-footer-card-title">
        コンテンツ1
      </div>
      <p class="basic-fixed-footer-card-text">
        固定フッターメニューの動作を確認するためのダミーコンテンツです。
      </p>
    </div>

    <!-- コンテンツカード -->
    <div class="basic-fixed-footer-card">
      <div class="basic-fixed-footer-card-title">
        コンテンツ2
      </div>
      <p class="basic-fixed-footer-card-text">
        このエリアは自由にスクロールできます。
      </p>
    </div>

    <!-- コンテンツカード -->
    <div class="basic-fixed-footer-card">
      <div class="basic-fixed-footer-card-title">
        コンテンツ3
      </div>
      <p class="basic-fixed-footer-card-text">
        スクロールしても下部メニューは移動しません。
      </p>
    </div>

    <!-- コンテンツカード -->
    <div class="basic-fixed-footer-card">
      <div class="basic-fixed-footer-card-title">
        コンテンツ4
      </div>
      <p class="basic-fixed-footer-card-text">
        スマートフォン向けサイトやWebアプリでよく利用されるレイアウトです。
      </p>
    </div>

    <!-- コンテンツカード -->
    <div class="basic-fixed-footer-card">
      <div class="basic-fixed-footer-card-title">
        コンテンツ5
      </div>
      <p class="basic-fixed-footer-card-text">
        最後までスクロールして固定表示を確認してください。
      </p>
    </div>

    <!-- コンテンツカード -->
    <div class="basic-fixed-footer-card">
      <div class="basic-fixed-footer-card-title">
        コンテンツ6
      </div>
      <p class="basic-fixed-footer-card-text">
        このカードはスクロール量を増やすためのサンプルです。
      </p>
    </div>

  </main>

  <!-- 固定フッターメニュー -->
  <nav class="basic-fixed-footer-menu" aria-label="固定フッターメニュー">

    <!-- ホーム -->
    <a href="#" class="basic-fixed-footer-menu_item">
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 3 3 10h2v10h5v-6h4v6h5V10h2z"></path>
      </svg>
      <span>ホーム</span>
    </a>

    <!-- 検索 -->
    <a href="#" class="basic-fixed-footer-menu_item">
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M10 18a8 8 0 1 1 5.29-2l4.36 4.35-1.42 1.42-4.35-4.36A8 8 0 0 1 10 18zm0-2a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"></path>
      </svg>
      <span>検索</span>
    </a>

    <!-- お気に入り -->
    <a href="#" class="basic-fixed-footer-menu_item">
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 21 2.8 11.8a5.5 5.5 0 1 1 7.8-7.8L12 5.4l1.4-1.4a5.5 5.5 0 1 1 7.8 7.8z"></path>
      </svg>
      <span>お気に入り</span>
    </a>

    <!-- マイページ -->
    <a href="#" class="basic-fixed-footer-menu_item">
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0 2c-3.3 0-6 1.8-6 4v2h12v-2c0-2.2-2.7-4-6-4z"></path>
      </svg>
      <span>マイページ</span>
    </a>

  </nav>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding-bottom:76px; /* 固定メニューの高さ分だけ下側に余白を確保する */
  background:#f3f4f6; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
  box-sizing:border-box; /* paddingをサイズへ含める */
}

/* ページコンテンツ */
.basic-fixed-footer-content{
  width:100%; /* 画面幅いっぱいに表示 */
  padding:48px 32px; /* 上下48px・左右32px。値を大きくすると画面端との余白が広がる */
  box-sizing:border-box; /* paddingを横幅へ含める */
}

/* タイトル */
.basic-fixed-footer-title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  color:#111827; /* タイトルの文字色 */
  font-size:28px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.basic-fixed-footer-text{
  margin:0 0 32px; /* 下側32pxの余白。値を大きくするとカードとの間隔が広がる */
  color:#64748b; /* 説明文の文字色 */
  line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
  text-align:center; /* 説明文を中央揃えにする */
}

/* コンテンツカード */
.basic-fixed-footer-card{
  padding:20px; /* カード内側の余白。値を大きくすると内容と枠線の間隔が広がる */
  margin-bottom:16px; /* カード下側の余白。値を大きくするとカード同士の間隔が広がる */
  border:1px solid #e5e7eb; /* カードの枠線 */
  border-radius:12px; /* カードの角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* カードの背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* カードタイトル */
.basic-fixed-footer-card-title{
  margin:0 0 8px; /* 下側8pxの余白。値を大きくすると説明文との間隔が広がる */
  color:#111827; /* カードタイトルの文字色 */
  font-size:18px; /* カードタイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* カードタイトルを太字にする */
}

/* カード説明文 */
.basic-fixed-footer-card-text{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  color:#4b5563; /* カード説明文の文字色 */
  line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
}

/* 固定フッターメニュー */
.basic-fixed-footer-menu{
  position:fixed; /* メニューを画面に固定する */
  left:0; /* 画面左端へ配置 */
  right:0; /* 画面右端へ配置 */
  bottom:0; /* 画面下端へ配置 */
  z-index:1000; /* 他のコンテンツより前面へ表示する */
  display:flex; /* メニュー項目を横並びにする */
  justify-content:space-around; /* メニュー項目を均等に配置する */
  align-items:center; /* メニュー項目を上下中央へ揃える */
  width:100%; /* 画面幅いっぱいに表示 */
  height:76px; /* メニューの高さ。変更する場合はbodyのpadding-bottomも合わせて変更する */
  background:#ffffff; /* メニューの背景色 */
  border-top:1px solid #e5e7eb; /* メニュー上部の境界線 */
  box-shadow:0 -4px 18px rgba(15,23,42,0.05); /* 上側の影。18pxを大きくすると影が広がる */
  box-sizing:border-box; /* borderを高さへ含める */
}

/* メニュー項目 */
.basic-fixed-footer-menu_item{
  display:flex; /* アイコンと文字をまとめる */
  flex-direction:column; /* アイコンと文字を縦並びにする */
  align-items:center; /* 左右中央へ揃える */
  justify-content:center; /* 上下中央へ揃える */
  gap:6px; /* アイコンと文字の間隔。値を大きくすると間隔が広がる */
  color:#4b5563; /* 通常時の文字とアイコンの色 */
  font-size:12px; /* メニュー文字のサイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* メニュー文字を太字にする */
  text-decoration:none; /* リンクの下線を非表示にする */
  transition:color .3s ease; /* 0.3秒で色を切り替える。値を大きくすると遅くなる */
}

/* メニュー項目へマウスを重ねたとき */
.basic-fixed-footer-menu_item:hover{
  color:#2563eb; /* マウスを重ねたときの文字とアイコンの色 */
}

/* メニューアイコン */
.basic-fixed-footer-menu_item svg{
  width:24px; /* アイコンの横幅。値を大きくするとアイコンが大きくなる */
  height:24px; /* アイコンの高さ。値を大きくするとアイコンが大きくなる */
  fill:currentColor; /* メニュー項目と同じ色を使用する */
}

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

  /* ページコンテンツ */
  .basic-fixed-footer-content{
    padding:40px 20px; /* 上下40px・左右20pxへ変更して画面端の余白を抑える */
  }

  /* タイトル */
  .basic-fixed-footer-title{
    font-size:24px; /* タイトルを24pxへ小さくする */
  }

}

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

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

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

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

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

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではページコンテンツと4つのリンクを持つ固定フッターメニューを作成し、CSSではメニューを画面下部へ固定する位置、横幅、高さ、背景色、アイコンサイズなどを設定します。JavaScriptや外部ライブラリは使用しないため、index.htmlとstyle.cssを同じ階層へ配置するだけで利用できます。

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

各ファイルの役割
index.htmlはページコンテンツと固定フッターメニューを構成するファイルです。「ホーム」「検索」「お気に入り」「マイページ」の文字、各リンクのhref属性、SVGアイコンなどを変更できます。実際のサイトで使用するときは、href属性を移動先のURLへ変更してください。

style.cssはページ全体と固定フッターメニューのデザインを設定するファイルです。メニューの高さ、背景色、文字色、アイコンサイズ、項目同士の間隔、マウスを重ねたときの色などを変更できます。

設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ページを上下へスクロールしても、固定フッターメニューは画面下部へ表示されたままになります。実際に利用するときは、index.htmlにある各リンクのhref="#"を移動先のURLへ変更してください。

固定フッターメニューはposition:fixed;とbottom:0;で画面下部へ固定しています。固定されたメニューがページ下部の内容へ重ならないように、bodyにはメニューの高さと同じpadding-bottom:76px;を設定しています。

カスタマイズできる内容
index.htmlではメニューの文字、リンク先、SVGアイコン、ページ内のタイトルや説明文、コンテンツカードの内容を変更できます。メニュー項目をサイトに合わせて変更する場合は、各basic-fixed-footer-menu_item内の文字、SVG、href属性を編集してください。

style.cssでは固定フッターメニューの背景色、文字色、マウスを重ねたときの色、メニューの高さ、アイコンサイズ、文字サイズ、影などを変更できます。また、ページコンテンツやカードの背景色、余白、角丸なども用途に合わせて調整できます。

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

padding:48px 32px;
ページコンテンツの内側余白です。48pxを変更すると上下の余白、32pxを変更すると左右の余白が変わります。

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

margin:0 0 32px;
説明文の下側余白です。32pxを大きくすると最初のカードとの間隔が広がり、小さくすると狭くなります。

padding:20px;
コンテンツカードの内側余白です。値を大きくすると文章とカード枠の間隔が広がります。

margin-bottom:16px;
コンテンツカード同士の間隔です。値を大きくするとカード間の余白が広がります。

border-radius:12px;
コンテンツカードの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

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

box-shadow:0 -4px 18px ...
固定フッターメニュー上側の影です。18pxを大きくすると影の広がりが大きくなり、小さくすると控えめになります。

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

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

transition:color .3s ease;
マウスを重ねたときに文字とアイコンの色が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。

width:24px;・height:24px;
SVGアイコンの大きさです。両方の値を同じように変更すると、アイコンを大きくしたり小さくしたりできます。

レスポンシブ対応
このサンプルはレスポンシブ対応です。固定フッターメニューはstyle.cssのwidth:100%;によって画面幅いっぱいに表示され、4つのメニュー項目はFlexboxで均等に配置されます。また、640px以下ではページコンテンツの余白をpadding:40px 20px;、タイトルの文字サイズをfont-size:24px;へ変更しています。スマートフォン・タブレット・PCの画面幅に合わせて利用できます。