中央に大きなボタンがある固定フッターメニューを作る方法【HTML/CSS・サンプルコード付き】

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

中央に大きなボタンがある固定フッターメニューを作る方法

Webサイトやスマートフォン向けのページでは、よく使う機能を画面下部の固定フッターメニューから操作できるようにすると、ページをスクロールしたあとでも目的のメニューへアクセスしやすくなります。

このサンプルでは、ホーム・通知・検索・お気に入り・マイページの5つの項目を配置し、中央の検索ボタンだけを大きな円形ボタンとして表示します。中央のボタンをフッターメニューより上へ少し浮かせることで、ほかのメニューと区別しながら目立たせるレイアウトになっています。

HTMLとCSSだけで作成でき、JavaScriptは使用しません。検索や投稿など、特に目立たせたい操作を中央へ配置した固定ナビゲーションを作りたい場合に利用できます。画面幅が狭い環境ではボタンやアイコンのサイズを調整するレスポンシブ対応も行っています。

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

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

デモ

中央の検索ボタンだけサイズを大きくし、margin-topで上へ浮かせています。

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

<!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="large-center-button-footer-menu_header">

    <!-- タイトル -->
    <div class="large-center-button-footer-menu_title">
      中央ボタン付きメニュー
    </div>

    <!-- 説明文 -->
    <p class="large-center-button-footer-menu_description">
      中央の検索ボタンだけを大きくして、目立つ位置へ配置します。
    </p>

  </header>

  <!-- メインコンテンツ -->
  <main class="large-center-button-footer-menu_main">

    <!-- 中央ボタンの説明 -->
    <div class="large-center-button-footer-menu_card">
      <div class="large-center-button-footer-menu_heading">
        中央ボタン
      </div>
      <p class="large-center-button-footer-menu_text">
        フッターメニューの中央に、大きな検索ボタンを配置しています。
      </p>
    </div>

    <!-- 固定表示の説明 -->
    <div class="large-center-button-footer-menu_card">
      <div class="large-center-button-footer-menu_heading">
        固定表示
      </div>
      <p class="large-center-button-footer-menu_text">
        画面をスクロールしても、メニューは下部に固定表示されます。
      </p>
    </div>

    <!-- 配置の説明 -->
    <div class="large-center-button-footer-menu_card">
      <div class="large-center-button-footer-menu_heading">
        使いやすい配置
      </div>
      <p class="large-center-button-footer-menu_text">
        よく使う検索ボタンを中央に置くことで、操作しやすいメニューになります。
      </p>
    </div>

  </main>

  <!-- 画面下部へ固定するフッターメニュー -->
  <nav class="large-center-button-footer-menu_nav" aria-label="固定フッターメニュー">

    <!-- ホーム -->
    <a href="#" class="large-center-button-footer-menu_item">
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M3 10L12 3L21 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        <path d="M6 10V20H18V10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <span class="large-center-button-footer-menu_label">ホーム</span>
    </a>

    <!-- 通知 -->
    <a href="#" class="large-center-button-footer-menu_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" stroke-linejoin="round"></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="large-center-button-footer-menu_label">通知</span>
    </a>

    <!-- 中央の大きな検索ボタン -->
    <div class="large-center-button-footer-menu_center-wrap">
      <span class="large-center-button-footer-menu_center">
        <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 class="large-center-button-footer-menu_label">検索</span>
    </div>

    <!-- お気に入り -->
    <a href="#" class="large-center-button-footer-menu_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" stroke-linejoin="round"></path>
      </svg>
      <span class="large-center-button-footer-menu_label">お気に入り</span>
    </a>

    <!-- マイページ -->
    <a href="#" class="large-center-button-footer-menu_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" stroke-linecap="round"></path>
      </svg>
      <span class="large-center-button-footer-menu_label">マイページ</span>
    </a>

  </nav>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding-bottom:76px; /* 固定フッター分の下余白。76pxを大きくすると本文下部の余白が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

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

/* タイトル */
.large-center-button-footer-menu_title{
  margin:0; /* タイトル外側の余白を削除 */
  color:#111827; /* タイトルの文字色 */
  font-size:28px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.4; /* タイトルの行間。値を大きくすると行間が広がる */
}

/* 説明文 */
.large-center-button-footer-menu_description{
  margin:8px 0 0; /* タイトルとの間隔。8pxを大きくすると間隔が広がる */
  color:#111827; /* 説明文の文字色 */
  font-size:13px; /* 説明文の文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.6; /* 説明文の行間。値を大きくすると行間が広がる */
}

