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

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

立体的な固定フッターメニューを作る方法を紹介します。このサンプルでは、HTMLとCSSを使用して、コンテンツをスクロールしても画面下部へ固定されたまま表示されるフッターメニューを作成します。フッターメニュー全体に厚みと影を付けることで、通常の平面的な固定メニューとは異なる立体的なデザインに仕上げています。

フッターメニューには「ホーム」「検索」「お気に入り」「マイページ」の4項目を配置し、それぞれアイコンと文字を縦方向に並べています。メニュー全体はデモ画面の左右と下端へ接した状態で固定されているため、コンテンツを下へスクロールしても常に表示されます。また、各メニュー項目へマウスカーソルを合わせると上方向へ浮き上がり、厚みと影が強調されます。

HTMLではメニュー項目の文字やリンク先、SVGアイコンを変更でき、CSSではフッターメニューの高さ、余白、背景色、角丸、厚み、影、各項目の浮き上がり量などを調整できます。画面幅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>

  <!-- 固定フッターメニューを含むデモ全体 -->
  <div class="three-dimensional-fixed-footer-demo">

    <!-- スクロールするコンテンツエリア -->
    <div 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>固定フッターメニューの動作を確認するためのダミーコンテンツです。</p>
      </div>

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

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

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

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

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

    </div>

    <!-- 立体的な固定フッターメニュー -->
    <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>

  </div>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* 全要素のサイズ計算 */
.three-dimensional-fixed-footer-demo,
.three-dimensional-fixed-footer-demo *{
  box-sizing:border-box; /* paddingとborderを横幅や高さへ含める */
}

/* 固定フッターメニューを含む全体 */
.three-dimensional-fixed-footer-demo{
  position:relative; /* フッターメニューの配置基準にする */
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:900px; /* 最大横幅。値を大きくすると全体が横に広がる */
  height:620px; /* 表示エリアの高さ。値を大きくすると縦に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  border:1px solid #e5e7eb; /* 全体を囲む枠線 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  overflow:hidden; /* 枠からはみ出した内容を非表示 */
  background:#ffffff; /* 全体の背景色 */
  font-family:sans-serif; /* 使用するフォント */
}

/* スクロールするコンテンツエリア */
.three-dimensional-fixed-footer-content{
  height:100%; /* 親要素の高さ全体を使用 */
  padding:32px 24px 116px; /* 上32px・左右24px・下116px。下側は固定メニューと内容が重ならないための余白 */
  overflow-y:auto; /* 縦方向へスクロールできるようにする */
}

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

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

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

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

/* コンテンツカードの本文 */
.three-dimensional-fixed-footer-card p{
  margin:0; /* ブラウザ標準の余白を削除 */
  color:#4b5563; /* 本文の文字色 */
  line-height:1.8; /* 本文の行間 */
}

/* 立体的な固定フッターメニュー */
.three-dimensional-fixed-footer-menu{
  position:absolute; /* デモエリア下部へ固定 */
  right:0; /* 右端へ配置 */
  bottom:0; /* 下端へ配置 */
  left:0; /* 左端へ配置 */
  display:flex; /* メニュー項目を横並びにする */
  align-items:center; /* 縦方向中央へ配置 */
  justify-content:space-around; /* メニュー項目を均等に配置 */
  min-height:82px; /* メニューの最小高さ。値を大きくすると高くなる */
  padding:10px 12px; /* 上下10px・左右12pxの内側余白 */
  border:1px solid #dbeafe; /* メニュー周囲の枠線 */
  border-bottom:10px solid #94a3b8; /* 下側に10pxの厚みを付けて立体感を表現 */
  border-radius:18px; /* メニュー全体の角丸。値を大きくすると丸みが強くなる */
  background:
    linear-gradient(
      to bottom,
      #ffffff 0%,
      #f8fafc 100%
    ); /* 上から下へ薄く色を変えて立体感を付ける */
  box-shadow:
    0 12px 22px rgba(15,23,42,.18),
    0 4px 8px rgba(15,23,42,.10); /* メニュー下側へ影を付けて浮き上がって見せる */
}

