検索＋絞り込みバー
キーワード入力欄・カテゴリ選択の select ・検索ボタンを横一列にまとめた検索バーです。白いボックスの中で display:flex を使い、入力欄に flex:1 を当てて幅いっぱいに伸ばし、右側に絞り込みのプルダウンとボタンを並べています。
このパーツの使いどころと実装ポイント
キーワード入力欄・カテゴリ選択のselect・検索ボタンを横一列にまとめた検索バーです。白いボックスの中でdisplay:flexを使い、入力欄にflex:1を当てて幅いっぱいに伸ばし、右側に絞り込みのプルダウンとボタンを並べています。overflow:hiddenと角丸で全体を一体化させ、境界に薄い線を入れることで、3つの要素が一つの部品としてまとまって見えるのが特徴です。
向いている場面
- 記事一覧やニュースサイトのキーワード＋カテゴリ検索
- 製品カタログや求人一覧の絞り込み入力
- FAQやヘルプページの検索窓
カスタマイズの勘所
カテゴリの選択肢はoptionを増減するだけで変えられます。検索ボタンを実際に機能させるには、フォームとしてactionを設定するか、JavaScriptで入力値と選択値を受け取って一覧を絞り込む処理を加えます。プレースホルダ文言は「何で検索できるか」が伝わる具体的な言葉にすると親切です。
アクセシビリティとレスポンシブの注意
入力欄とselectには見出しがないので、labelやaria-labelを付けると支援技術でも用途が伝わります。狭い画面では横並びが窮屈になるため、入力欄を上、絞り込みとボタンを下にした2段組みへ切り替えると操作しやすくなります。
よくある質問
検索ボタンを押しても何も起きません。
このパーツは見た目の部品で、検索の動作は含まれていません。実際に機能させるには、form要素にして送信先を指定するか、JavaScriptで入力値とカテゴリの値を受け取り、一覧を絞り込む処理を別途実装する必要があります。
スマートフォンでも横並びのまま使えますか？
画面が狭いと入力欄・プルダウン・ボタンが詰まって押しにくくなります。狭い幅では入力欄を上の段、絞り込みと検索ボタンを下の段に分ける2段組みへ切り替えると、指でも操作しやすくなります。