セレクトボックスの使い方を徹底解説！HTML・CSS・JavaScriptとスマホ対応の要点

Webサイトの会員登録、商品検索、住所入力、予約フォームなどで見かける「セレクトボックス」。選択肢から項目を選ぶだけのシンプルな部品ですが、HTMLの書き方や初期値の設定、JavaScriptとの連携、スマートフォンでの操作性によって、使いやすさは大きく変わります。

2026年のWeb制作では、従来のブラウザー標準のセレクトボックスを活用する方法に加え、CSSでデザインを細かく調整する手法も選択肢になっています。HTMLのselect要素の基本から、optionタグの設定方法、複数選択、disabled設定、アクセシビリティまで、実装時に迷いやすいポイントを具体例とともに解説します。

【この記事の重要ポイントまとめ】

• 基本：セレクトボックスはHTMLのselect要素とoption要素で作る選択式フォーム部品。
• 実装：初期値、必須入力、無効化、JavaScriptのchangeイベントを正しく組み合わせることが大切。
• 設計：CSSの装飾だけでなく、スマホでの操作性、キーボード操作、スクリーンリーダーへの対応も考慮する。

【基礎知識】セレクトボックスとは？プルダウンとの違いを解説

セレクトボックスとは、あらかじめ用意された選択肢の中から、ユーザーに項目を選んでもらうためのフォーム部品です。たとえば、都道府県、商品のサイズ、支払い方法、検索結果の並び順などを指定するときに使われます。

HTMLでは、主にselect要素とoption要素を組み合わせて実装します。ブラウザーが選択状態やキーボード操作、フォーム送信などの基本機能を提供するため、独自のプルダウンを一から開発する必要がありません。

ここで押さえておきたいのが、「セレクトボックス」と「プルダウン」の違いです。

セレクトボックスは選択式の入力部品を指す言葉で、プルダウンは一般に、クリックやタップによって選択肢の一覧が展開される表示形式を指します。Web制作の現場ではほぼ同じ意味で使われることもありますが、厳密には同義ではありません。

たとえば、HTMLのselect要素は一般的なプルダウンとして表示できます。一方、CSSやJavaScriptで独自に作ったメニューもプルダウンと呼ばれますが、必ずしもselect要素を使っているとは限りません。

また、画面上でメニューを展開する点が似ていても、ナビゲーション用のメニューとフォーム入力用のセレクトボックスでは目的が異なります。サイト内のページへ移動するメニューならリンクやナビゲーション、ユーザーが値を選んで送信するならフォーム部品を使うのが基本です。

セレクトボックスが特に向いているのは、選択肢があらかじめ決まっていて、入力内容を一定の形式にそろえたいケースです。自由記述による表記揺れを減らせる一方、選択肢が多すぎると目的の項目を探しにくくなるため、項目数や利用シーンに応じた設計が欠かせません。

【HTML入門】select要素の仕組みとoptionタグの設定方法

セレクトボックスを作る最も基本的な方法は、select要素の中にoption要素を並べることです。次の例では、都道府県を選択するフォームを作成しています。

<label for="prefecture">都道府県</label>


<select id="prefecture" name="prefecture">
<option value="tokyo">東京都</option>
<option value="osaka">大阪府</option>
<option value="fukuoka">福岡県</option>
</select>

それぞれの要素には役割があります。select要素は選択欄そのもの、option要素は個々の選択肢です。label要素は入力欄の目的を伝え、name属性はフォーム送信時の項目名を指定します。id属性はlabel要素との関連付けなどに使用します。

option要素では、表示する文章と送信する値を分けて設定できます。たとえば、画面には「東京都」と表示しながら、送信データには「tokyo」を使う設計です。value属性を省略した場合は、optionのテキスト内容が値として使われますが、データを扱いやすくするため、明示的に設定する方法が一般的です。

選択肢が多い場合は、optgroup要素で分類することもできます。たとえば、商品を「食品」「日用品」「家電」に分ければ、一覧を理解しやすくなります。ただし、optgroupは選択肢をグループ化する要素であり、見出し自体を選択項目にするためのものではありません。

初期値を設定する方法も簡単です。最初から特定の項目を選択しておきたい場合は、該当するoptionにselected属性を付けます。

<select name="size" id="size">
<option value="s">Sサイズ</option>
<option value="m" selected>Mサイズ</option>
<option value="l">Lサイズ</option>
</select>