/* フッターメニューの各項目 */
.three-dimensional-fixed-footer-menu_item{
  display:flex; /* アイコンと文字を配置 */
  flex:1; /* 各項目を均等な横幅にする */
  flex-direction:column; /* アイコンと文字を縦並びにする */
  align-items:center; /* 横方向中央へ配置 */
  justify-content:center; /* 縦方向中央へ配置 */
  gap:6px; /* アイコンと文字の間隔。値を大きくすると間隔が広がる */
  min-width:0; /* 狭い画面でも項目が縮小できるようにする */
  padding:9px 6px; /* 上下9px・左右6pxの内側余白 */
  border:1px solid transparent; /* ホバー時の枠線用スペースを確保 */
  border-radius:12px; /* 各項目の角丸 */
  color:#4b5563; /* 通常時のアイコンと文字の色 */
  font-size:12px; /* メニュー文字のサイズ */
  font-weight:700; /* メニュー文字を太字にする */
  text-decoration:none; /* リンクの下線を削除 */
  transition:
    transform .2s ease,
    color .2s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease; /* 0.2秒でホバー時の表示を滑らかに切り替える */
}

/* フッターメニューへカーソルを合わせた状態 */
.three-dimensional-fixed-footer-menu_item:hover{
  transform:translateY(-5px); /* 5px上へ移動して浮き上がる動きを付ける */
  border-color:#bfdbfe; /* ホバー時の枠線色 */
  background:
    linear-gradient(
      to bottom,
      #ffffff 0%,
      #eff6ff 100%
    ); /* ホバー時の背景へグラデーションを付ける */
  color:#2563eb; /* ホバー時のアイコンと文字の色 */
  box-shadow:
    0 5px 0 #bfdbfe,
    0 10px 14px rgba(37,99,235,.16); /* 下側の厚みと影で項目を立体的に見せる */
}

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

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

  /* スクロールするコンテンツエリア */
  .three-dimensional-fixed-footer-content{
    padding:24px 20px 116px; /* スマートフォンでは左右の余白を小さくする */
  }

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

  /* 固定フッターメニュー */
  .three-dimensional-fixed-footer-menu{
    right:10px; /* 右端から10px空ける */
    bottom:10px; /* 下端から10px空ける */
    left:10px; /* 左端から10px空ける */
    min-height:76px; /* スマートフォンでの最小高さ */
    padding:8px 6px; /* スマートフォンでは内側余白を小さくする */
  }

  /* フッターメニューの各項目 */
  .three-dimensional-fixed-footer-menu_item{
    padding:8px 3px; /* スマートフォンでは項目の余白を小さくする */
    font-size:11px; /* スマートフォンでは文字を小さくする */
  }

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

}

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

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではスクロールできるコンテンツエリアと、「ホーム」「検索」「お気に入り」「マイページ」の4項目を持つ固定フッターメニューを作成します。CSSではフッターメニューをデモ画面の下部へ固定し、グラデーション、下側の厚み、外側の影を組み合わせて立体的なデザインにしています。

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

各ファイルの役割
index.htmlは固定フッターメニューを含むページ全体を構成するファイルです。「立体的な固定フッターメニュー」のタイトル、説明文、各コンテンツカードの文章、フッターメニューの「ホーム」「検索」「お気に入り」「マイページ」の文字やリンク先を変更できます。各メニュー項目にはSVGアイコンを直接記述しています。

style.cssは全体のレイアウトと固定フッターメニューの立体デザインを設定するファイルです。デモエリアの横幅と高さ、スクロール領域、フッターメニューの高さ、余白、背景色、角丸、厚み、影などを変更できます。特にborder-bottom:10px solid #94a3b8;でフッターメニュー下側の厚みを作り、box-shadowで外側へ影を付けることで、メニュー本体が手前へ浮いて見える立体感を表現しています。各メニュー項目も、ホバー時に上へ移動して厚みと影が強くなるよう設定しています。

設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、2つのファイルを同じ階層へ保存します。そのあとsample/index.htmlをブラウザで開いてください。コンテンツエリアを上下へスクロールしても、フッターメニューはデモ画面の下部へ固定されたまま表示されます。各メニュー項目へマウスカーソルを合わせると、その項目が上方向へ浮き上がります。

