SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

HTMLのselectタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 8:07動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、リファレンス解説です。
  3. 0:04HTMLタグ編の二十八本目は、セレクトタグです。
  4. 0:08セレクトは、あらかじめ用意された候補の中から、利用者に選んでもらうための入力部品です。
  5. 0:15都道府県や講座名のように、答えが限られている場面でよく使われます。
  6. 0:21閉じた状態では選んだ項目が一行で表示され、クリックすると一覧が開く、いわゆるドロップダウンの形が一般的です。
  7. 0:29今回は基本の書き方、主な属性、コード例、注意点までを、初心者向けに順番に解説します。
  8. 0:36フォームの中でも特によく登場する部品なので、仕組みを早めに理解しておくと、
  9. 0:42申し込み画面や設定画面を読む力もぐっと上がります。
  10. 0:47セレクトが向いているのは、選ぶ答えがあらかじめ決まっている場面です。
  11. 0:52たとえば都道府県、参加する講座、商品の個数など、利用者に文字を打たせるより、
  12. 0:58候補から選んでもらう方が入力ミスを防げますし、受け取る側もデータをそろえやすくなります。
  13. 1:05逆に候補が何十件もあって探しにくい場合や、候補にない答えも受け付けたい場合は、
  14. 1:10テキスト入力や検索できる仕組みの方が向いています。
  15. 1:15候補が数件で同時に見比べたいときはラジオボタン、複数自由に選ばせたいときはチェックボックスも選択肢になります。
  16. 1:23選ばせる設計は、利用者の負担を減らすだけでなく、表記ゆれのないきれいなデータを集めることにもつながります。
  17. 1:31基本の構造はとてもシンプルです。
  18. 1:34セレクトには開始タグと終了タグがあり、その内側にオプシヨンを並べます。
  19. 1:40一つのオプシヨンが一つの候補です。
  20. 1:43利用者が候補を選ぶと、そのオプシヨンに設定された値が、フォームの送信データとして送られます。
  21. 1:51画面に表示される文字と、実際に送られる値は分けて考えられます。
  22. 1:56表示は分かりやすい日本語、値は短い英数字のコードにするのがよくある書き方です。
  23. 2:03入れ子の順番を逆にしたり、セレクトの外にオプシヨンを置いたりしないよう注意しましょう。
  24. 2:10この親子の関係がセレクトの土台ですので、まずはこの形を手で写して覚えるのが近道です。
  25. 2:17記事の活用事例を見てみましょう。
  26. 2:20まずラベルで、この選択欄が講座を選ぶものだと説明し、フォー属性とセレクトのアイディーをそろえます。
  27. 2:27セレクトにはネームとリクワイアドを付けます。
  28. 2:30最初のオプシヨンは、値が空で、選んでください、という案内です。
  29. 2:35これが未選択の状態を表し、リクワイアドと組み合わせることで、選ばずに送信することを防げます。
  30. 2:42続く二つのオプシヨンが、本当の候補です。
  31. 2:45選んだ講座の値、エイチティーエムエルやシーエスエスが、コースという名前で送信されます。
  32. 2:52ブラウザーで開いたら、実際に候補を切り替えて、画面の表示がどう変わるかも観察してみてください。
  33. 2:59ここからは主な属性を確認します。
  34. 3:01まずネームは、送信時の項目名です。
  35. 3:04ネームがないと、選んだ値がフォームのデータに含まれないことがあるので、送信する選択欄には必ず付けましょう。
  36. 3:12次にリクワイアドは選択を必須にする真偽属性です。
  37. 3:15先頭に空の値の案内を用意しておくと、未選択のままでは送信できません。
  38. 3:21最後にディスエーブルドは、操作自体を無効にする属性です。
  39. 3:25無効化された部品は選べなくなり、通常は送信対象にもなりません。
  40. 3:29理由もなく無効化すると利用者が困るので、条件がそろったときにだけ有効化する、
  41. 3:33といった設計とセットで使います。
  42. 3:37属性は暗記するより、送信されるかどうか、操作できるかどうか、という観点で整理すると覚えやすくなります。
  43. 3:45続いて応用的な属性です。
  44. 3:47マルチプルを付けると、複数の候補を同時に選べるようになります。
  45. 3:51その場合、見た目はドロップダウンではなく、一覧が開いたリストの形になることが多く、
  46. 3:56サイズ属性で表示する行数の目安を指定できます。
  47. 4:01ただし複数選択は操作方法が端末で異なり、初心者には伝わりにくいこともあるので、
  48. 4:06案内文を添えるか、チェックボックスで代用できないかも検討してください。
  49. 4:12オートコンプリートは自動入力に関する指定で、用途に応じた目安として使いますが、
  50. 4:16セレクトでは必須の場面は多くありません。
  51. 4:21実際に使う前に、パソコンとスマートフォンの両方で、操作感がどう変わるかを確かめる習慣を付けましょう。
  52. 4:28オプシヨン側のポイントも押さえましょう。
  53. 4:31バリュー属性は、実際に送信される値です。
  54. 4:34省略すると、オプシヨンに書かれた表示文字そのものが値として送られますが、
  55. 4:40表示を後から変えてもデータが変わらないよう、通常はバリューを明示しておくのが安全です。
  56. 4:46最初から選ばれた状態にしたい候補には、セレクテッド属性を付けます。
  57. 4:50ただし利用者の答えを勝手に決めてしまう形にならないよう、既定値には慎重さが必要です。
  58. 4:57迷う場合は、先頭の案内を初期表示にして、利用者自身に選んでもらう形が無難です。
  59. 5:02表示名を直しても送信データが変わらない設計にしておくと、サイトのリニューアルにも強くなります。
  60. 5:09候補が増えてきたら、オプトグループでグループ化できます。
  61. 5:13オプトグループはセレクトの中に置き、ラベル属性でグループ名を示し、その中にオプシヨンを並べます。
  62. 5:20たとえば講座なら、入門と応用に分けるだけで、利用者は目的の候補を探しやすくなります。
  63. 5:26グループ名自体は選べる候補ではありません。
  64. 5:29あくまで見出しです。
  65. 5:31関連するタグとして、オプシヨンとオプトグループはセレクトとセットで覚えると整理しやすくなります。
  66. 5:38候補が少ないうちは無理に分ける必要はありません。
  67. 5:41グループ化は、見た目の飾りではなく、情報を探しやすくするための構造だと考えてください。
  68. 5:47使いやすさの要はラベルです。
  69. 5:50セレクト単体では、何を選ぶ欄なのかが伝わりません。
  70. 5:54ラベル要素を使って、講座や都道府県といった目的を文字で示し、フォー属性とセレクトのアイディーを一致させて関連付けましょう。
  71. 6:04ラベルをクリックしても選択欄にフォーカスが移るので、操作の助けにもなります。
  72. 6:10標準のセレクトはキーボードのタブ移動や矢印キーでも操作できます。
  73. 6:15その利点を損なわないよう、独自の見た目に作り替えすぎないことも大切です。
  74. 6:21三百二十ピクセル程度の狭い画面や文字拡大でも、候補名が欠けないか確認してください。
  75. 6:28音声読み上げを使う方にとっても、ラベルの関連付けは内容を理解するための大切な手がかりになります。
  76. 6:35ブラウザー互換性は安心できる部類です。
  77. 6:38記事が参照するエムディーエヌの記録では、セレクト要素本体はクローム、エッジ、
  78. 6:44ファイアフォックス、サファリのいずれでもごく初期のバージョンから対応しています。
  79. 6:50リクワイアドやオートコンプリートなど、後から追加された属性は対応開始が少し遅れますが、
  80. 6:54現在では広く使えます。
  81. 6:58よくある間違いは真偽属性の扱いです。
  82. 7:01ディスエーブルド、ドット、イコール、フォルス、と書いても無効化は解除されません。
  83. 7:07真偽属性は書いてあるだけで有効なので、外したいときは属性ごと取り除きます。
  84. 7:13また選択画面の見た目はオペレーティングシステムやブラウザーで異なるため、
  85. 7:17特定の外観を前提にデザインしないでください。
  86. 7:22最後に練習とまとめです。
  87. 7:23セレクトは、限られた候補から選んでもらう入力部品で、中にオプシヨンを並べるのが基本でした。
  88. 7:30大切なポイントは三つです。
  89. 7:31一つ目は、ラベルで目的を伝え、ネームで送信名を決めること。
  90. 7:35二つ目は、値が空の先頭候補とリクワイアドを組み合わせて、未選択を防ぐこと。
  91. 7:41三つ目は、候補が多いときはオプトグループで整理し、複数選択は本当に必要か考えることです。
  92. 7:47練習として、記事の講座選択の例を写し、候補を一つ増やしたり、初期選択を変えたりして、
  93. 7:51表示と送信値の違いを確かめてみてください。
  94. 7:56小さく試して、仕組みを確認しながら少しずつ候補や属性を増やしていくのが、
  95. 7:59確実な上達方法です。
  96. 8:02お疲れさまでした。
  97. 8:03次回もエイチティーエムエルタグの解説を続けましょう。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

selectタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。候補から選ぶ入力。option を子に置き、label で目的を伝えます。

解説記事・サンプルコードを読む：HTMLのselectタグとは？属性・使い方・ブラウザー互換性と活用例 →