記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

【HTML】プルダウンの作成+カスタマイズ方法(サンプルコード付き)

プルダウンの作成方法を初心者の方向けに紹介。 プルダウンの作成方法に加え、加える事のできる属性、カスタマイズ方法を紹介。 また良く使用されるプルダウンメニューをコピペで使用できるようにしました。全てサンプルコード付きなので実際に手を動かして学ぶことができ、初心者の方も安心して理解する事ができます。

カテゴリ: HTML/CSS

こんにちは!
最近、WEB制作をはじめたけど「プルダウンの作成方法を知りたい・・!」「プルダウンのサンプルコードが欲しい・・!」「プルダウンをオリジナルデザインにカスタマイズしてみたい・・!」
そのように悩んでいる初心者WEB製作者の方も多いのではないでしょうか?
私も制作をはじめたばかりの頃、作成方法がわからずに悩んでいた時期がありました。
プルダウンの作成ができるようになると、WEB制作の幅が広がり初心者から一歩抜け出すことができるでしょう。
今回は、「プルダウンの作成方法」「プルダウンのサンプルコード」「プルダウンのカスタマイズ方法」を中心に詳しく解説していきます。

プルダウンとは

プルダウン↓

一度は見たことあるのではないでしょうか? 入力フォームの選択ボタンであり、複数選択の中から「1つだけを」選択をしてもらボタンです。 ここまでの定義では「ラジオボタン」と同じです。 ラジオボタンも複数選択の中から「1つだけを」選択をしてもらボタンです。 下記ラジオボタン例

ラジオボタン↓
男性 女性

では何が違う(使い分けになる)のでしょうか? 結論は、「選択肢の数」にあります。 ラジオボタンは3〜5点の選択肢、それ以上の選択肢になるとプルダウンを使用するようにしましょう。
理由は2点あります
①ラジオボタンはWEBページ上に全ての選択肢が表示される、下記のような状態です。

項目1 項目2 項目3 項目4 項目5 項目6 項目7 項目8 項目9 項目10

選択肢が多すぎるとページ上にラジオボタンの項目が表示されすぎてしまい、
見栄えが悪く、使いづらくなってしまいます。
これに対しプルダウンは、選択肢の内容をボックス内に隠して置けるので、選択肢が多くても表示がスマートになります。

②プルダウンはクリックが2回必要

プルダウン↓

プルダウンの2回のクリックに対して、ラジオボタンは1回のクリックで済みま す。
アンケートフォームのような選択肢が多いフォーム送信の場合は、クリック回数が1回違うだけでも使いやすさに大きな差が出ます。

2点の理由から、選択肢が3〜5個以内だとラジオボタン、選択肢が5個以上の多い場合だとプルダウンを選択した方が良いでしょう。

一つだけを選択してもらいたい具体例

一つだけを選択してもらいたい場合とは、具体的にどの様な場合かを解説します。

●性別の選択(ラジオボタンが良い。選択肢が男女の2点)
●支払い方法の選択(ラジオボタンが良い。クレジット、現金など項目が少ない場合は)

●都道府県(プルダウンが良い。47都道府県あるため)
●生年月日(プルダウンが良い。それぞれ項目が多いため)

上記例の様に、選択肢の中から2つ選択されたら矛盾が生じて困る。
1つだけを選択してもらいたい場合に使用します。

○チェックボックス

少しチェックボックスについても触れておきます。 チェックボックスは下記のようなものです。

チェックボックス↓

チェックボックスは、複数選択の中から選択をしてもらい「複数回答」できるボタンです。 今回はプルダウンについて解説していきますので、チェックボックスについて詳しく知りたい方はこちらを参照してみて下さい。
https://www.tagindex.com/html_tag/form/input_checkbox.html

ラジオボタンについて詳しく知りたい方はこちらを参照にしてみて下さい。
https://www.tagindex.com/html_tag/form/input_radio.html

プルダウンの使い方・設置方法

シンプルなプルダウンを作成する方法

サンプルコード表示結果

これを作る↓

項目1〜項目10までを選択してもらうプルダウンボックスを作成します。

HTMLサンプルコード

それぞれのタグ・属性について解説

○selectタグ

selectタグで、ドロップダウンメニューを作成します。 <select>〜</select>タグ内に表示したいドロップダウンメニューを記入します。

○optionタグ

optionタグでドロップダウンメニューに表示される項目を作成します。 <option>〜</option>タグ内に表示したい項目を記入します。

○name属性

name属性は、「このselectフィールド(プルダウン)が何を表しているのか」をわかりやすくするためのものです。 今回の例では、「name=”item”」と記入したので、このプルダウンは「item」を表しているプルダウンだとプログラム側にも送ることができます。

○value属性

