2024.07.19
ChatGPTにクラス名を付けてもらってみた
- コーディング
WEB制作のあれこれがわかる！
WEB制作のあれこれがわかる！
今回は、作る機会が多いものの、コーディングに時間がかかってしまいがちなセレクトボックスについてご紹介します！
目次
セレクトボックスとは、フォームなどでよく見かけるこちらのようなものです。
ほかにも、フォームでよく使われる選択のためのツールとしては、ラジオボタン/チェックボックスがあります。
それぞれの違いは以下の表のとおりです。
| 特徴 | 見た目 | プロパティ | |
| セレクトボックス | ・複数の選択肢から1つを選択（※） ・プルダウン式なので見た目は1行 |
|
selectoptionlabel |
| ラジオボタン | ・複数の選択肢から1つ選択 ・選択肢が並んでいる ・1つをチェックすると他のチェック項目が無効になる |
 |
inputlabel |
| チェックボックス | ・複数の選択肢から複数選択 ・選択肢が並んでいる |
 |
inputlabel |
※ HTML5からmultipleを使用することで複数選択できるセレクトボックスを作成することもできるようになりましたが、セレクトボックスは1つのみ選択できる場面で使用されることが非常に多いです。
違いを認識して、場面にあったプロパティを使用するようにしたいですね。
今回の記事では、このうちセレクトボックスについて詳しくみていきたいと思います！
まずはシンプルなセレクトボックスの例です。
See the Pen by spiqa design (@spiqa_design) on CodePen.
見た目を少し整えるためにCSSも記述していますが、セレクトボックスの機能はHTMLだけで作ることができます。
<select name="hardness">
<option value="針金">針金</option>
<option value="ばり硬">ばり硬</option>
<option value="硬麺">硬麺</option>
<option value="普通" selected>普通</option>
<option value="やわ">やわ</option>
<option value="ばりやわ">ばりやわ</option>
</select>シンプルなセレクトボックスはselectとoptionで作成することができます。
optionの数 ＝ 選択肢の数になるので、選択肢を増やしたい場合はoptionを増やしてください。
optionのプロパティに設定しているvalue属性は、「何を選んだのか」という情報になります。<option value="red">赤色</option>のように、選択肢と同じ情報を設定することが一般的です。
そして、optionで作成した複数の選択肢をselectで囲みます。
selectのプロパティに設定しているname属性は、「この選択肢群のグループの名前」です。
上記の例では、麺の硬さに関する選択肢が並んでいるのでname属性は「硬さ(hardness)」にしています。
セレクトボックスは、デフォルトでは1つ目の選択肢が初期値になっています。
初期値を変更したい場合は、selected属性を追加します。
上記の例では「普通」の選択肢にselected属性を記述しているので、初期値が「普通」になっていますね。
ここまでセレクトボックスの機能面についてみてきましたが、ここからは見た目（デザイン）についてご説明したいと思います。
selectはインラインブロック要素なので、デフォルトでは文字の長さに応じた幅になります。
この幅は、widthで簡単に調整することができます！
See the Pen by spiqa design (@spiqa_design) on CodePen.
おすすめの設定方法は、selectをdivで囲い、selectにwidth:100%を指定する方法です。selectの幅は親要素であるdivと同じ幅になるので、レスポンジブ調整も行いやすいですね！
おしゃれなセレクトボックスを作りたい時に気になるのが矢印のデザインです。
セレクトボックス矢印は端末やブラウザによって異なりますが、CSSで簡単にカスタマイズ可能です！
カスタマイズ方法の詳細は、こちらの記事をご覧ください！
セレクトボックスは意外と使用頻度が高いです。
フォームに設置されることも多く、コンバージョン率を左右する要素の1つでもあると思います！
わかりやすく、使いやすい、そしておしゃれなセレクトボックスを作れるようになりたいですね！
こちらもおすすめ
RECOMMEND
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design
https://spiqa.design/