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

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

立体的な固定フッターメニューを作る方法

Webサイトの画面下部に固定して表示するフッターメニューは、スマートフォン向けのナビゲーションなどでよく使われるUIです。今回のサンプルでは、ホーム・検索・お気に入り・マイページの4つのメニューを配置し、それぞれを独立した立体的なボタンとして表示します。

HTMLとCSSだけで実装しており、各ボタンには影と厚みを付けて、通常時から少し浮き上がって見えるデザインにしています。カーソルを合わせるとボタンがさらに上へ浮き上がり、クリックしている間は下へ沈み込むため、実際にボタンを押しているような立体感のある操作表現を確認できます。

固定フッターメニューは画面幅いっぱいに表示され、ページをスクロールしても画面下部に固定されたままになります。スマートフォン向けサイトの主要メニューや、よく使うページへのナビゲーションなどに利用できます。ボタンの色や影、角丸、立体感の強さ、メニュー名やリンク先などはCSSやHTMLから変更できます。

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

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

デモ

下へスクロールしても、立体的なボタンを配置したフッターメニューは下部に固定されたまま表示されます。

各メニューを独立した立体ボタンとして表示し、カーソルを合わせると浮き上がり、押している間は沈み込みます。

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

<!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="three-dimensional-fixed-footer_content">

    <!-- タイトル -->
    <div class="three-dimensional-fixed-footer_title">
      立体的な固定フッターメニュー
    </div>

    <!-- 説明文 -->
    <p class="three-dimensional-fixed-footer_text">
      ページをスクロールしても、立体的なボタンを配置したフッターメニューは画面下部に固定されたまま表示されます。
    </p>

    <!-- サンプルコンテンツ1 -->
    <div class="three-dimensional-fixed-footer_card">
      <div class="three-dimensional-fixed-footer_card-title">
        コンテンツ1
      </div>
      <p class="three-dimensional-fixed-footer_card-text">
        固定フッターメニューの動作を確認するためのサンプルコンテンツです。
      </p>
    </div>

    <!-- サンプルコンテンツ2 -->
    <div class="three-dimensional-fixed-footer_card">
      <div class="three-dimensional-fixed-footer_card-title">
        コンテンツ2
      </div>
      <p class="three-dimensional-fixed-footer_card-text">
        ページを下へスクロールして固定表示を確認できます。
      </p>
    </div>

    <!-- サンプルコンテンツ3 -->
    <div class="three-dimensional-fixed-footer_card">
      <div class="three-dimensional-fixed-footer_card-title">
        コンテンツ3
      </div>
      <p class="three-dimensional-fixed-footer_card-text">
        スクロールしても下部メニューは移動しません。
      </p>
    </div>

    <!-- サンプルコンテンツ4 -->
    <div class="three-dimensional-fixed-footer_card">
      <div class="three-dimensional-fixed-footer_card-title">
        コンテンツ4
      </div>
      <p class="three-dimensional-fixed-footer_card-text">
        4つのメニューは、それぞれ独立した立体ボタンとして表示されます。
      </p>
    </div>

    <!-- サンプルコンテンツ5 -->
    <div class="three-dimensional-fixed-footer_card">
      <div class="three-dimensional-fixed-footer_card-title">
        コンテンツ5
      </div>
      <p class="three-dimensional-fixed-footer_card-text">
        各ボタンへカーソルを合わせると、さらに上へ浮き上がります。
      </p>
    </div>

    <!-- サンプルコンテンツ6 -->
    <div class="three-dimensional-fixed-footer_card">
      <div class="three-dimensional-fixed-footer_card-title">
        コンテンツ6
      </div>
      <p class="three-dimensional-fixed-footer_card-text">
        ボタンを押している間は沈み込む動きを確認できます。
      </p>
    </div>

  </main>

  <!-- 固定フッターメニュー -->
  <nav class="three-dimensional-fixed-footer_menu" aria-label="固定フッターメニュー">

    <!-- ホーム -->
    <a href="#" class="three-dimensional-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="three-dimensional-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="three-dimensional-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="three-dimensional-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>

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

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

/* ページコンテンツ */
.three-dimensional-fixed-footer_content{
  width:100%; /* 画面幅いっぱいに表示 */
  padding:48px 32px; /* 上下48px・左右32px。値を大きくすると画面端との間隔が広がる */
}

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

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

/* サンプルコンテンツ */
.three-dimensional-fixed-footer_card{
  padding:20px; /* カード内側の余白。値を大きくすると余白が広がる */
  margin-bottom:16px; /* カード同士の間隔。値を大きくすると間隔が広がる */
  border:1px solid #e5e7eb; /* カードの枠線 */
  border-radius:12px; /* カードの角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* カードの背景色 */
}

