検索フォームを表示する固定フッターメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】

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

検索フォームを表示する固定フッターメニューの作り方

検索フォームを表示する固定フッターメニューの作り方を紹介します。このサンプルでは、画面下部に固定したフッターメニューの「検索」をクリックすると、フッターの上側に検索フォームを表示します。普段は検索フォームを隠しておき、必要なときだけ表示できるため、固定フッター周辺をすっきりした状態に保ちながら検索機能を配置できます。

固定フッターメニューには「ホーム」「検索」「お気に入り」「通知」「マイページ」の5項目を配置します。JavaScriptで検索ボタンのクリックを判定し、検索フォームへクラスを追加・削除して表示と非表示を切り替えます。同じ検索ボタンをもう一度クリックするとフォームを閉じることができ、検索フォームを表示している間は検索ボタンの色も切り替わります。

ECサイトの商品検索、会員サイトの記事検索、管理画面のデータ検索など、固定ナビゲーションからすぐに検索できる画面に利用できます。HTMLではメニュー名、リンク先、検索フォームのプレースホルダーなどを変更でき、CSSでは固定フッターの高さ、検索フォームの横幅、余白、角丸、色などを調整できます。固定フッターは画面幅いっぱいに表示し、スマートフォン・タブレット・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>

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

    <!-- タイトル -->
    <div class="footer-menu-search_title">
      検索フォーム
    </div>

    <!-- 説明文 -->
    <p class="footer-menu-search_description">
      フッターメニューの検索ボタンから検索フォームを表示できます。
    </p>

  </header>

  <!-- メインコンテンツ -->
  <main class="footer-menu-search_main">

    <!-- 説明ブロック -->
    <div class="footer-menu-search_card">

      <!-- 見出し -->
      <div class="footer-menu-search_heading">
        検索ボタンをクリック
      </div>

      <!-- 本文 -->
      <p class="footer-menu-search_text">
        画面下部にある「検索」をクリックすると、固定フッターの上側に検索フォームを表示します。
      </p>

    </div>

    <!-- 説明ブロック -->
    <div class="footer-menu-search_card">

      <!-- 見出し -->
      <div class="footer-menu-search_heading">
        もう一度クリックして閉じる
      </div>

      <!-- 本文 -->
      <p class="footer-menu-search_text">
        検索フォームを表示した状態でもう一度「検索」をクリックすると非表示になります。
      </p>

    </div>

  </main>

  <!-- 検索フォームパネル -->
  <div class="footer-menu-search_panel">

    <!-- 検索フォーム -->
    <form class="footer-menu-search_form">

      <!-- 検索キーワード入力欄 -->
      <input
        class="footer-menu-search_input"
        type="search"
        placeholder="キーワードを入力"
        aria-label="検索キーワード">

      <!-- 検索ボタン -->
      <button class="footer-menu-search_submit" type="submit">
        検索
      </button>

    </form>

  </div>

  <!-- 画面下部へ固定するフッターメニュー -->
  <nav class="footer-menu-search_nav">

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

    <!-- 検索フォームを開閉するボタン -->
    <button type="button" class="footer-menu-search_button" aria-expanded="false">
      <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 class="footer-menu-search_label">検索</span>
    </button>

    <!-- お気に入り -->
    <a href="#" class="footer-menu-search_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="footer-menu-search_label">お気に入り</span>
    </a>

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

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

  </nav>

  <!-- JavaScriptファイル -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding-bottom:76px; /* 固定フッターの高さ分を確保。フッターの高さを変更するときは同じ値を調整 */
  background:#f8fafc; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

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

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

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

/* メインコンテンツ */
.footer-menu-search_main{
  min-height:900px; /* メイン部分の最低高さ。値を大きくするとページが縦に長くなる */
  padding:28px 24px 100px; /* 上28px・左右24px・下100px。値を変更すると各方向の余白が変わる */
}

/* 説明ブロック */
.footer-menu-search_card{
  margin:0 0 28px; /* 下側の間隔。28pxを大きくするとブロック同士が離れる */
}

/* 最後の説明ブロック */
.footer-menu-search_card:last-child{
  margin-bottom:0; /* 最後のブロックには下側余白を付けない */
}

/* 説明ブロックの見出し */
.footer-menu-search_heading{
  margin:0 0 8px; /* 本文との間隔。8pxを大きくすると間隔が広がる */
  color:#111827; /* 見出しの文字色 */
  font-size:20px; /* 見出しの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* 見出しを太字にする */
  line-height:1.4; /* 見出しの行間。値を大きくすると行間が広がる */
}

