HikoPro Blog

IT・テクノロジーで生活と仕事をもっと豊かに

【HTML初心者向け】selectタグを使ってセレクトボックス、プルダウンメニューを作る方法

約8分
About|HikoPro

About|HikoPro

1998年生まれ|ITライフクリエイター
Webクリエイター|YouTuber|Blogger

学生時代は、タイピングのテストでクラス最下位レベルのパソコン音痴。
もっと自分の市場価値を高めたいと思い、、、
▷バンコク不動産▷インドIT留学▷ベトナムIT企業エンジニアを経て
Web系のフリーランスとして独立。

その後もっと大きい市場でインパクトのあることをしたいと思い、
ITメガベンチャーに就職。

#GoProAwards受賞 #14ヵ国渡航 #Z大学創業者 #ネコ好き

YouTube

I make videos of computer hack information and useful applications that
enrich people's work and life.


PC Hack

Web Create

Life Style

【HTML初心者向け】selectタグを使ってセレクトボックス、プルダウンメニューを作る方法
HikoPro
HikoPro

こんにちは!大学生クリエイターでWebライター|エンジニア|YouTuberとして活動していますHikoProです! 最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています!

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

Hiko
Hiko

こんな感じに言語選択メニューやユーザーに何かを選択させたい時によく使われるので、しっかり抑えておきましょう!

セレクトボックスがよく使われる場面
  • 言語選択
  • 個数、数量の選択
  • 地域、国の選択
  • 性別の選択

よく見かけるのは、何かのサービスに登録する時に地域選択や性別の選択をする際によく見かけますね!その他様々な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だけのセレクトボックスはなんだか、シンプルだなぁ〜

Hiko
Hiko

コピペOKの簡単なカスタマイズをご紹介しますね!

See the Pen KLOqEK by Shinichi Hikosaka (@shinichi-hikosaka) on CodePen.

「セレクトボックス CSS」などでググると沢山おしゃれなカスタマイズがあるので、ぜひ試してみて下さい!

selectタグを使ってセレクトボックスを作る方法まとめ

ネコ君
ネコ君

セレクトボックスを作るときは<select>と<option>を使うのを忘れない事だね!

webサイトやお問い合わせフォームでよく使われるので、いつでも使えるように沢山練習しましょう!

最後までご覧いただきありがとうございました!

HikoPro
HikoPro

Leave A Reply

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)