/* メインコンテンツ */
.large-center-button-footer-menu_main{
  min-height:900px; /* コンテンツ領域の最低高さ。値を大きくするとページが縦に長くなる */
  padding:28px 24px 120px; /* 上28px・左右24px・下120px。値を大きくすると内側余白が広がる */
  background:#f8fafc; /* メインコンテンツの背景色 */
}

/* 説明カード */
.large-center-button-footer-menu_card{
  margin-bottom:28px; /* カード同士の間隔。値を大きくすると縦方向の間隔が広がる */
}

/* 最後の説明カード */
.large-center-button-footer-menu_card:last-child{
  margin-bottom:0; /* 最後のカード下側の余白を削除 */
}

/* カード見出し */
.large-center-button-footer-menu_heading{
  margin:0 0 8px; /* 本文との間隔。8pxを大きくすると間隔が広がる */
  color:#111827; /* 見出しの文字色 */
  font-size:20px; /* 見出しの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* 見出しを太字にする */
  line-height:1.4; /* 見出しの行間。値を大きくすると行間が広がる */
}

/* カード本文 */
.large-center-button-footer-menu_text{
  margin:0; /* 本文外側の余白を削除 */
  color:#4b5563; /* 本文の文字色 */
  font-size:14px; /* 本文の文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.8; /* 本文の行間。値を大きくすると行間が広がる */
}

/* 固定フッターメニュー */
.large-center-button-footer-menu_nav{
  position:fixed; /* 画面下部へ固定 */
  left:0; /* 画面左端へ配置 */
  bottom:0; /* 画面下端へ配置 */
  z-index:1000; /* 重なり順。値を大きくすると前面へ表示されやすくなる */
  width:100%; /* 画面の横幅いっぱいに表示 */
  height:76px; /* フッターの高さ。値を大きくすると高くなる */
  display:grid; /* 5つのメニューを横方向へ配置 */
  grid-template-columns:1fr 1fr 110px 1fr 1fr; /* 中央列の110pxを大きくすると中央部分が広くなる */
  align-items:end; /* メニュー項目を下側へ揃える */
  padding:10px 0; /* 上下10pxの内側余白。値を大きくするとフッター内の余白が広がる */
  border-top:1px solid #d1d5db; /* フッター上部の枠線。1pxを大きくすると線が太くなる */
  background:#ffffff; /* フッターの背景色 */
  box-sizing:border-box; /* paddingとborderを高さへ含める */
}

/* 通常のメニュー項目 */
.large-center-button-footer-menu_item,
.large-center-button-footer-menu_item:link,
.large-center-button-footer-menu_item:visited,
.large-center-button-footer-menu_item:hover,
.large-center-button-footer-menu_item:focus,
.large-center-button-footer-menu_item:active{
  display:flex; /* アイコンと文字をまとめて配置 */
  flex-direction:column; /* アイコンと文字を縦方向へ配置 */
  align-items:center; /* 横方向の中央へ配置 */
  justify-content:flex-end; /* フッター下側へ揃える */
  gap:6px; /* アイコンと文字の間隔。値を大きくすると間隔が広がる */
  min-width:0; /* Grid内で横幅がはみ出さないようにする */
  height:100%; /* フッターの高さに合わせる */
  padding:0; /* メニュー項目の内側余白を削除 */
  color:#2563eb; /* アイコンと文字の色 */
  background:transparent; /* メニュー項目の背景を透明にする */
  text-decoration:none; /* リンクの下線を削除 */
  font-size:12px; /* メニュー文字のサイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* メニュー文字を太字にする */
  line-height:1.2; /* メニュー文字の行間。値を大きくすると行間が広がる */
  box-shadow:none; /* テーマなどのリンク影を無効にする */
  box-sizing:border-box; /* paddingとborderをサイズへ含める */
}

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

/* 中央ボタンを配置する領域 */
.large-center-button-footer-menu_center-wrap{
  display:flex; /* 中央ボタンと文字をまとめて配置 */
  flex-direction:column; /* 中央ボタンと文字を縦方向へ配置 */
  align-items:center; /* 横方向の中央へ配置 */
  justify-content:flex-end; /* フッター下側へ揃える */
  gap:8px; /* ボタンと文字の間隔。値を大きくすると間隔が広がる */
  height:100%; /* フッターの高さに合わせる */
  color:#2563eb; /* 「検索」の文字色 */
  font-size:12px; /* 「検索」の文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* 「検索」の文字を太字にする */
  line-height:1.2; /* 「検索」の行間。値を大きくすると行間が広がる */
}