/* 説明ブロックの本文 */
.footer-menu-search_text{
  margin:0; /* 本文の外側余白を削除 */
  color:#4b5563; /* 本文の文字色 */
  font-size:14px; /* 本文の文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.8; /* 本文の行間。値を大きくすると行間が広がる */
}

/* 検索フォームパネル */
.footer-menu-search_panel{
  position:fixed; /* 画面下部の固定フッターを基準に表示 */
  right:16px; /* 画面右端との間隔。値を大きくすると右側の余白が広がる */
  bottom:76px; /* 固定フッターの上へ配置。フッター高さを変更するときは合わせて調整 */
  left:16px; /* 画面左端との間隔。値を大きくすると左側の余白が広がる */
  z-index:999; /* 固定フッターの直下の重なり順 */
  padding:14px; /* パネル内側の余白。値を大きくすると余白が広がる */
  border:1px solid #d1d5db; /* パネルの枠線。1pxを大きくすると線が太くなる */
  border-radius:16px; /* パネルの角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* パネルの背景色 */
  box-shadow:0 10px 24px rgba(0,0,0,.15); /* 下方向10px・ぼかし24pxの影。値を大きくすると影が広がる */
  opacity:0; /* 初期状態では透明にする */
  visibility:hidden; /* 初期状態では操作できないように隠す */
  transform:translateY(8px); /* 初期状態では8px下へ配置。値を大きくすると表示時の移動量が増える */
  transition:
    opacity .25s ease,
    visibility .25s ease,
    transform .25s ease;
  /*
    0.25秒で表示状態を切り替える。
    値を大きくするとゆっくり、小さくすると速く変化する。
  */
}

/* 検索フォームを表示した状態 */
.footer-menu-search_panel.is-open{
  opacity:1; /* パネルを表示 */
  visibility:visible; /* パネルを操作可能にする */
  transform:translateY(0); /* 本来の位置へ戻して表示 */
}

/* 検索フォーム */
.footer-menu-search_form{
  display:flex; /* 入力欄と検索ボタンを横並びにする */
  gap:8px; /* 入力欄とボタンの間隔。値を大きくすると間隔が広がる */
}

/* 検索入力欄 */
.footer-menu-search_input{
  flex:1; /* 残っている横幅を入力欄へ割り当てる */
  min-width:0; /* 狭い画面でも親要素内へ収める */
  padding:12px; /* 入力欄の内側余白。値を大きくすると入力欄が大きくなる */
  border:1px solid #d1d5db; /* 入力欄の枠線。1pxを大きくすると線が太くなる */
  border-radius:10px; /* 入力欄の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 入力欄の背景色 */
  color:#111827; /* 入力文字の色 */
  font:inherit; /* ページ全体と同じフォントを使用 */
  font-size:14px; /* 入力文字のサイズ。値を大きくすると文字が大きくなる */
  outline:none; /* ブラウザ標準の外枠を非表示 */
}

/* 入力欄のフォーカス時 */
.footer-menu-search_input:focus{
  border-color:#2563eb; /* フォーカス時の枠線色 */
  box-shadow:0 0 0 3px rgba(37,99,235,.12); /* 3px分の強調表示。値を大きくすると外側へ広がる */
}

/* 検索実行ボタン */
.footer-menu-search_submit{
  padding:0 18px; /* 左右18pxの余白。値を大きくするとボタンが横に広がる */
  border:0; /* ボタンの標準枠線を削除 */
  border-radius:10px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-family:inherit; /* ページ全体と同じフォントを使用 */
  font-size:14px; /* ボタンの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* ボタンの文字を太字にする */
  cursor:pointer; /* マウスを重ねたときにポインターを表示 */
}

/* 固定フッターメニュー */
.footer-menu-search_nav{
  position:fixed; /* ページをスクロールしても画面下部へ固定 */
  right:0; /* 右端を画面右端へ合わせる */
  bottom:0; /* 下端を画面下端へ合わせる */
  left:0; /* 左端を画面左端へ合わせる */
  z-index:1000; /* 検索パネルより手前へ表示 */
  display:flex; /* 5項目を横一列に配置 */
  width:100%; /* 画面幅いっぱいに表示 */
  height:76px; /* 固定フッターの高さ。変更時はbodyと検索パネルも同じ基準で調整 */
  border-top:1px solid #d1d5db; /* 上側の境界線。1pxを大きくすると線が太くなる */
  background:#ffffff; /* 固定フッターの背景色 */
}

