検索フィールド一体型ナビ
ヘッダー中央に検索フィールドを大きく置き、左にロゴ、右にアカウントやカートを並べた EC サイト王道のナビレイアウト です。Amazon やメルカリのように「探す」を主役にした構成で、商品数の多いサイトで効果を発揮します。 これは JavaScript 不要の CSS のみ で組めるレイアウトです。
解説
ヘッダー中央に検索フィールドを大きく置き、左にロゴ、右にアカウントやカートを並べたEC サイト王道のナビレイアウトです。Amazon やメルカリのように「探す」を主役にした構成で、商品数の多いサイトで効果を発揮します。
これは JavaScript 不要の CSS のみで組めるレイアウトです。コンテナを display:flex にし、検索フォームに flex:1 を与えて中央の余った幅をすべて使わせています。ロゴやアイコンには flex-shrink:0 を付けて潰れないよう固定し、フォームには max-width で広がりすぎを抑えています。検索ボタンのアイコンはインライン SVG なので外部フォントに依存せず、単体で動きます。
使う場面とカスタマイズ
- 商品点数の多い物販サイトや、記事数の多いメディアの全文検索
- フリマ・予約サイトなど検索が中心動線になるサービス
- 検索ボタンの背景色
#fbb034やフォームの角丸を変えてトーンを調整
入力欄は type="search" なので、ブラウザ標準のクリアボタンや入力候補が使えます。スマホではロゴと検索だけ残してアイコンを畳むなど、横幅に応じた組み替えを足すと使いやすくなります。プレースホルダーだけに頼らず、label を視覚的に隠して添えると読み上げ環境でも親切です。
使用例・適したシーン
- コーポレートサイトのグローバルナビ
- EC サイトのヘッダー
- SaaS の管理画面
- モバイル向け Web アプリ
よくある質問
JavaScript なしで使えますか
はい。このレイアウトはCSSのflexboxだけで成立します。検索フォームにflex:1を与えて中央を埋め、左右のロゴやアイコンは固定幅にしています。実際に検索を動かすには別途フォーム送信先や絞り込み処理を用意します。
スマホでも崩れませんか
flexで組んでいるため幅に応じて要素が縮みます。ただし狭い画面では検索欄が窮屈になりやすいので、メディアクエリでアイコンを隠す、検索欄を2段目に落とすなどの調整を加えると快適になります。