/* 中央の大きな検索ボタン */
.large-center-button-footer-menu_center{
  width:76px; /* ボタンの横幅。値を大きくすると円形ボタンが大きくなる */
  height:76px; /* ボタンの高さ。横幅と同じ値にすると真円になる */
  margin-top:-48px; /* 上方向への移動量。マイナス値を大きくするとさらに上へ浮き出す */
  border:6px solid #ffffff; /* ボタン周囲の白い枠。6pxを大きくすると枠が太くなる */
  border-radius:999px; /* 円形にする角丸。十分大きな値を指定して真円にする */
  background:#2563eb; /* 中央ボタンの背景色 */
  color:#ffffff; /* 検索アイコンの色 */
  display:flex; /* アイコンを中央へ配置 */
  align-items:center; /* アイコンを上下中央へ配置 */
  justify-content:center; /* アイコンを左右中央へ配置 */
  box-shadow:0 10px 22px rgba(15,23,42,0.18); /* 10pxは影の縦位置、22pxはぼかし量。大きくすると影が下方向・外側へ広がる */
  box-sizing:border-box; /* borderをボタンサイズへ含める */
}

/* 中央ボタンの検索アイコン */
.large-center-button-footer-menu_center svg{
  width:34px; /* 検索アイコンの横幅。値を大きくするとアイコンが大きくなる */
  height:34px; /* 検索アイコンの高さ。値を大きくするとアイコンが大きくなる */
}

/* メニューの文字 */
.large-center-button-footer-menu_label{
  white-space:nowrap; /* メニュー名を途中で改行しない */
}

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

  /* ページ全体 */
  body{
    padding-bottom:68px; /* スマートフォン用フッターの高さに合わせて下余白を68pxにする */
  }

  /* タイトル */
  .large-center-button-footer-menu_title{
    font-size:24px; /* スマートフォンではタイトルを24pxへ小さくする */
  }

  /* メインコンテンツ */
  .large-center-button-footer-menu_main{
    padding:24px 18px 110px; /* 上24px・左右18px・下110pxへ変更して狭い画面の余白を調整する */
  }

  /* 固定フッターメニュー */
  .large-center-button-footer-menu_nav{
    grid-template-columns:1fr 1fr 86px 1fr 1fr; /* 中央列を86pxへ縮めてスマートフォン幅に合わせる */
    height:68px; /* フッターの高さを68pxへ縮める */
    padding:8px 0; /* 上下の内側余白を8pxへ縮める */
  }

  /* 通常のメニュー項目 */
  .large-center-button-footer-menu_item,
  .large-center-button-footer-menu_item:link,
  .large-center-button-footer-menu_item:visited,
  .large-center-button-footer-menu_item:hover,
  .large-center-button-footer-menu_item:focus,
  .large-center-button-footer-menu_item:active{
    gap:4px; /* アイコンと文字の間隔を4pxへ縮める */
    font-size:11px; /* メニュー文字を11pxへ小さくする */
  }

  /* 通常メニューのアイコン */
  .large-center-button-footer-menu_item svg{
    width:22px; /* アイコンの横幅を22pxへ縮める */
    height:22px; /* アイコンの高さを22pxへ縮める */
  }

  /* 中央ボタンを配置する領域 */
  .large-center-button-footer-menu_center-wrap{
    gap:6px; /* 中央ボタンと文字の間隔を6pxへ縮める */
    font-size:11px; /* 「検索」の文字を11pxへ小さくする */
  }

  /* 中央の大きな検索ボタン */
  .large-center-button-footer-menu_center{
    width:64px; /* 中央ボタンの横幅を64pxへ縮める */
    height:64px; /* 中央ボタンの高さを64pxへ縮める */
    margin-top:-40px; /* スマートフォンでは中央ボタンを40px上へ浮かせる */
    border-width:5px; /* ボタン周囲の白い枠を5pxへ細くする */
  }

  /* 中央ボタンの検索アイコン */
  .large-center-button-footer-menu_center svg{
    width:28px; /* 検索アイコンの横幅を28pxへ縮める */
    height:28px; /* 検索アイコンの高さを28pxへ縮める */
  }

}

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

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

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

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

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではホーム・通知・検索・お気に入り・マイページの5項目を配置し、CSSでは固定フッターメニューを画面下部へ固定します。中央の検索ボタンだけを大きな円形にして上方向へ浮かせ、ほかの4項目より目立つレイアウトにしています。