/* フッターのリンクと検索ボタン */
.footer-menu-search_item,
.footer-menu-search_item:link,
.footer-menu-search_item:visited,
.footer-menu-search_item:hover,
.footer-menu-search_item:focus,
.footer-menu-search_item:active,
.footer-menu-search_button{
  display:flex; /* アイコンと文字の配置にFlexboxを使用 */
  flex:1; /* 5項目を同じ横幅で配置 */
  flex-direction:column; /* アイコンと文字を縦に並べる */
  align-items:center; /* 横方向の中央へ配置 */
  justify-content:center; /* 縦方向の中央へ配置 */
  gap:6px; /* アイコンと文字の間隔。値を大きくすると間隔が広がる */
  min-width:0; /* 狭い画面でも均等配置を維持 */
  margin:0; /* 外側余白を削除 */
  padding:0; /* 内側余白を削除 */
  border:0; /* 標準の枠線を削除 */
  background:transparent; /* 背景を透明にする */
  color:#6b7280; /* 通常時のアイコンと文字の色 */
  font-family:inherit; /* ページ全体と同じフォントを使用 */
  font-size:12px; /* メニュー名の文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* メニュー名を太字にする */
  line-height:1.2; /* メニュー名の行間。値を大きくすると行間が広がる */
  text-decoration:none; /* リンクの下線を削除 */
  box-shadow:none; /* テーマなどによる影を削除 */
}

/* 検索フォーム開閉ボタン */
.footer-menu-search_button{
  cursor:pointer; /* クリックできることを示す */
}

/* 検索フォーム表示中のボタン */
.footer-menu-search_button.is-active{
  color:#2563eb; /* 表示中の検索ボタンを青色にする */
}

/* フッターのSVGアイコン */
.footer-menu-search_item svg,
.footer-menu-search_button svg{
  width:24px; /* アイコンの横幅。値を大きくするとアイコンが大きくなる */
  height:24px; /* アイコンの高さ。値を大きくするとアイコンが大きくなる */
}

/* メニュー名 */
.footer-menu-search_label{
  white-space:nowrap; /* メニュー名を途中で改行しない */
}

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

  /* ページタイトル */
  .footer-menu-search_title{
    font-size:24px; /* スマートフォンではタイトルを24pxへ縮小 */
  }

  /* メインコンテンツ */
  .footer-menu-search_main{
    padding:24px 18px 92px; /* 上24px・左右18px・下92pxへ変更 */
  }

  /* 検索フォームパネル */
  .footer-menu-search_panel{
    right:10px; /* 右側の余白を10pxへ縮小 */
    bottom:68px; /* 高さ68pxの固定フッターの上へ配置 */
    left:10px; /* 左側の余白を10pxへ縮小 */
    padding:10px; /* パネル内側の余白を10pxへ縮小 */
  }

  /* 固定フッター */
  .footer-menu-search_nav{
    height:68px; /* スマートフォンでは高さを68pxへ縮小 */
  }

  /* フッターのリンクと検索ボタン */
  .footer-menu-search_item,
  .footer-menu-search_item:link,
  .footer-menu-search_item:visited,
  .footer-menu-search_item:hover,
  .footer-menu-search_item:focus,
  .footer-menu-search_item:active,
  .footer-menu-search_button{
    gap:4px; /* アイコンと文字の間隔を4pxへ縮小 */
    font-size:11px; /* メニュー名を11pxへ縮小 */
  }

  /* SVGアイコン */
  .footer-menu-search_item svg,
  .footer-menu-search_button svg{
    width:22px; /* アイコンの横幅を22pxへ縮小 */
    height:22px; /* アイコンの高さを22pxへ縮小 */
  }

  /* 検索入力欄と検索ボタン */
  .footer-menu-search_input,
  .footer-menu-search_submit{
    font-size:13px; /* 検索フォーム内の文字を13pxへ縮小 */
  }

}

// 検索フォームを開閉するボタンを取得
const footerMenuSearchButton = document.querySelector('.footer-menu-search_button');

// 表示・非表示を切り替える検索フォームパネルを取得
const footerMenuSearchPanel = document.querySelector('.footer-menu-search_panel');

// 検索ボタンをクリックしたときの処理
footerMenuSearchButton.addEventListener('click', function(){

  // is-openクラスを追加・削除して検索フォームの表示状態を切り替える
  const isOpen = footerMenuSearchPanel.classList.toggle('is-open');

  // 検索フォーム表示中だけ検索ボタンを青色にする
  footerMenuSearchButton.classList.toggle('is-active', isOpen);

  // 検索フォームの開閉状態をaria-expandedへ反映する
  footerMenuSearchButton.setAttribute('aria-expanded', String(isOpen));

});

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

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

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLで固定フッターメニューと検索フォームを作成し、CSSで画面下部への固定、検索フォームの表示状態、色やサイズなどを設定します。JavaScriptでは固定フッターの「検索」をクリックしたときに、検索フォームの表示と非表示を切り替えます。

