HTMLのフォーム内でセレクトボックスを作成したい！そんな時に便利な＜select＞タグをご存じですか？
＜select＞タグとは？実際の使い方を知りたい！
今回は、selectタグの
・基本的な使い方
・類似タグ<option>タグとの違い
・selectタグの装飾方法（CSS）
について説明します。さらに細かな設定を行うためのサンプルコードを多数掲載！
目次
selectタグとは
selectタグの読み方
selectタグは「セレクトタグ」と読みます。
selectタグの説明
selectタグはフォーム内の、セレクトボックスを作成するためのタグです。初期値が決まっていますが、CSSで装飾し、選択肢の表示行数などの詳細を設定することも可能です。
selectタグで利用できる属性
selectタグではグローバル属性に加え、以下の属性を使うことができます。
| 属性 | 説明 |
|---|---|
| autocomplete | 要素に入力される内容をブラウザ側で自動補完するのを許可するかどうかを指定する属性です。 |
| autofocus | ブラウザが読み込みをしたときに、要素に自動でフォーカスをあてるかどうかを決める事ができる属性です。 |
| disabled | ユーザーによる操作を無効にするかどうかを指定する属性です。 |
| form | input要素が所属するform要素を指定する属性です。 |
| multiple | 複数の値を指定出来るかどうかを定義する属性です。 |
| name | 要素の名前を定義する属性です。 |
| required | 入力が必須の要素かどうかを定義する属性です。 |
| size | 要素の幅を指定する属性です。要素のtype 属性がtextもしくはpasswordのときは、文字数を指定します。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 12 |
| Firefox | 1 |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 4 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
selectタグの基本的な使い方
selectタグの使い方
selectタグはフォーム内で、セレクトボックスを生成するための要素です。必ずoptionタグとセットで使用します。
selectタグの中にoptionタグを書き、optionタグにはセレクトボックス内の選択肢を記載します。optionタグのvalue属性は、実際にサーバに送信される値を設定しました。一番先頭の「–選択」は、選択肢ではないため、valueの値は設定していません。
See the Pen
select基本 by rabbittyu (@rabbittyu)
on CodePen.
selectタグと類似する<option>タグとの違い
ここで混同しやすいポイントをご紹介します。selelctタグとoptionタグはセットで使用するタグですが、selelctタグはセレクトボックス自体を生成するタグで、optionタグは選択肢を記述するタグです。
セレクトボックスを扱うタグという点では似ていますが、混同しないように注意しましょう。
selectタグの実用的な装飾方法（CSS）
セレクトボックスの設定は、JavaScriptとCSSの両方を用いることでより動的な変更を加えられますが、ここでは簡単に見た目だけを変更してみました。
セレクトボックスの配置設定はdiv要素を使って行います。位置が設定できたら、続いてセレクトボックス本体の設定をしましょう。
セレクトボックス本体のサイズ、背景色、文字色を変更する際は、selectタグを指定してください。class要素を用いて、任意の名前をつけることもできます。ここでは特に指定していませんが、複数のセレクトボックスがあるときはこのclass属性を用い、CSSを適用する範囲を細かく設定することができます。
See the Pen
select 応用① by rabbittyu (@rabbittyu)
on CodePen.
まとめ
今回はselectタグについて解説しました。
- selectタグはセレクトボックスの本体を生成する
- selectタグの中にoptionタグを入れて、選択肢を作成する
以上の2点がポイントになります。セレクトボックスはデフォルトでも十分実用的ですが、ユーザーにとって見やすいようにサイズを大きくしたり、フォームのデザインに合わせて色を変化させたり、装飾次第で自由自在にアレンジできます。
selectタグをマスターし、実際にフォームを作成するという段階にいる方は、ぜひ装飾にも挑戦してみてくださいね。
参考文献：
MDN web docs <select>:HTML 選択要素
TECH ACADEMY
〔 〕選択プルダウン(SELECT～OPTION)をおしゃれにするCSSスニペット13選