この例では、ページの初期表示時にMサイズが選ばれます。単一選択のselect要素では、通常、選択状態にするoptionは1つです。なお、selected属性は初期選択を指定するものであり、ユーザーが選択を変更できないようにする属性ではありません。

一方、必須入力の項目では、初期状態で「選択してください」と表示する方法が便利です。

<label for="payment">支払い方法</label>
<select id="payment" name="payment" required>
<option value="" selected disabled>
選択してください
</option>
<option value="card">クレジットカード</option>
<option value="bank">銀行振込</option>
</select>

required属性は入力を必須にするためのものです。空文字の選択肢を初期表示に使えば、実際の支払い方法を選ばないまま送信することを防ぎやすくなります。ただし、サーバー側でも入力値の検証を行い、空の値や想定外の値を適切に処理する必要があります。

特定の選択肢やセレクトボックス全体を操作できないようにするには、disabled属性を使います。

<select name="delivery" disabled>
<option value="standard">通常配送</option>
<option value="express">速達配送</option>
</select>

select要素にdisabledを設定すると、ユーザーはその欄を操作できません。option要素だけに設定した場合は、その選択肢だけが選べなくなります。重要なのは、disabledにしたフォーム部品の値は通常のフォーム送信データに含まれない点です。表示を一時的に止めたいのか、データとして送信したいのかを区別して設計しましょう。

【比較】セレクトボックスの使い方別に選ぶ実装方法

セレクトボックスの実装では、見た目の自由度だけを基準にすると、開発コストや操作性の面で問題が生じることがあります。まずは標準のselect要素で要件を満たせるかを確認し、不足する機能がある場合にカスタマイズを検討するのが現実的です。

標準のselect要素を選ぶ最大の利点は、ブラウザーやOSが提供する操作機能を利用できることです。独自UIで同じ品質を実現するには、表示、選択、フォーカス移動、キーボード操作、読み上げなどを考慮しなければなりません。

一方、選択肢の検索機能や複雑な条件連動など、標準機能では実現しにくい要件がある場合は、独自UIを検討する価値があります。その際も、見た目を似せるだけでは不十分です。ユーザーが選択内容を理解でき、マウスやタッチ操作以外でも利用できることを条件にしましょう。

実装方法を選ぶときは、選択肢の数、操作する端末、アクセシビリティ要件、対応ブラウザー、保守にかかる工数をまとめて評価することが大切です。

【デザイン】セレクトボックスのCSSカスタマイズと2026年の動向

標準のselect要素でも、CSSを使えば文字サイズ、幅、高さ、余白、背景色、枠線などを調整できます。まずは基本的な外観を整えるところから始めましょう。

select {
width: 100%;
min-height: 44px;
padding: 10px 12px;
font-size: 16px;
color: #222;
background-color: #fff;
border: 1px solid #777;
border-radius: 6px;
}

widthを100%にすると、親要素の幅に合わせて入力欄を配置できます。paddingは文字の周囲に余白を設け、border-radiusは角を丸くする指定です。44pxの最小高さはタップしやすさを意識した設計例ですが、実際には周囲の余白や端末、利用者の操作環境も含めて確認してください。

セレクトボックスのデザイン比較では、通常時の見た目だけでなく、フォーカス時、無効時、エラー時の表示も重要です。特にキーボードで操作している利用者が現在の位置を把握できるよう、フォーカス表示を消さないようにします。

select:focus-visible {
outline: 3px solid #2463eb;
outline-offset: 2px;
}


select:disabled {
background-color: #eee;
color: #666;
cursor: not-allowed;
}

標準の矢印を変更したい場合は、appearanceプロパティを利用する方法があります。ただし、appearance: noneで標準の外観を取り除くと、矢印も表示されなくなることがあります。独自の矢印を加える場合は、装飾だけであることが分かるようにし、文字や選択操作を妨げない設計が必要です。

また、2026年時点では、select要素の外観だけでなく、展開される選択肢の一覧までカスタマイズするためのCSS機能も広がっています。MDN Web Docsの「Customizable select elements」では、appearance: base-selectや、選択肢一覧を対象とする::picker(select)などが紹介されています。Apple Developerの2026年の解説でも、Safari 27やChrome 135でのカスタマイズ可能なselectの例が取り上げられています。

ただし、こうした新しい機能は、すべてのブラウザーやバージョンで同じように利用できるとは限りません。対応状況は変化するため、MDN Web Docsの互換性情報を確認し、未対応環境でも基本的な選択機能が使えるようにが必要です。