固定フッターメニューには「ホーム」「検索」「お気に入り」「通知」「マイページ」の5項目を配置しています。固定フッターは画面幅いっぱいに表示され、5項目を同じ横幅で並べます。検索フォームは通常時には非表示で、検索ボタンをクリックしたときだけ固定フッターの上側へ表示されます。

外部ライブラリや外部データは使用していません。HTML・CSS・バニラJavaScriptだけで動作するため、3ファイルを同じフォルダへ配置してブラウザでindex.htmlを開くと動作を確認できます。

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

各ファイルの役割
index.htmlは固定フッターメニューと検索フォームを構成するファイルです。メニュー名、リンク先、SVGアイコン、検索入力欄のプレースホルダーなどを変更できます。

style.cssはページ全体、検索フォーム、固定フッターメニューのデザインを設定するファイルです。固定フッターの高さ、検索フォームの位置や余白、角丸、影、入力欄やボタンのサイズ、文字色、背景色などを変更できます。

script.jsは検索フォームの表示と非表示を切り替えるファイルです。「検索」をクリックするとis-openクラスを追加・削除し、検索フォームの表示状態を切り替えます。同時に検索ボタンのis-activeクラスとaria-expandedも切り替えます。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置してください。index.htmlからstyle.cssとscript.jsを読み込む構成になっているため、sample/index.htmlをブラウザで開くとそのまま動作を確認できます。

画面下部の「検索」をクリックすると、固定フッターメニューの上側に検索フォームが表示されます。表示した状態でもう一度「検索」をクリックすると検索フォームが閉じます。検索フォームを表示している間は、固定フッターの検索ボタンが青色になります。

実際のWebサイトで使用するときは、index.htmlにある各リンクのhref="#"を移動先のURLへ変更してください。検索フォームの送信先や検索処理はこのサンプルでは指定していないため、利用するサイトの検索仕様に合わせて設定してください。

カスタマイズできる内容
index.htmlでは「ホーム」「検索」「お気に入り」「通知」「マイページ」のメニュー名、各リンク先、SVGアイコン、検索フォームのプレースホルダー、検索ボタンの文字を変更できます。

style.cssでは固定フッターの高さ、検索フォームの表示位置、左右の余白、内側余白、角丸、影、入力欄と検索ボタンの間隔、文字サイズ、アイコンサイズ、通常時と選択時の色などを変更できます。script.jsでは検索ボタンをクリックしたときの表示・非表示処理を行っています。

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

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

right:16px;・left:16px;
検索フォームパネルと画面左右との間隔です。値を大きくすると検索フォームが狭くなり、小さくすると画面端まで広がります。

bottom:76px;
検索フォームパネルを画面下端から76px上へ配置します。固定フッターの高さと同じ値にすることで、検索フォームをフッターの上側へ表示しています。

padding:14px;
検索フォームパネルの内側余白です。値を大きくするとフォームとパネル外周との間隔が広がります。

border-radius:16px;
検索フォームパネルの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

box-shadow:0 10px 24px ...
検索フォームパネルの影です。10pxは下方向の位置、24pxはぼかしの大きさです。値を大きくすると影の位置や広がりが大きくなります。

transform:translateY(8px);
非表示時の検索フォームを8px下へ移動します。値を大きくすると表示・非表示を切り替えたときの移動量が大きくなります。

transition:0.25s
検索フォームの表示状態が切り替わる時間です。0.25秒で変化し、値を大きくするとゆっくり、小さくすると速くなります。

gap:8px;
検索入力欄と検索ボタンの間隔です。値を大きくすると両方の間隔が広がります。

padding:12px;
検索入力欄の内側余白です。値を大きくすると入力欄の内側が広くなります。

border-radius:10px;
検索入力欄と検索ボタンの角丸です。値を大きくすると丸みが強くなります。

padding:0 18px;
検索ボタンの左右の内側余白です。18pxを大きくすると検索ボタンが横に広がります。

gap:6px;
固定フッターのSVGアイコンとメニュー名の間隔です。値を大きくするとアイコンと文字が離れます。

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

width:24px;・height:24px;
固定フッターで使用しているSVGアイコンの大きさです。値を大きくするとアイコンが大きくなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。固定フッターメニューにはwidth:100%;を設定し、5つの項目へflex:1;を指定しているため、画面幅に合わせて各項目の横幅が均等に変化します。

style.cssの@media (max-width:640px)では、画面幅640px以下になると固定フッターの高さを76pxから68pxへ変更します。検索フォームパネルは左右16pxから10px、内側余白は14pxから10pxへ縮小し、固定フッターの高さに合わせてbottom:68px;へ変更します。メニュー名は12pxから11px、SVGアイコンは24pxから22px、検索フォーム内の文字は13pxへ調整するため、スマートフォン・タブレット・PCで利用できます。