セレクトボックスは、Webサイトの会員登録や住所入力、商品検索、予約フォームなどで使われる、複数の選択肢から項目を選ぶための入力部品です。HTMLの`select`要素と`option`要素を使えば基本的な機能を実装でき、CSSによるデザイン調整やJavaScriptによる値の取得にも対応できます。
ただし、見た目を整えるだけでは使いやすいフォームにはなりません。初期値の設定、必須入力のチェック、選択肢の無効化、スマートフォンでの操作性、スクリーンリーダーへの対応など、実装前に押さえたいポイントがあります。2026年時点のHTML・CSSの仕様やブラウザー対応状況も踏まえ、基本の作り方から実践的な設計方法まで整理します。
> 【この記事の重要ポイントまとめ】
>
> - 基本構造： セレクトボックスはHTMLの`select`要素と`option`要素で作成できる。
> - 機能とデザイン： `selected`、`required`、`disabled`などの属性とCSS・JavaScriptを組み合わせることで、用途に合ったフォームを実装できる。
> - 使いやすさ： スマートフォンへの対応、適切なラベル設定、キーボード操作への配慮が欠かせない。独自デザインを優先する場合も、標準機能とアクセシビリティを維持することが重要。
【基本を理解】セレクトボックスとは？プルダウンとの違いを整理
セレクトボックスとは、あらかじめ用意された選択肢から、ユーザーが1つまたは複数の項目を選ぶためのフォーム部品です。
例えば、都道府県、年齢層、商品のカテゴリー、配送方法、予約時間など、入力内容を一定の候補に限定したい場面で使われます。自由入力による表記揺れを減らせるため、ユーザーが入力しやすくなるだけでなく、システム側でデータを管理しやすくなるメリットもあります。
セレクトボックスとプルダウンは何が違う？
両者は同じ意味で使われることが多いものの、厳密には指しているものが異なります。
セレクトボックスは、選択肢を選ぶための入力部品そのものを指す言葉です。一方、プルダウンは、操作すると選択肢の一覧が展開される表示形式や操作方法を指す言葉として使われます。
HTMLの`select`要素は、一般的なプルダウン形式のほか、`multiple`属性や`size`属性によって、複数の候補を表示するリスト形式にもできます。WHATWGのHTML Standardでも、`select`要素は選択肢から項目を選ぶコントロールとして定義されています。
セレクトボックスが向いている場面
住所や配送方法の入力
都道府県や配送方法など、候補が決まっている項目に適しています。入力形式を統一しやすいのが利点です。
商品検索や絞り込み
商品カテゴリー、並び順、価格帯などを指定する用途に向いています。
予約や申し込み
プランや希望時間帯など、選べる候補を明確に提示したい場合に便利です。
反対に、候補が非常に多く、利用者が任意の文字列で検索したい場合は、検索機能付きの選択コンポーネントやオートコンプリートのほうが適しています。また、少数の選択肢を常に表示したい場合には、ラジオボタンのほうが選択肢を比較しやすいこともあります。
大切なのは、セレクトボックスを使うこと自体ではなく、ユーザーが迷わず選べる入力方法を選ぶことです。
【HTMLの基本】セレクトボックスの作り方と選択肢の設定
セレクトボックスの基本的な実装には、HTMLの`select`要素と、その子要素である`option`要素を使用します。
`select`要素が選択欄全体を定義し、`option`要素が個々の選択肢を定義する仕組みです。実際のフォームでは、さらに`label`要素で入力項目の意味を明示し、`name`属性で送信するデータの名前を指定します。
最小限のHTMLで作成する
例えば、都道府県を選ぶセレクトボックスなら、次のように記述します。
` `
このコードには、実装時に理解しておきたい要素が含まれています。
- `select`：選択欄全体を定義する。
- `option`：選択可能な候補を定義する。
- `value`：選択された際に取得・送信する値を指定する。
- `name`：フォーム送信時のデータ項目名を指定する。
- `label`：入力欄の目的をユーザーに伝える。
例えば、画面には「東京都」と表示し、内部の値として`tokyo`を利用できます。表示用の文言と、システムで扱う値を分けておけば、表示名の変更やデータ連携にも対応しやすくなります。
なお、`option`要素で`value`属性を省略すると、基本的には選択肢のテキストが値として使われます。データ形式を明確にするため、実務では`value`を明示しておく方法がおすすめです。
初期値を設定する方法
フォームを開いた時点で特定の選択肢を選択状態にしたい場合は、該当する`option`要素に`selected`属性を指定します。
例えば、東京都を初期値にする場合は、東京都の選択肢に`selected`を追加します。
``
ただし、すべてのユーザーに最初から特定の値を選ばせる設計が適切とは限りません。ユーザー自身に判断してもらう必要がある場合は、「選択してください」という案内を初期表示にし、実際の選択を促す方法が有効です。
実装方法の比較
このように、まずHTMLで正しい構造を作り、その後に必要な属性やCSS、JavaScriptを追加する順番が基本です。
【フォーム設計】selected・required・disabled属性の使い分け
セレクトボックスの使いやすさは、選択肢の並べ方だけでなく、初期状態や入力制約の設計によっても左右されます。特に、`selected`、`required`、`disabled`は役割が異なるため、混同しないことが大切です。
selected属性：初期値を決める
`selected`は、特定の選択肢を初期状態で選択済みにするための属性です。
ユーザーの過去の入力内容を編集する画面や、適切な初期値が明確な設定画面などで役立ちます。
一方、利用者の意思確認が必要な項目に、都合のよい値をあらかじめ設定してしまうと、選択内容を見落とす原因になります。料金プランや同意に関する項目などは、初期値を設定する理由を慎重に検討する必要があります。
required属性：未選択のまま送信させない
`required`は、フォームの送信前に選択が必要であることをブラウザーに伝える属性です。
例えば、都道府県の入力を必須にする場合は、`select`要素に`required`を追加します。案内用の最初の選択肢には空の値を設定しておくと、最初から有効な選択肢が選ばれた状態になることを避けられます。
``
HTML Standardでは、単一選択の`select`要素で、最初の選択肢が空の値を持つ特定の条件を満たす場合、その選択肢をプレースホルダーとして扱い、`required`による入力検証に利用できます。
ただし、ブラウザーの入力検証だけで、サーバー側の検証まで不要になるわけではありません。送信された値が許可された選択肢に含まれるかどうかは、サーバー側でも確認する必要があります。
disabled属性：操作できない状態にする
`disabled`は、選択欄や特定の選択肢を無効化するための属性です。
例えば、配送先を指定するまで配送時間を選べない場合や、受付を終了した予約枠を選択不可にする場合に使えます。
``
このようにすれば、受付終了の項目を候補一覧に残しながら、選択を防げます。
注意したいのは、`disabled`が付いたフォームコントロールは、通常のフォーム送信に値が含まれないことです。値を表示するだけでなく送信する必要がある場合は、無効化の必要性やデータの受け渡し方法を見直しましょう。
【CSSデザイン】セレクトボックスの見た目を整える方法
セレクトボックスのデザインを調整する際は、文字の大きさ、入力欄の高さ、余白、枠線、背景色などから手を加えると、既存の操作性を維持しながら見た目を改善できます。
従来のセレクトボックスは、OSやブラウザーの標準UIに依存する部分が多く、選択肢一覧の表示方法まで完全に統一することは簡単ではありません。MDN Web Docsでも、従来型の`select`要素はブラウザー間で一貫したスタイリングが難しいと説明されています。
基本的なCSSデザイン
例えば、フォーム全体の幅に合わせ、余白を確保したシンプルなデザインにするなら、次のようなCSSが使えます。
`select { width: 100%; min-height: 44px; padding: 0.75rem 0.9rem; border: 1px solid #767676; border-radius: 6px; background-color: #fff; color: #222; font: inherit; }`
この指定では、入力欄を親要素の幅いっぱいに広げ、十分な高さと内側の余白を確保しています。`font: inherit`を指定すると、周囲のフォームと文字の設定をそろえやすくなります。
実際の画面では、周囲のレイアウトや文字サイズに応じて数値を調整してください。
フォーカス時の表示を残す
入力欄にフォーカスが当たったときの視覚的な変化も重要です。例えば、次のCSSを追加できます。
`select:focus-visible { outline: 3px solid #245dcc; outline-offset: 2px; }`
キーボードで操作しているユーザーが、現在どの項目を操作しているか把握しやすくなります。フォーカス表示を単に消すのではなく、背景とのコントラストを確保したデザインにすることが大切です。W3CのWCAG関連資料でも、フォーカス位置を視覚的に識別できることの重要性が説明されています。
矢印や選択肢一覧までカスタマイズしたい場合
従来の方法では、`appearance: none`によって標準の外観を取り除き、CSSで矢印を追加する方法などが使われてきました。ただし、標準の外観を変更すると、ブラウザー本来の表示や操作性に影響することがあるため、慎重な検証が必要です。
2026年には、`appearance: base-select`や`::picker(select)`などを利用して、選択欄と選択肢一覧をより細かくスタイリングするカスタマイズ可能なセレクトボックスの仕組みも登場しています。MDN Web Docsでは、これらの機能について、対応ブラウザーや実装環境による制約があることも案内されています。
新しい機能を利用する場合は、対応環境を確認したうえで段階的に導入するのが現実的です。非対応のブラウザーでも基本的な選択操作ができるよう、標準の`select`要素を土台にした設計を優先しましょう。
【JavaScript実装】セレクトボックスの値取得とonchangeイベント
JavaScriptを使うと、選択された値を取得したり、選択内容に応じて画面を更新したりできます。
例えば、商品カテゴリーを選ぶと検索条件を更新する、配送方法を変えると説明文を切り替える、といった処理です。
選択された値を取得する
`select`要素の現在の選択値は、`value`プロパティで取得できます。
`const select = document.querySelector("#prefecture"); const value = select.value; console.log(value);`
東京都が選択されている場合、`value`には`tokyo`が入ります。
選択肢の表示テキストを取得したい場合は、`selectedOptions`を利用できます。
`const selectedText = select.selectedOptions[0]?.textContent;`
`value`はシステム処理やデータ送信に、`textContent`は画面表示などに利用する、と使い分けると扱いやすくなります。
onchangeイベントで選択変更を検知する
選択内容が変更されたタイミングで処理を実行するには、`change`イベントを使います。
`select.addEventListener("change", (event) => { console.log(event.target.value); });`
HTML属性として`onchange`を記述する方法もありますが、JavaScript側で`addEventListener`を使うと、HTMLと処理を分離しやすくなります。
MDN Web Docsによると、`change`イベントは、ユーザーが`select`要素の値を変更して選択を確定したときなどに発生します。テキスト入力のように、値が変化するたびに必ず発生するイベントではない点も理解しておきましょう。
選択に応じて画面を更新する
例えば、選択した配送方法に応じて案内文を変更する場合は、次のように実装できます。
`const shipping = document.querySelector("#shipping"); const message = document.querySelector("#shipping-message"); shipping.addEventListener("change", => { message.textContent = shipping.value === "express" ? "速達便を選択しています" : "通常配送を選択しています"; });`
ここでは、選択値に応じてテキストを切り替えています。`textContent`を使うことで、選択値をHTMLとして解釈させずに文字列として表示できます。
なお、選択内容を変えただけで自動送信やページ遷移を行う設計は、誤操作につながる場合があります。検索条件の即時更新など、操作の結果が明確なケースを除き、送信ボタンを設ける方法も検討してください。
【スマホ対応・アクセシビリティ】使いやすいセレクトボックスの設計
セレクトボックスは、標準のHTML要素を使えば基本的なキーボード操作やフォーム連携を利用しやすい一方、ラベルやサイズ、選択肢の設計が不十分だと、操作に迷う原因になります。
スマートフォンでは操作領域を確保する
スマートフォン向けのフォームでは、指でタップしやすい高さと幅を確保することが大切です。
実装上の目安として、入力欄の高さを44〜48 CSSピクセル程度にすると、タップしやすいデザインを作りやすくなります。これはあらゆる状況に対する一律の規格値ではなく、画面サイズや周囲の要素との間隔も含めて調整するための実務上の目安です。
また、長い選択肢がある場合は、スマートフォンの狭い画面で文字が切れないか確認しましょう。選択欄の横幅を確保するだけでなく、候補の名称を短く、意味が明確な表現に整えることも有効です。
label要素で入力項目を明確にする
セレクトボックスには、何を選ぶための項目なのかが分かるラベルを付けましょう。
例えば、「選択してください」という案内だけでは、都道府県を選ぶのか、配送方法を選ぶのかが分かりません。「都道府県」「配送方法」のように、項目の目的を明示することが必要です。
`label`要素の`for`属性と、対象となる`select`要素の`id`属性を一致させれば、両者を関連付けられます。W3CのWeb Accessibility Initiativeも、ドロップダウンを含むフォームコントロールには、その目的を説明するラベルを付けるよう案内しています。
選択肢が多すぎる場合は別のUIを検討する
セレクトボックスは、選択肢が増えるほど目的の項目を探す負担が大きくなる傾向があります。
都道府県のように候補の種類が限られている場合は適していますが、商品名や施設名など、候補が膨大な場合は検索欄との組み合わせを検討しましょう。
また、複数の候補を比較しながら選びたい場合には、ラジオボタンやチェックボックスのほうが分かりやすいこともあります。入力項目の種類や数、ユーザーが選択する目的に応じて、UIを選び分けることが重要です。
実装後に確認したいチェックポイント
{@body const checks = ["選択欄に目的が分かるラベルがある","初期値が利用者の意図を不必要に誘導していない","必須項目はrequired属性と適切な案内文で示している","disabledにした値が送信されないことを考慮している","キーボード操作時のフォーカス表示が見える","スマートフォンで文字切れやタップのしにくさがない","JavaScriptで取得した値をサーバー側でも検証している","主要なブラウザーと必要な支援技術で動作を確認している"]}
{@body const [checkedItems, setCheckedItems] = DIL.useState()}
{checkedItems.length}/{checks.length} 項目
{#each checks as item, i}
{/each}
【セレクトボックス】に関するよくある質問（FAQ）
Q1：セレクトボックスとプルダウンは同じものですか？
セレクトボックスは選択用の入力部品、プルダウンは選択肢が展開される表示形式や操作方法を指すことが多く、厳密には意味が異なります。ただし、Web制作の現場では同じ意味で使われる場合もあります。
Q2：HTMLのセレクトボックスで初期値を設定するにはどうすればよいですか？
初期状態で選択させたい`option`要素に`selected`属性を指定します。ユーザーに選択を促したい場合は、空の値を持つ案内用の選択肢を先頭に置く方法が適しています。
Q3：セレクトボックスの選択値をJavaScriptで取得する方法は？
対象となる`select`要素の`value`プロパティを利用します。選択内容が変更されたときに処理を実行する場合は、`addEventListener("change", ...)`でイベントを登録します。
Q4：セレクトボックスをCSSだけで自由にデザインできますか？
入力欄の幅、余白、文字、枠線、背景色などは比較的調整しやすい一方、選択肢一覧の外観は従来のブラウザーやOSの実装に左右されます。新しいカスタマイズ機能もありますが、対応状況を確認し、非対応環境での動作も考慮する必要があります。
Q5：required属性とdisabled属性の違いは何ですか？
`required`は、選択が必須であることを示し、未選択でのフォーム送信を防ぐために使います。`disabled`は、選択欄や選択肢を操作できない状態にするための属性です。無効化されたフォームコントロールの値は、通常のフォーム送信には含まれません。
まとめ：【プロの結論】用途に合ったセレクトボックスを選ぶ判断基準
セレクトボックスを実装するときは、HTMLの`select`要素と`option`要素で基本構造を作り、`selected`・`required`・`disabled`で選択状態や入力条件を整え、必要に応じてCSSとJavaScriptを追加するのが基本です。
プロの視点で特に重視したいのは、次の3点です。
- 操作性を優先する： 選択肢が少なく明確な場合はセレクトボックスを使い、候補が多い場合や比較が必要な場合は、検索付きUIやラジオボタンなども検討する。
- 見た目と機能を分けて考える： CSSでデザインを整えても、ラベル、キーボード操作、フォーカス表示、フォーム送信などの基本機能を損なわないようにする。
- 入力値を正しく管理する： JavaScriptで値を取得するだけでなく、送信データの検証や無効化された項目の扱いまで設計する。
2026年は、CSSによるセレクトボックスのカスタマイズにも新しい選択肢が広がっています。しかし、デザインの自由度だけで実装方法を決めるのは得策ではありません。標準のHTML要素を活用しながら、実際に使うブラウザー、端末、支援技術で動作を確かめることが、長く使いやすいフォームにつながります。