カスタマイズできる内容
index.htmlではタイトル、説明文、各コンテンツカードの文章、フッターメニューの項目名、リンク先、SVGアイコンを変更できます。項目の表示内容を変更したい場合は、それぞれのa要素内にあるspanとsvgを編集します。

style.cssではデモエリアの最大横幅と高さ、コンテンツエリアの余白、フッターメニューの高さ、背景色、枠線、角丸、下側の厚み、外側の影を調整できます。フッターメニュー本体の立体感は、主にborder-bottom、linear-gradient()、box-shadowで作っています。各メニュー項目では、transformとbox-shadowを変更すると、ホバーしたときの浮き上がり量や立体感を調整できます。

数値調整
style.css

max-width:900px;
デモエリア全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

height:620px;
デモエリアの高さです。値を大きくすると表示できる縦方向の範囲が広がり、小さくすると狭くなります。

padding:32px 24px 116px;
スクロールするコンテンツエリアの内側余白です。上32px、左右24px、下116pxを指定しています。下側の116pxは、最後のコンテンツが固定フッターメニューへ隠れにくくするための余白です。

border-radius:18px;
デモエリアとフッターメニューの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

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

padding:10px 12px;
固定フッターメニューの内側余白です。10pxが上下、12pxが左右の余白です。値を大きくするとメニュー項目と外枠との間隔が広がります。

border-bottom:10px solid #94a3b8;
固定フッターメニュー下側の厚みを作る設定です。10pxを大きくするとグレー部分が厚くなり、メニュー本体の立体感が強くなります。値を小さくすると厚みが薄くなり、フラットな見た目へ近づきます。#94a3b8を変更すると厚み部分の色を変更できます。

box-shadow:0 12px 22px rgba(15,23,42,.18), 0 4px 8px rgba(15,23,42,.10);
フッターメニュー本体の外側へ付ける影です。12pxや4pxを変更すると影の位置が変わり、22pxや8pxを変更するとぼかし具合が変わります。影を大きくすると背景から浮いている印象が強くなります。

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

padding:9px 6px;
各メニュー項目の内側余白です。9pxが上下、6pxが左右です。値を大きくすると各項目の表示領域が広がります。

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

transform:translateY(-5px);
メニュー項目へマウスカーソルを合わせたときの浮き上がり量です。現在は5px上へ移動します。負の値の絶対値を大きくすると、より大きく上へ浮き上がります。

box-shadow:0 5px 0 #bfdbfe, 0 10px 14px rgba(37,99,235,.16);
ホバー時のメニュー項目に付ける厚みと影です。最初の5pxを大きくすると項目下側の厚みが増し、10pxや14pxを大きくすると外側の影が広がります。

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

transition:.2s;
ホバー時の移動、色、背景、枠線、影が切り替わる時間です。0.2秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。

立体感を強くする場合
フッターメニュー本体のborder-bottom:10pxにある10pxを大きくすると、下側のグレー部分が厚くなります。さらにbox-shadowの位置やぼかしを大きくすると、背景からより浮いているように見せられます。ホバー時の各メニュー項目についても、translateY(-5px)や0 5px 0 #bfdbfeの値を大きくすることで浮き上がりを強調できます。

立体感を弱くする場合
border-bottomの10pxを小さくし、外側のbox-shadowを弱くするとメニュー本体の厚みが控えめになります。グラデーションの上下の色差を小さくすると、さらにフラットなデザインへ近づきます。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssではデモ全体にwidth:100%とmax-width:900pxを指定し、画面幅に合わせて横幅が縮小されます。画面幅640px以下ではコンテンツエリアをpadding:24px 20px 116px;へ変更し、タイトルをfont-size:24px;へ小さくしています。

また、640px以下では固定フッターメニューをright:10px;、bottom:10px;、left:10px;として画面内側へ10pxずつ離し、min-height:76px;へ変更しています。各メニュー項目の文字サイズを11px、アイコンを22pxへ小さくしているため、スマートフォン・タブレット・PCで利用できます。