selectlist要素

<select> 要素は、外観をスタイル設定できない数少ないフォームコントロールの 1 つです。適用した CSS ルール（独自の境界線、フォント、option のスタイル）はすべてブラウザに無視されるため、スタイル設定した option を実現するだけのために、ネイティブの動作を重複して実装する「カスタムドロップダウン」ライブラリが何千も作られてきました。

<selectlist>（<selectmenu> と呼ばれることもあります）は、<select> の代わりに使用できる、CSS でスタイル設定可能なネイティブ HTML 要素です。ボタンのトリガーと選択肢のリストという同じ概念モデルを採用しながら、すべての部分を CSS でカスタマイズできます。

selectlist では、ボタン（閉じた状態のトリガー）、listbox（開いたドロップダウン）、選択肢を公開しています。CSS 疑似要素（::part(button)、::part(listbox)）を使うと、ネイティブの動作に影響を与えずに、それぞれをスタイル設定できます。

selectlist 内の選択肢には、テキストだけでなく、アイコン、説明、独自のレイアウトなど、任意のコンテンツを含められます。ブラウザが選択ロジック、キーボードナビゲーション、フォーカス管理を引き続き処理する一方で、外観は自由に制御できます。

selectlist は、<select> の優れた機能をすべて維持します。キーボードナビゲーション（矢印キー、先行入力）、スクリーンリーダーへの通知、フォームへの参加、フォーカス管理などです。アクセシブルな動作をそのまま利用しながら、UI の外観を上からスタイル設定できます。

トリガー用のスロットを指定します。<button slot="button">Choose fruit <svg>...</svg></button>。ボタンのデザインは自由に変更できます。ネイティブの三角形を独自のアイコンに置き換えたり、ラベルを追加したり、色を変更したりできます。開閉は引き続きブラウザが処理します。

selectlist は select と同じようにフォーム送信に参加します。name 属性と value を持ち、フォームと一緒に送信されます。サーバー側の処理も同じです。ほとんどの select の用途では、マークアップレベルでそのまま置き換えられます。

selectlist は初期段階の機能です。2026 年現在、Chromium ベースのブラウザではフラグ付き、または限定的な形で提供されています。Firefox と Safari はまだ対応していません。本番環境で使用するには、非対応ブラウザ向けに通常の <select> へフォールバックする必要があります。

ネイティブの動作に一致する、完全にアクセシブルなカスタムドロップダウンのポリフィルは困難です。フォーカストラップ、キーボードナビゲーション、スクリーンリーダーとの統合、フォームへの参加などを実装する必要があります。Downshift、Combobox、react-aria などのライブラリは、何千行ものコードでこの処理を実現しています。selectlist は、それらすべてを 1 つの要素に置き換えます。

社内アプリやChromiumのみを対象としたデプロイでは、現在selectlistを使うことでコードを大幅に削減できます。幅広いユーザー向けの公開サイトでは、FirefoxとSafariが対応するまで待つか、対応ブラウザーではselectlistを使用し、それ以外ではカスタムReact/Vueドロップダウンにフォールバックするラッパーライブラリを使用してください。

selectlistがすべてのブラウザーで提供されるようになると、多くのカスタムドロップダウンライブラリが非推奨になるか、ネイティブ要素の薄いラッパーへと変わることが予想されます。標準化の進展を確認してください。このAPIはこれまでにも改訂されており、正式に標準化されるまでさらに変更される可能性があります。

デザイナーは、「デザインどおりに作成しても、ドロップダウンはブラウザー上で異なる見た目になります」といった但し書きなしに、ピクセル単位で正確なドロップダウンを指定できるようになりました。selectlistにより、デザインモックアップと実際に提供されるHTMLの間に長年存在していた視覚的な不一致の1つが解消されます。

selectlist要素が重要なのはなぜですか。ネイティブのが抱えていたどのような制限に対処するのでしょうか。

まとめ

selectlist（selectmenuとも呼ばれます）は、<select>の組み込み動作（キーボード操作、スクリーンリーダー、フォームへの参加）と、ボタン、listbox、選択肢を完全にCSSでカスタマイズできる機能を組み合わせた、開発中のネイティブHTML要素です。現在は、フラグを有効にしたChromiumで提供されています。すべてのブラウザーで標準化されれば、カスタムドロップダウンライブラリのエコシステムの大部分が、1つのネイティブな基本要素に置き換えられます。

よくある質問

「selectlist要素」レッスンは無料ですか？

はい。「selectlist要素」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「selectlist要素」で何を学びますか？

提案中のselectlist要素でドロップダウンコントロールをカスタマイズします ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「selectlist要素」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

1. 宣言的Shadow DOM
2. Popover API
3. selectlist要素
4. Interest Invokersとcommand属性

← HTML Academyに戻る