検索フォーム付きヘッダーを作る方法
ナビゲーションと検索フォームを配置したヘッダーを、HTMLとCSSで作る方法を紹介します。このサンプルでは、左側に「Sample Site」のサイト名、中央に「ホーム」「サービス」「ブログ」のナビゲーション、右側にキーワードを入力する検索欄と検索ボタンを配置します。サイト内の主要なページへ移動するメニューと検索フォームを、ひとつのヘッダー内にまとめたレイアウトです。
HTMLではサイト名、ナビゲーション、検索フォームをそれぞれ配置し、CSSのFlexboxを使って横方向に並べます。検索フォームにはinput type="search"を使用し、その横に検索ボタンを配置します。このサンプルでは検索フォームのレイアウトまでを作成し、検索結果を取得する処理は実装しません。実際にサイト内検索を行う場合は、使用するWebサイトの仕組みに合わせて検索先や検索処理を追加してください。
コーポレートサイト、ブログ、サービスサイト、情報量の多いWebサイトなど、ナビゲーションと検索欄をヘッダーから利用できるようにしたい場合に活用できます。サイト名、メニュー名、リンク先、検索欄のプレースホルダーはHTMLから変更でき、CSSではヘッダーの余白、文字サイズ、メニューの間隔、検索欄の横幅、検索ボタンのデザインなどを調整できます。また、画面幅が狭い場合は各要素を縦方向へ並べるため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
Sample Site
サイト名、ナビゲーション、検索フォームを配置したヘッダーのサンプルです。
ヘッダー内に検索キーワードの入力欄と検索ボタンが配置されていることを確認できます。このデモでは実際の検索処理は行いません。
コードをコピーして使おう！
<!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="header-with-search-form_header">
<!-- ヘッダーの内側 -->
<div class="header-with-search-form_inner">
<!-- サイト名 -->
<p class="header-with-search-form_logo">
Sample Site
</p>
<!-- メインナビゲーション -->
<nav class="header-with-search-form_nav" aria-label="メインナビゲーション">
<!-- hrefと表示文字はサイトに合わせて変更してください -->
<a href="#">ホーム</a>
<a href="#">サービス</a>
<a href="#">ブログ</a>
</nav>
<!-- 検索フォーム -->
<form class="header-with-search-form_search" role="search">
<!-- 検索キーワード入力欄 -->
<input
type="search"
name="keyword"
placeholder="キーワードを入力"
aria-label="検索キーワード"
>
<!-- 検索ボタン -->
<button type="submit">
検索
</button>
</form>
</div>
</header>
<!-- ページ本文 -->
<main class="header-with-search-form_content">
<!-- ページタイトル -->
<div class="header-with-search-form_content-title">
ページタイトル
</div>
<!-- ページの説明文 -->
<p class="header-with-search-form_content-text">
サイト名、ナビゲーション、検索フォームを配置したヘッダーのサンプルです。
</p>
</main>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではサイト名、ナビゲーション、検索フォーム、ページ本文を作成し、CSSでは各要素の配置や検索入力欄、検索ボタンのデザインを設定します。検索入力欄と検索ボタンには同じ高さを指定し、枠線の有無にかかわらず高さが揃うようにしています。このサンプルは検索フォームのレイアウトを作成するもので、検索結果を取得して表示する処理は含まれていません。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはヘッダーとページ本文を構成するファイルです。「Sample Site」のサイト名、「ホーム」「サービス」「ブログ」のナビゲーション、検索キーワード入力欄、検索ボタン、ページタイトル、説明文を配置します。各ナビゲーションのhrefを変更すると、実際のページへのリンクを設定できます。検索フォームを実際のサイト内検索へ使用する場合は、利用する検索処理に合わせてform要素の送信先などを設定してください。
style.cssはヘッダーとページ本文のデザインを設定するファイルです。Flexboxを使ってサイト名、ナビゲーション、検索フォームを横方向へ配置し、検索入力欄と検索ボタンには同じheight:42px;を指定して高さを揃えています。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを同じ階層で配置します。index.htmlからstyle.cssを読み込む構成になっているため、2つのファイルを配置したあとsample/index.htmlをブラウザで開いてください。ヘッダー内にサイト名、ナビゲーション、同じ高さに揃えた検索キーワード入力欄と検索ボタンが表示されます。このサンプルでは検索処理を実装していないため、入力したキーワードを使った検索結果の表示は行いません。
カスタマイズできる内容
index.htmlではサイト名、ナビゲーションの表示文字とリンク先、検索欄のプレースホルダー、ページタイトル、説明文を変更できます。style.cssではヘッダーの背景色、内側余白、最大横幅、文字サイズ、メニューの間隔、検索入力欄の横幅や高さ、角丸、検索ボタンの高さや横方向の余白、背景色などを変更できます。
数値調整
padding:28px 40px;
ヘッダーの内側余白です。上下の28pxを大きくするとヘッダーが高くなり、左右の40pxを大きくすると画面端との間隔が広がります。
border-bottom:1px solid #e5e7eb;
ヘッダー下側の枠線です。1pxを大きくすると線が太くなり、小さくすると細くなります。
box-shadow:0 4px 18px rgba(15,23,42,.05);
ヘッダー下側の影です。4pxを変更すると影の縦方向の位置が変わり、18pxを変更するとぼかし範囲が変わります。.05を大きくすると影が濃くなり、小さくすると薄くなります。
gap:32px;
サイト名、ナビゲーション、検索フォームの間隔です。値を大きくすると各要素の間隔が広がり、小さくすると近くなります。
max-width:1200px;
ヘッダー内側の最大横幅です。値を大きくすると各要素を配置できる範囲が広がり、小さくすると中央寄りになります。
font-size:20px;
サイト名の文字サイズです。値を大きくするとサイト名が大きくなり、小さくすると控えめになります。
gap:8px 24px;
ナビゲーションリンク同士の間隔です。8pxは上下方向、24pxは左右方向の間隔です。値を大きくするとリンク同士の間隔が広がります。
width:180px;
検索キーワード入力欄の横幅です。値を大きくすると入力欄が横に広くなり、小さくするとコンパクトになります。
height:42px;
検索キーワード入力欄と検索ボタンの高さです。両方を同じ値にすることで高さが揃います。値を大きくすると両方が高くなり、小さくすると低くなります。
padding:0 12px;
検索キーワード入力欄の内側余白です。左右の12pxを大きくすると入力文字と枠線の間隔が広がり、小さくすると狭くなります。
border-radius:8px;
検索入力欄と検索ボタンの角の丸みです。値を大きくすると角がより丸くなり、0にすると角丸がなくなります。
padding:0 18px;
検索ボタンの内側余白です。左右の18pxを大きくするとボタンが横に広くなり、小さくするとコンパクトになります。
font-size:14px;
ナビゲーション、検索入力欄、検索ボタンの文字サイズです。値を大きくすると文字が大きくなり、小さくするとコンパクトになります。
padding:80px 24px;
ページ本文の内側余白です。上下の80pxを大きくすると本文内容の上下余白が広がり、左右の24pxを大きくすると画面端との間隔が広がります。
font-size:28px;
ページタイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると控えめになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。画面幅が768px以下になると、サイト名、ナビゲーション、検索フォームを縦方向へ並べ、ヘッダーの余白を24px 20pxへ変更します。検索フォームは横幅を100%にし、検索入力欄も利用できる横幅いっぱいまで広げるため、スマートフォン・タブレット・PCで利用できます。
コメント