

今回はHTMLの初心者向けにselectタグoptionタグを使ってセレクトボックス、プルダウンメニューの作り方をどのサイトよりも分かりやすく解説していきたいと思います!

こんな感じに言語選択メニューやユーザーに何かを選択させたい時によく使われるので、しっかり抑えておきましょう!
- 言語選択
- 個数、数量の選択
- 地域、国の選択
- 性別の選択
よく見かけるのは、何かのサービスに登録する時に地域選択や性別の選択をする際によく見かけますね!その他様々なwebサイトでもよく使われています!
HTML初心者の方はこれからWebサイト制作をする際に、selectタグoptionタグはとても頻繁に使う事になるのでしっかりと学んでおきましょう!
selectタグでできる事
selectタグはwebサイト上でユーザーの利便性を高めるためにとても重要になってきます。
言語を選択すると違う言語のサイトに飛ぶようにすることができる!
性別をユーザーに選択させてformタグを使ってユーザーが選択した情報を送信することも可能です!
webサイト上では主にサイトの切り替え、フォームの送信この2つの目的でselectタグが用いられています。
selectタグの基本的な書き方
このようなセレクトボックスを作るには<select>タグと<option>タグこの2つを使う必要があります。
<select name="language" class="language">
<option> Select Language </option>
<option value="jp">日本語</option>
<option value="en">English</option>
<option value="ch">中文</option>
</select>

表示させたい文字を<option>タグで囲って、それをさらに<select>タグで囲むんだね!

基本的なselectタグの書き方は選択する文字を<option>タグで囲み、それをさらに<select>タグで囲みます!
また、これだけでは何も起こらないセレクトボックスなのでformタグを使ってユーザーが選択した情報を送信させる必要があります。
送信させたい値をvalue属性に書いてあげると、選択した文字列に対応するvalue属性の値が送信されます。
formタグを使って選択した値を送信させる方法
通常selectタグはformタグと一緒に使われることが多く、ユーザーが選択した値をformタグを通してphpで処理しデーターベースに値を格納するのが一般的な使われ方です。
このようにwebサービスなどの新規画面でよく使われ、ユーザーが選択した値をformを通じて渡すのによく使われます。
<form action="send.php" method="post">
<select name="todoufuken">
<option> --- 都道府県を選択 ---</option>
<option value="tokyo">東京都</option>
<option value="osaka">大阪府</option>
<option value="aichi">愛知県</option>
</select>
<select name="sex">
<option> --- 性別 ---</option>
<option value="men">男性</option>
<option value="women">女性</option>
<option value="other">その他</option>
</select>
<input type="submit" value="送信">
</form>

このように<form>タグを使って全て丸々囲めばユーザーが選択した値を指定のファイルに送信することが可能です。
この際にinputタグで送信ボタンを作ることと、value属性を忘れないようにしましょう!
セレクトボックスを複数選択する
セレクトボックスを使ってユーザーに複数選択を促したい時にselectタグに属性をつけると可能になります。
<select name="language" multiple >
<option value="jp"> --- 話せる言語を選択して下さい(複数選択可)---- </option>
<option value="jp">日本語</option>
<option value="en">English</option>
<option value="ch">中文</option>
<option value="ch">Thailand</option>
</select>
このように selectタグの中に <select multiple>と属性を加えると複数選択できるようになります。
multiple属性を使用するとデフォルトでセレクトボックスが展開された状態になります。
セレクトボックスの行数を指定する
selectタグを使うとデフォルトで初めのoptionタグの文字列が表示されますが、属性を指定すると複数行表示することができます。
←3行表示された!
<select name="todoufuken" size="3">
<option> --- 都道府県を選択 ---</option>
<option value="tokyo">東京都</option>
<option value="osaka">大阪府</option>
<option value="aichi">愛知県</option>
<option value="hokkaido">北海道</option>
<option value="okinawa">沖縄</option>
</select>
selectタグの中に size属性を追加する事によって表示するoptionタグの数を変更することができます!
size=”3″ → 3行表示
size=”1″ → 1行表示(デフォルト)
セレクトボックスをCSSでカスタマイズ

HTMLだけのセレクトボックスはなんだか、シンプルだなぁ〜

コピペOKの簡単なカスタマイズをご紹介しますね!
See the Pen KLOqEK by Shinichi Hikosaka (@shinichi-hikosaka) on CodePen.
「セレクトボックス CSS」などでググると沢山おしゃれなカスタマイズがあるので、ぜひ試してみて下さい!
selectタグを使ってセレクトボックスを作る方法まとめ

セレクトボックスを作るときは<select>と<option>を使うのを忘れない事だね!
webサイトやお問い合わせフォームでよく使われるので、いつでも使えるように沢山練習しましょう!
最後までご覧いただきありがとうございました!