実装例としては、対応環境でのみ新しい外観を有効にする方法があります。

@supports (appearance: base-select) {
select,
select::picker(select) {
appearance: base-select;
}
}

これは機能の対応状況を条件にする基本例です。実際の画面では、対象ブラウザーで選択肢が正しく展開されるか、文字や背景が読みやすいか、フォーカスが分かるかも確認してください。CSSの新機能を採用する場合も、見た目を優先して操作性を損なわないことが判断基準になります。

【JavaScript連携】change・onchangeイベントと複数選択の実装

セレクトボックスとJavaScriptを連携させると、選択内容に応じた画面の更新や、関連する入力欄の有効化などを実装できます。たとえば、配送方法の選択によって案内文を切り替える場合は、select要素のchangeイベントを使います。

<label for="shipping">配送方法</label>
<select id="shipping" name="shipping">
<option value="standard">通常配送</option>
<option value="express">速達配送</option>
</select>


<p id="shipping-message"></p>

<script>
const shipping = document.querySelector("#shipping");
const message = document.querySelector("#shipping-message");

function updateMessage {
if (shipping.value === "express") {
message.textContent = "速達配送が選択されています。";
} else {
message.textContent = "通常配送が選択されています。";
}
}

shipping.addEventListener("change", updateMessage);
updateMessage;
</script>

この例では、選択された値をshipping.valueで取得し、その内容に応じて案内文を変更しています。textContentを使用して文字列を表示しているため、ユーザー入力をそのままHTMLとして解釈させる方法よりも安全に扱いやすくなります。

onchange属性をHTML側に直接指定する書き方もあります。たとえば、onchange="updateMessage"のように記述できますが、HTMLとJavaScriptの処理が混在しやすくなります。保守性を考えるなら、addEventListener("change", ...)でイベント処理を登録する方法が扱いやすいでしょう。

なお、changeイベントは値の変更が確定したときに発生するイベントです。すべての値の変化を逐一検知するinputイベントとはタイミングが異なるため、処理の目的に応じて選択します。選択した項目に応じて別の入力欄を更新するような処理では、changeイベントが基本的な選択肢です。

複数選択を行う場合は、select要素にmultiple属性を設定します。

<label for="categories">興味のあるカテゴリ</label>
<select id="categories" name="categories" multiple size="4">
<option value="tech">テクノロジー</option>
<option value="business">ビジネス</option>
<option value="design">デザイン</option>
<option value="travel">旅行</option>
</select>

multiple属性がない場合は通常1つだけ選択できますが、設定すると複数のoptionを選べるようになります。size属性は画面上に表示する選択肢の行数の目安です。一般的な複数選択欄では、複数項目が見えるリスト形式になることがあります。

JavaScriptから選択された値をまとめて取得するには、selectedOptionsを利用します。

const categories = document.querySelector("#categories");


categories.addEventListener("change", => {
const values = Array.from(
categories.selectedOptions,
option => option.value
);

console.log(values);
});

selectedOptionsは、選択中のoption要素を集めたコレクションです。複数選択の場合にvalueだけを参照すると、複数の選択値をまとめて取得できないため、選択中の要素を個別に取り出す必要があります。

もう1つ注意したいのは、複数選択の操作方法です。PCではCtrlキーやCommandキー、Shiftキーなどを使う操作が一般的ですが、環境によって使い勝手が異なります。複数選択が必要な場合は、画面上に「複数選択できます」と案内を加え、スマートフォンでも操作しやすいかを検証しましょう。

【実用・品質】スマホ対応とアクセシビリティで失敗しない方法

セレクトボックスは標準のフォーム部品であるため、ブラウザーやOSが提供する選択画面を利用できます。スマートフォンでは端末に応じた操作UIが表示されることがあり、独自のメニューを作らなくても選択できる点がメリットです。

ただし、標準部品を使えばスマホ対応が自動的に完了するわけではありません。入力欄の幅が狭すぎる、説明文が長くて読みにくい、項目名が分かりにくいといった問題は残ります。画面幅に応じて入力欄を配置し、タップしやすい高さと周囲の余白を確保してください。

また、CSSで文字サイズや背景色を変更する場合は、拡大表示や高コントラストの設定でも内容が認識できるかを確認します。矢印や色だけで選択状態を伝えず、選択中の文字も明確に表示することが大切です。