/* サンプルコンテンツのタイトル */
.three-dimensional-fixed-footer_card-title{
  margin:0 0 8px; /* 下側8pxの余白。値を大きくすると本文との間隔が広がる */
  color:#111827; /* カードタイトルの文字色 */
  font-size:18px; /* カードタイトルの文字サイズ */
  font-weight:700; /* カードタイトルを太字にする */
}

/* サンプルコンテンツの本文 */
.three-dimensional-fixed-footer_card-text{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  color:#4b5563; /* 本文の文字色 */
  line-height:1.8; /* 本文の行間。値を大きくすると行間が広がる */
}

/* 画面下部に固定するフッターメニュー */
.three-dimensional-fixed-footer_menu{
  position:fixed; /* フッターメニューを画面へ固定 */
  right:0; /* 画面右端へ配置 */
  bottom:0; /* 画面下端へ配置 */
  left:0; /* 画面左端へ配置 */
  z-index:1000; /* ページコンテンツより手前へ表示 */
  display:flex; /* メニューボタンを横並びにする */
  align-items:center; /* メニューボタンを上下中央へ配置 */
  gap:16px; /* ボタン同士の間隔。値を大きくすると間隔が広がる */
  width:100%; /* 画面幅いっぱいに表示 */
  min-height:96px; /* メニュー全体の最低高さ。値を大きくすると高くなる */
  padding:14px 24px 18px; /* 上14px・左右24px・下18px。値を大きくすると内側余白が広がる */
  border-top:1px solid #e5e7eb; /* メニュー上側の境界線 */
  background:#ffffff; /* メニュー全体の背景色 */
}

/* 独立した立体メニューボタン */
.three-dimensional-fixed-footer_menu-item{
  display:flex; /* アイコンと文字を配置する */
  flex:1; /* 4つのボタンを均等な横幅にする */
  flex-direction:column; /* アイコンと文字を縦方向へ配置 */
  align-items:center; /* アイコンと文字を左右中央へ配置 */
  justify-content:center; /* アイコンと文字を上下中央へ配置 */
  gap:6px; /* アイコンと文字の間隔。値を大きくすると間隔が広がる */
  min-width:0; /* 狭い画面でボタンが横にはみ出すのを防ぐ */
  min-height:62px; /* ボタンの最低高さ。値を大きくするとボタンが高くなる */
  padding:8px 6px; /* 上下8px・左右6px。値を大きくするとボタン内側の余白が広がる */
  border:1px solid #dbeafe; /* ボタンの枠線 */
  border-radius:12px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
  background:linear-gradient(
    to bottom,
    #ffffff 0%,
    #eff6ff 100%
  ); /* 上から下へ薄いブルーのグラデーションを付ける */
  color:#4b5563; /* 通常時の文字とアイコンの色 */
  font-size:12px; /* メニュー名の文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* メニュー名を太字にする */
  text-decoration:none; /* リンクの下線を非表示 */
  box-shadow:
    0 5px 0 #bfdbfe,
    0 8px 12px rgba(15,23,42,.12);
  /*
    5pxはボタン下側の厚み。
    値を大きくすると立体感が強くなる。
    8pxと12pxは外側の影の位置とぼかし量。
  */
  transform:translateY(-3px); /* 通常時に3px上へ浮かせる。値を大きくすると上方向への移動量が増える */
  transition:
    transform .2s ease,
    color .2s ease,
    box-shadow .2s ease;
  /*
    0.2秒で位置・色・影を切り替える。
    値を大きくするとゆっくり、小さくすると速く変化する。
  */
}

/* カーソルを合わせたとき */
.three-dimensional-fixed-footer_menu-item:hover{
  color:#2563eb; /* ホバー時の文字とアイコンの色 */
  transform:translateY(-6px); /* 6px上へ浮かせる。値を大きくすると浮き上がる距離が増える */
  box-shadow:
    0 8px 0 #93c5fd,
    0 12px 16px rgba(37,99,235,.16);
  /*
    8pxはホバー時のボタン下側の厚み。
    12pxと16pxは外側の影の位置とぼかし量。
  */
}

