最終更新HTMLの<select>セレクトタグと<option>オプションタグを使うと、セレクトボックスを設置できます。value="yellow">黄</option></select>すべて表示セレクトボックスとは、複数の選択肢の中からどれかを選んでもらうボックスのことです。プルダウンメニューと呼ばれたりもします。<select>と<option>によるセレクトボックスの見た目と操作は、ブラウザやプラットフォームにより異なります。iOS(iPhone)ではこのようになります。Androidのブラウザでセレクトボックスをタップすると、このような選択ウィンドウが開きます。このページでは<select>タグと<option>タグの基本的な使い方や、CSSでデザインを変える方法などを解説します。...</select>👆セレクトボックスを作るときのざっくりとしたHTMLの構造は次のようになります。全体をselectで囲む1つのセレクトボックスのまとまりは<select>タグで囲みます。この中に選択肢を入れていくことになります。value="値">表示テキスト</option>により、1つの選択肢(オプション)が追加されます。<option>の数は、必要になった選択肢の数だけ増やせばOKです。value属性が値になるセレクトボックスの値として使われるのは<option>タグのvalue="ここ"です。value="red">赤</option>が選択されている場合、そのセレクトボックスの値はredとなります。name="ここ">の部分でセレクトボックスに名前をつけます。👆name="color"は、このセレクトボックスの名前がcolorであることを表します。フォームを送信したときにcolor=選択された値のような形で送られるため、受け取った側はどの値が、どの入力欄に対応しているのか分かります。赤(value="red")を選択して送信するとcolor=redという情報が送られます。✍️このようなname属性の使い方は<input>で使うときと同じです。value="yellow">黄</option></select>すべて表示selectedが指定された「青」がデフォルトに👆初期値(デフォルト値)にしたい選択肢の<option>には、selected属性を指定しましょう。selectedが指定されたオプションは、ページが読み込まれた時点で選択された状態になります。✍️selectedのメモ何も指定しなかった場合、いちばん上の<option>がデフォルトで選ばれます。selected="selected"としても同じですが、selectedとだけ書けばOKです。selectedは1つのセレクトボックス(<select>)の中で、1回だけ使用できます。value="">のように値が空白のオプションをいちばん上に配置しておきます。空白のオプションにも「色を選択」のようなテキストを入れておきましょう。みたときにユーザーが何のプルダウンなのか把握しやすくなります。空白値が選ばれたまま送信するとエラーに👆なんらか選択肢を選んでもらいたい場合は<select>タグにrequired属性を指定しましょう。これにより空白のオプションを選択したままフォームを送信しようとするとエラーが表示されるようになります。✍️あくまでもブラウザによるブラウザ上だけでのエラーチェックです。やろうと思えば空の値でも送信できてしまうので、できればサーバー側でもチェックするのが良いでしょう。応用編optgroupタグでオプションをグループ分け選択肢を整理したいときには<optgroup>タグを使ってグループ分けすると良いでしょう。👆具体的には、まとめたい<option>たちを<optgroup>で囲みます。label="◯◯">というようにlabelを指定すると、グループに名前をつけられます。プルダウンメニューがこのような表示になります。labelで指定した名前ごとに、選択肢が分けられます。参考までにこちらはiOSでの表示です。選択肢が多すぎると、たくさんスクロールしなければならなくなり、ユーザー体験が損なわれることに注意しましょう。👆<select>タグにmultiple属性を指定すると、選択肢の中から複数のオプションを選べるようになります。multipleが指定された複数選択可能なセレクトボックスは、プルダウンメニューではなくなります(表示のされ方はブラウザにより異なります)。multiple>の使用はおすすめしません。複数選べることが分かりづらく、ブラウザにより表示が大きく変わる点も厄介だからです。type="checkbox">)を使いましょう。type="radio">)があります。黄</label>すべて表示どれか1つだけを選べるセレクトボックスとラジオボタンのどちらを使うのかは、以下の表を参考に決めると良いでしょう。😿ごちゃっとする👆選択肢が10個以下くらいのときは、選ぶ手間の小さいラジオボタンの方が良いと思います。「都道府県の選択」のように数が多い場合は、どちらかというとセレクトボックスの方が向いているでしょう。CSSでセレクトボックスのデザインを変更するCSSで変更可能な部分セレクトボックスのデザインは、CSSで部分的にカスタマイズできます。下の図のように、クリック後に開く選択肢一覧のデザインは変えられません。全体をカスタマイズしたい場合はドロップダウン系のJSライブラリを使うのが良いでしょう。ライブラリによっては検索やフィルターの機能もついています。dropdown」のように「dropdown」というキーワードを使って検索すると見つけやすいと思います。プルダウンメニューのCSSサンプル👆セレクトボックスのデザインを変更するサンプルコードを1つ紹介します。スタイリング後の見た目はこのようになります。value="">サンプル</option></select>👆HTMLでは<select>タグにstyled-selectというクラスを指定しておきます。CSSではこのクラス(.styled-select)に対してスタイルをあてていきます。😺styled-selectクラスが指定された<select>にのみスタイルが適用されます。none;}👆CSSは少し複雑ですがこのように書きます。サンプルCSSの解説ポイントとなる部分を解説をします。noneにより、ブラウザデフォルトのスタイルを解除します。複数ブラウザへの対応のため、ベンダープレフィックス(-moz-と-webkit-)も指定しておきます。*/}👆この部分で大きさや色などボックスのスタイルをがっつりと変更しています。細かな部分はお好みで調整してください。no-repeat;}👆プルダウンメニューらしく見せるため、ボックスの右端に三角の矢印を配置します。テクニカルなやり方ですがlinear-gradientを使えば、CSSだけで三角形を作ることができます。三角形の色を変えたい場合は、2箇所あるrgba(0,0,0,0.4)を好きな色コードに変えます。このようにボックス部分のスタイルは、CSSで大幅にカスタマイズすることができます。