アクセシビリティ対策の基本は、適切なラベル付けです。W3CのWeb Accessibility Initiative（WAI）は、フォーム部品の目的が分かるようにlabel要素などを用いて入力欄とラベルを関連付ける方法を案内しています。

たとえば、次のようにlabelのfor属性とselectのid属性を一致させます。

<label for="country">国・地域</label>
<select id="country" name="country">
<option value="jp">日本</option>
<option value="us">アメリカ</option>
</select>

この関連付けによって、スクリーンリーダーなどの支援技術が入力欄の目的を把握しやすくなります。ラベルを見た目だけで配置し、HTML上では関連付けていない実装は避けましょう。

加えて、次の点を確認すると、使いにくさや入力ミスを減らせます。

• 選択欄に、内容を具体的に示すラベルが付いているか。
• キーボードだけでも選択欄に移動し、選択や変更ができるか。
• フォーカス位置が視覚的に分かり、背景色とのコントラストも確保されているか。
• 必須項目や入力エラーが、色だけでなく文字でも説明されているか。
• disabledの状態が、見た目だけでなく実際の操作やフォーム送信にも適切に反映されているか。
• スマートフォンの実機でも、長い選択肢や複数選択を無理なく操作できるか。
• 独自UIを使う場合、フォーカス管理やキーボード操作、スクリーンリーダーへの情報提供を実装できているか。

disabled属性とreadonlyの違いにも注意が必要です。select要素には、通常のフォーム部品と同じ意味でのreadonly属性はありません。操作を禁止するならdisabledを使いますが、disabledの値はフォーム送信から除外されるため、送信が必要な値を扱う設計では別途対応が必要です。

最後に、入力値の検証はフロントエンドだけで完結させないことが大切です。select要素で選択肢を限定していても、送信データが改変される可能性はあります。サーバー側でも、許可された値かどうかを確認してください。

【セレクトボックス】に関するよくある質問（FAQ）

Q1：セレクトボックスとプルダウンは同じものですか？ A1：一般的なWeb制作では同じ意味で使われることがありますが、セレクトボックスは選択式の入力部品、プルダウンは選択肢を展開する表示形式を指すことが多く、厳密には異なります。

Q2：セレクトボックスの初期値はどう設定しますか？ A2：初期状態で選択したいoption要素にselected属性を設定します。必須入力では、空のvalueを持つ案内用の選択肢を初期表示にする方法も有効です。

Q3：セレクトボックスで複数の項目を選択できますか？ A3：select要素にmultiple属性を設定すると複数選択が可能になります。選択方法をユーザーに案内し、PCとスマートフォンの両方で操作性を確認してください。

Q4：セレクトボックスの見た目はCSSで自由に変更できますか？ A4：文字、幅、余白、背景色、枠線などは調整できます。ただし、従来のselect要素では展開された選択肢の外観に制限があります。新しいCSS機能を使う場合は、対応ブラウザーと代替表示を確認しましょう。

Q5：JavaScriptで選択された値を取得するにはどうすればよいですか？ A5：単一選択ならselect要素のvalueプロパティで取得できます。複数選択ならselectedOptionsから選択中のoption要素を取得し、それぞれのvalueを取り出します。

まとめ：用途に合ったセレクトボックスを選ぶ判断基準

セレクトボックスは、決まった選択肢から値を入力してもらうための基本的なフォーム部品です。HTMLのselect要素とoption要素を理解すれば、初期値、必須入力、無効化、複数選択といった機能を比較的少ないコードで実装できます。

CSSで外観を整える場合は、通常時のデザインだけでなく、フォーカスや無効状態の表示、スマートフォンでの操作性まで確認する必要があります。2026年に利用できる新しいカスタマイズ機能も選択肢になりますが、対応ブラウザーの違いを踏まえた設計が欠かせません。

JavaScriptとの連携では、changeイベントを使った選択値の取得や画面更新が基本です。複数選択ではselectedOptionsを使い、フォーム送信時には入力値が正しいかをサーバー側でも検証します。

【プロの結論】一般的なフォームには標準のselect要素を使い、まずはラベル付け、入力検証、レスポンシブ対応を確実に整えることが実用的です。独自デザインやJavaScriptによる拡張は、標準機能では満たせない要件がある場合に選びましょう。見た目の自由度だけでなく、使いやすさ、アクセシビリティ、保守性まで含めて判断することが、長く使えるセレクトボックスにつながります。

関連：ツムツム セレクトボックス｜ツムツム セレクトボックス 引くべき