/* ボタンを押しているとき */
.three-dimensional-fixed-footer_menu-item:active{
  transform:translateY(1px); /* 1px下へ移動して押し込まれた状態を表現 */
  box-shadow:
    0 2px 0 #93c5fd,
    0 4px 8px rgba(15,23,42,.12);
  /*
    2pxは押しているときのボタン下側の厚み。
    通常時より小さくすることで沈み込んだ状態を表現する。
  */
}

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

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

  /* ページコンテンツ */
  .three-dimensional-fixed-footer_content{
    padding:40px 20px; /* スマートフォンでは左右の余白を小さくする */
  }

  /* タイトル */
  .three-dimensional-fixed-footer_title{
    font-size:24px; /* スマートフォンではタイトルを小さくする */
  }

  /* 固定フッターメニュー */
  .three-dimensional-fixed-footer_menu{
    gap:8px; /* スマートフォンではボタン同士の間隔を狭くする */
    padding:14px 10px 18px; /* スマートフォンでは左右の余白を小さくする */
  }

  /* 立体メニューボタン */
  .three-dimensional-fixed-footer_menu-item{
    min-height:60px; /* スマートフォンでのボタンの最低高さ */
    padding:8px 3px; /* スマートフォンでは左右の内側余白を小さくする */
    font-size:11px; /* スマートフォンではメニュー名を小さくする */
  }

  /* メニューアイコン */
  .three-dimensional-fixed-footer_menu-item svg{
    width:22px; /* スマートフォンではアイコンを小さくする */
    height:22px; /* スマートフォンではアイコンを小さくする */
  }

}

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

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

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

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

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではホーム・検索・お気に入り・マイページの4つのリンクを配置した固定フッターメニューを作成し、CSSでは画面下部への固定表示と、それぞれのメニューを独立した立体ボタンとして見せるデザインを設定します。JavaScriptや外部ライブラリは使用しません。

固定フッターメニューは画面幅いっぱいに表示され、ページをスクロールしても画面下部に残ります。各ボタンには影と上下方向の位置調整を設定しており、通常時は少し浮いた状態、カーソルを合わせたときはさらに浮き上がった状態、押している間は沈み込んだ状態になります。

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

各ファイルの役割
index.htmlはページコンテンツと固定フッターメニューを構成するファイルです。「ホーム」「検索」「お気に入り」「マイページ」のメニュー名、SVGアイコン、各メニューのリンク先を変更できます。

style.cssは固定フッターメニューと各ボタンのデザインを設定するファイルです。メニュー全体の高さや余白、ボタン同士の間隔、背景色、枠線、角丸、影、文字色、アイコンサイズ、ホバー時の浮き上がり、クリック時の沈み込みなどを変更できます。

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

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

カスタマイズできる内容
index.htmlではメニュー名、リンク先、SVGアイコン、ページ内の表示内容を変更できます。style.cssでは固定フッターメニューの背景色や境界線、各ボタンのグラデーション、文字色、枠線、角丸、影などを変更できます。

各ボタンの通常時・ホバー時・クリック時には、それぞれ異なるtransformとbox-shadowを設定しています。これらを調整することで、ボタンの厚み、浮き上がる距離、押したときの沈み込み方を変更できます。

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

padding:48px 32px;
ページコンテンツの内側余白です。48pxが上下、32pxが左右の余白です。値を大きくすると画面端との間隔が広がります。

gap:16px;
4つの立体ボタン同士の間隔です。値を大きくするとボタン同士が離れ、小さくすると近くなります。

min-height:96px;
固定フッターメニュー全体の最低高さです。値を大きくするとメニュー全体が高くなります。

padding:14px 24px 18px;
固定フッターメニューの内側余白です。14pxが上、24pxが左右、18pxが下の余白です。値を変更するとボタンとメニュー外周との間隔が変わります。

min-height:62px;
各立体ボタンの最低高さです。値を大きくするとボタンが高くなり、小さくすると低くなります。

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

border-radius:12px;
各ボタンの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

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

0 5px 0 #bfdbfe
通常時のボタン下側に付ける影です。5pxを大きくするとボタンの厚みが強く見え、小さくすると立体感が控えめになります。

transform:translateY(-3px);
通常時のボタン位置です。マイナス方向の値を大きくすると、ボタンがさらに上へ浮いた状態になります。

transition:.2s;
ボタンの位置・色・影が切り替わる時間です。0.2秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。

transform:translateY(-6px);
カーソルを合わせたときのボタン位置です。マイナス方向の値を大きくすると、より大きく浮き上がります。

transform:translateY(1px);
ボタンを押している間の位置です。プラス方向へ移動させることで、ボタンが下へ沈み込む動きを表現します。

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

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssの固定フッターメニューにwidth:100%を設定しているため、最大横幅による制限を設けず画面幅いっぱいに表示されます。4つのボタンにはflex:1を設定し、利用できる横幅を均等に分けて表示します。

画面幅が640px以下になると、メディアクエリによってボタン同士の間隔を8px、メニュー名を11px、アイコンを22pxへ変更し、左右の余白も小さくします。スマートフォン・タブレット・PCの画面幅に合わせて固定フッターメニューを表示できます。