プログラム側に項目の値を渡す事ができる、属性です。
今回の例で説明すると

上記のうち「項目1」が選択されたとします。 項目1には、「value=”item1”」を指定していますので、「項目1」が選択されるとプログラム側に「value=”item1”」が送信されます。
value属性を指定する事により、何が選択されたかをプログラム側に伝える事ができます。

○WEBページへの表示項目の記載

WEBページへの表示項目の記載は<option value=”item1”>〇〇</option>の〇〇に表示したい項目を記載します。

ここまでが、基本項目の記載でした、ここからはプルダウンに関係する様々な属性を紹介します、追加して様々な機能を表示していきましょう。

プルダウンに属性を追加して機能を充実させよう

optgroup属性

optgroup属性は選択項目の一覧がよりわかりやすいように、項目の前に大分類を表示してくれます。下記の様に「[ヨーロッパ] フランス、スペイン、イギリス」 「[アジア] 日本、中国、韓国」
※説明写真

サンプルコード表示結果

これを作る↓

HTMLサンプルコード

selected属性

selected属性を指定すると、最初から選択された項目を表示する事ができます。 下記の様な状態です。最初から項目3が表示されています。

サンプルコード表示結果

これを作る↓

HTMLサンプルコード

※解説
最初から表示しておきたい項目に、selected属性を指定しておく事により(今回の例だと項目3)表示することができています。

size属性

size属性はメニューの表示桁数を指定します。size属性の値を1にするとプルダウンメニューになり、2以上の指定でリスト形式になります。 今回は「size=”3”」を指定してみます。

サンプルコード表示結果

これを作る↓

HTMLサンプルコード

※解説
項目3までが表示された、リスト形式のメニューになりました。

multiple属性

multiple属性は、指定されたメニューから複数を選択できる属性です。 size属性と合わせて使用される事が多いです。

サンプルコード表示結果

これを作る↓

HTMLサンプルコード

※解説
size属性で5つのリスト形式のメニューにし、multiple属性で複数選択可にしています。注意点として、CtlキーまたはShiftキーを押しながらリストをクリックして複数選択して下さい。

disabled属性

disabled属性を選択すると、指定された項目は選択不可になります。 下記の様な状態です。

サンプルコード表示結果

これを作る↓

HTMLサンプルコード

※解説
disabled属性を選択すると、指定された項目は選択不可になります。 今回は項目3に指定した為、項目3が指定不可になっています。

よく使うプルダウンサンプルコード

都道府県を選択するプルダウンサンプルコード

サンプルコード表示結果

これを作る↓

HTMLサンプルコード

月を選択するプルダウンサンプルコード

サンプルコード表示写真

これを作る↓

HTMLサンプルコード

日を選択するプルダウンサンプルコード

サンプルコード表示写真

これを作る↓

HTMLサンプルコード

西暦を選択するプルダウンサンプルコード

サンプルコード表示写真

これを作る↓

HTMLサンプルコード

プルダウンのカスタマイズ

プルダウンメニューをカスタマイズする事ができます。 例えば下記の状態です。

サンプルコード表示写真

これを作る↓

サンプルコードHTML

CSSサンプルコード

※解説
まずはデフォルトでのセレクトボックスのスタイルを解除します。 「-moz-appearance: none;」「-webkit-appearance: none;」「 appearance: none;」この項目がそれに当たります。
オリジナルのセレクトボックスを作成。 「 background-color: #FFFF00;」、「border: solid 1px #000000;」でセレクトボックスの枠線、カラーを設定します。
三角マークの作成。 「background-image」、「background-size」を使用しプルダウンの三角マークを作成します。
カスタマイズのCSSは少し難しいですが、値を変えてみるとどこが変化するのかがわかるので調整してみて下さい。

まとめ

今回は「プルダウンの作成方法」「プルダウンのサンプルコード」「プルダウンのカスタマイズ方法」を中心に紹介してきました。

ポイントを簡単にまとめます。

①プルダウン作成の基本

<select>〜</select>タグ内に<option>〜</option>タグを記入し表示したい項目を記入し、プルダウンを表示させます。

②コピペで使用できるプルダウンサンプルコードを4点紹介
1.「都道府県を選択するプルダウンサンプルコード」
2.「月を選択するプルダウンサンプルコード」
3.「日を選択するプルダウンサンプルコード」
4.「西暦を選択するプルダウンサンプルコード」


③プルダウンのカスタマイズ
デフォルトのプルダウンのスタイルを解除し、オリジナルのプルダウンをCSSで作成する事で、カスタマイズする事ができました。


いかがだったでしょうか?
プルダウンの作成ができる様になると、WEB制作の幅がより一層増えます。今回の記事を参考にして頂けたら幸いです。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。