フッターメニュー自体は画面幅いっぱいのwidth:100%で表示されます。5つの項目はCSS Gridで横一列に並べ、中央列だけ幅を広く確保しています。JavaScriptや外部ライブラリは使用しないため、index.htmlとstyle.cssを同じ階層へ配置するだけで利用できます。

画面幅640px以下ではフッターの高さ、中央列、円形ボタン、アイコン、文字サイズを小さくするレスポンシブ対応を行っています。PCだけでなく、スマートフォンやタブレットでも固定フッターメニューとして利用できます。

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

各ファイルの役割
index.htmlはページと固定フッターメニューのHTMLを構成するファイルです。「ホーム」「通知」「検索」「お気に入り」「マイページ」の表示名や各リンク先を変更できます。中央の検索項目は、通常の4項目とは別の要素にして大きな円形ボタンとして表示しています。

style.cssは固定フッターメニュー全体のレイアウトとデザインを設定するファイルです。フッターの高さ、5列の幅、中央ボタンのサイズと位置、アイコンや文字のサイズ、背景色、枠線、影、スマートフォン表示を変更できます。

設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを同じ階層で配置してください。index.htmlからstyle.cssを読み込む構成になっているため、配置後にsample/index.htmlをブラウザで開くと固定フッターメニューを確認できます。

通常のメニュー項目にはhref="#"を指定しています。実際のWebサイトで使用するときは、それぞれのhrefを移動先のURLへ変更してください。中央の検索部分は表示用の要素として作成しているため、このサンプルには検索処理やクリック処理は含まれていません。

カスタマイズできる内容
index.htmlでは、ページ上部のタイトルと説明文、メインコンテンツ、フッターメニューの表示名、通常メニュー4項目のリンク先、SVGアイコンを変更できます。中央の「検索」も表示名やSVGアイコンを変更できます。

style.cssでは、フッターメニューの高さや背景色、上部の枠線、中央列の幅、メニュー文字とアイコンのサイズ、中央ボタンの大きさ、背景色、枠線、影、上へ浮かせる位置などを調整できます。

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

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

grid-template-columns:1fr 1fr 110px 1fr 1fr;
5つのメニュー項目の横幅を設定しています。中央の110pxを大きくすると検索ボタン部分の横幅が広がり、小さくすると狭くなります。

padding:10px 0;
固定フッターメニューの上下の内側余白です。10pxを大きくすると上下の余白が広がります。

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

font-size:12px;
通常メニューと中央の「検索」に使用する文字サイズです。値を大きくすると文字が大きくなります。

width:24px;・height:24px;
通常メニューで使用するSVGアイコンの大きさです。2つの値を同じように変更するとアイコンの縦横比を保ちながらサイズを調整できます。

width:76px;・height:76px;
中央に配置する円形検索ボタンの大きさです。2つを同じ値にすると円形を維持したままサイズを変更できます。

margin-top:-48px;
中央ボタンを上方向へ浮かせる位置です。マイナス値を大きくするとボタンがさらに上へ移動し、0へ近づけるとフッター内へ下がります。

border:6px solid #ffffff;
中央ボタンの周囲に表示する白い枠線です。6pxを大きくすると枠線が太くなり、小さくすると細くなります。

border-radius:999px;
中央ボタンを円形にするための角丸です。ボタンの横幅と高さに対して十分大きな値を指定することで円形にしています。

box-shadow:0 10px 22px rgba(15,23,42,0.18);
中央ボタンの影です。10pxを変更すると影の縦方向の位置が変わり、22pxを変更すると影のぼかし範囲が変わります。

width:34px;・height:34px;
中央ボタン内の検索アイコンの大きさです。値を大きくすると検索アイコンが大きくなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%によって固定フッターメニューを画面幅いっぱいに表示し、@media (max-width:640px)でスマートフォン向けのサイズへ切り替えています。

640px以下ではフッターの高さを68px、中央列を86px、通常アイコンを22px、メニュー文字を11pxへ変更します。中央ボタンは64px、検索アイコンは28pxへ縮小し、中央ボタンの上方向への位置もmargin-top:-40pxへ調整しています。スマートフォン・タブレット・PCで画面幅に合わせて利用できます。