検索結果リスト

このパーツの使いどころと実装ポイント

このパーツは、検索ボックス・ヒット件数・結果カードの一覧をまとめた「検索結果ページ」のレイアウトです。上部の <form> は入力欄とボタンを枠線で一体化し、type="search" の入力を使っています。結果は <ul> のリストで、各項目にカテゴリのラベル（記事 / ニュース）、見出し、抜粋、URL が縦に並ぶ構造です。本文幅を max-width:780px に抑え、読みやすい 1 カラムにしているのが特徴です。

向いている場面

サイト内検索やブログ記事の検索結果を見せたい場面に向きます。記事数の多いオウンドメディア、ヘルプセンターやナレッジベース、商品検索を持つサイトの結果表示などです。カテゴリラベルに色違い（--news）を用意してあるので、結果の種類を視覚的に区別できます。

カスタマイズの勘所

• 件数の数字（<b>）と各カードの見出し・抜粋・URL を、実際の検索結果データに差し替えます。
• カテゴリの種類を増やすときは、ラベル用の修飾クラスを追加して色を割り当てます。

実装上の注意として、これはレイアウトの雛形であり、検索そのものの仕組み（絞り込みや並べ替え）は別途用意する必要があります。入力欄には <label> もしくは aria-label を補うと、読み上げ環境で何の入力かが伝わります。各結果の見出しはリンクにして遷移できるようにし、URL 表示は実際のリンク先と一致させてください。1 カラム設計なのでスマートフォンでもそのまま読みやすく表示されます。