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

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

プルダウンとは

プルダウン↓

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

ラジオボタン↓

男性女性

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

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

②プルダウンはクリックが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 name=”item”>
  <option value=”item1”>項目1</option>
  <option value=”item2”>項目2</option>
  <option value=”item3”>項目3</option>
  <option value=”item4”>項目4</option>
  <option value=”item5”>項目5</option>
  <option value=”item6”>項目6</option>
  <option value=”item7”>項目7</option>
  <option value=”item8”>項目8</option>
  <option value=”item9”>項目9</option>
  <option value=”item10”>項目10</option>
</select>

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

○selectタグ

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

○optionタグ

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

○name属性

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

○value属性

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

<select name=”item”>
  <option value=”item1”>項目1</option>
  <option value=”item2”>項目2</option>
  <option value=”item3”>項目3</option>
  <option value=”item4”>項目4</option>
  <option value=”item5”>項目5</option>
  <option value=”item6”>項目6</option>
  <option value=”item7”>項目7</option>
  <option value=”item8”>項目8</option>
  <option value=”item9”>項目9</option>
  <option value=”item10”>項目10</option>
</select>

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

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

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

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

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

optgroup属性

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

サンプルコード表示結果

これを作る↓

HTMLサンプルコード

<select name=”country”>
   <optgroup label="ヨーロッパ">
      <option value=”france”>フランス</option>
      <option value=”spain”>スペイン</option>
      <option value=”england”>イギリス</option>
   </optgroup>
    <optgroup label="アジア">
      <option value=”japan”>日本</option>
      <option value=”china”>中国</option>
      <option value=”korea”>韓国</option>
   </optgroup>
</select>

selected属性

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

サンプルコード表示結果

これを作る↓

HTMLサンプルコード

<select name=”item”>       
  <option value=”item1”>項目1</option>
  <option value=”item2”>項目2</option>
  <option value=”item3” selected>項目3</option>
  <option value=”item4”>項目4</option>
  <option value=”item5”>項目5</option>
  <option value=”item6”>項目6</option>
  <option value=”item7”>項目7</option>
  <option value=”item8”>項目8</option>
  <option value=”item9”>項目9</option>
  <option value=”item10”>項目10</option>         
</select>

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

size属性

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

サンプルコード表示結果

これを作る↓

HTMLサンプルコード

<form>
   <select name=”item” size="3">       
     <option value=”item1”>項目1</option>
     <option value=”item2”>項目2</option>
     <option value=”item3”>項目3</option>
     <option value=”item4”>項目4</option>
     <option value=”item5”>項目5</option>
     <option value=”item6”>項目6</option>
     <option value=”item7”>項目7</option>
     <option value=”item8”>項目8</option>
     <option value=”item9”>項目9</option>
     <option value=”item10”>項目10</option>         
   </select>
</form>

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

multiple属性

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

サンプルコード表示結果

これを作る↓

HTMLサンプルコード

<select name=”item” size="5" multiple>       
   <option value=”item1”>項目1</option>
   <option value=”item2”>項目2</option>
   <option value=”item3”>項目3</option>
   <option value=”item4”>項目4</option>
   <option value=”item5”>項目5</option>
   <option value=”item6”>項目6</option>
   <option value=”item7”>項目7</option>
   <option value=”item8”>項目8</option>
   <option value=”item9”>項目9</option>
   <option value=”item10”>項目10</option>         
</select>

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

disabled属性

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

サンプルコード表示結果

これを作る↓

HTMLサンプルコード

<form>
   <select name=”item”>       
     <option value=”item1”>項目1</option>
     <option value=”item2”>項目2</option>
     <option value=”item3” disabled>項目3</option>
     <option value=”item4”>項目4</option>
     <option value=”item5”>項目5</option>
     <option value=”item6”>項目6</option>
     <option value=”item7”>項目7</option>
     <option value=”item8”>項目8</option>
     <option value=”item9”>項目9</option>
     <option value=”item10”>項目10</option>         
   </select>
</form>

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

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

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

サンプルコード表示結果

これを作る↓

HTMLサンプルコード

<form>
 <select name="pref">
   <option value="">都道府県</option>
   <option value="北海道">北海道</option>
   <option value="青森県">青森県</option>
   <option value="岩手県">岩手県</option>
   <option value="宮城県">宮城県</option>
   <option value="秋田県">秋田県</option>
   <option value="山形県">山形県</option>
   <option value="福島県">福島県</option>
   <option value="茨城県">茨城県</option>
   <option value="栃木県">栃木県</option>
   <option value="群馬県">群馬県</option>
   <option value="埼玉県">埼玉県</option>
   <option value="千葉県">千葉県</option>
   <option value="東京都">東京都</option>
   <option value="神奈川県">神奈川県</option>
   <option value="新潟県">新潟県</option>
   <option value="富山県">富山県</option>
   <option value="石川県">石川県</option>
   <option value="福井県">福井県</option>
   <option value="山梨県">山梨県</option>
   <option value="長野県">長野県</option>
   <option value="岐阜県">岐阜県</option>
   <option value="静岡県">静岡県</option>
   <option value="愛知県">愛知県</option>
   <option value="三重県">三重県</option>
   <option value="滋賀県">滋賀県</option>
   <option value="京都府">京都府</option>
   <option value="大阪府">大阪府</option>
   <option value="兵庫県">兵庫県</option>
   <option value="奈良県">奈良県</option>
   <option value="和歌山県">和歌山県</option>
   <option value="鳥取県">鳥取県</option>
   <option value="島根県">島根県</option>
   <option value="岡山県">岡山県</option>
   <option value="広島県">広島県</option>
   <option value="山口県">山口県</option>
   <option value="徳島県">徳島県</option>
   <option value="香川県">香川県</option>
   <option value="愛媛県">愛媛県</option>
   <option value="高知県">高知県</option>
   <option value="福岡県">福岡県</option>
   <option value="佐賀県">佐賀県</option>
   <option value="長崎県">長崎県</option>
   <option value="熊本県">熊本県</option>
   <option value="大分県">大分県</option>
   <option value="宮崎県">宮崎県</option>
   <option value="鹿児島県">鹿児島県</option>
   <option value="沖縄県">沖縄県</option>
   </select>
 </form>

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

サンプルコード表示写真

これを作る↓

HTMLサンプルコード

<select name=”month”>
   <option value=””>月を選択</option>
   <option value=”jan”>1月</option>
   <option value=”feb”>2月</option>
   <option value=”mar”>3月</option>
   <option value=”apr”>4月</option>
   <option value=”may”>5月</option>
   <option value=”jun”>6月</option>
   <option value=”jul”>7月</option>
   <option value=”aug”>8月</option>
   <option value=”sep”>9月</option>
   <option value=”oct”>10月</option>
   <option value=”nov”>11月</option>
   <option value=”dec”>12月</option>
</select>

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

サンプルコード表示写真

これを作る↓

HTMLサンプルコード

<select name="day">
   <option value="">日付を選択</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
   <option value="6">6</option>
   <option value="7">7</option>
   <option value="8">8</option>
   <option value="9">9</option>
   <option value="10">10</option>
   <option value="11">11</option>
   <option value="12">12</option>
   <option value="13">13</option>
   <option value="14">14</option>
   <option value="15">15</option>
   <option value="16">16</option>
   <option value="17">17</option>
   <option value="18">18</option>
   <option value="19">19</option>
   <option value="20">20</option>
   <option value="21">21</option>
   <option value="22">22</option>
   <option value="23">23</option>
   <option value="24">24</option>
   <option value="25">25</option>
   <option value="26">26</option>
   <option value="27">27</option>
   <option value="28">28</option>
   <option value="29">29</option>
   <option value="30">30</option>
   <option value="31">31</option>
</select>

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

サンプルコード表示写真

これを作る↓

HTMLサンプルコード

<select name="year">
   <option value="">西暦を選択</option>
   <option value="1900">1900</option>
   <option value="1901">1901</option>
   <option value="1902">1902</option>
   <option value="1903">1903</option>
   <option value="1904">1904</option>
   <option value="1905">1905</option>
   <option value="1906">1906</option>
   <option value="1907">1907</option>
   <option value="1908">1908</option>
   <option value="1909">1909</option>
   <option value="1910">1910</option>
   <option value="1911">1911</option>
   <option value="1912">1912</option>
   <option value="1913">1913</option>
   <option value="1914">1914</option>
   <option value="1915">1915</option>
   <option value="1916">1916</option>
   <option value="1917">1917</option>
   <option value="1918">1918</option>
   <option value="1919">1919</option>
   <option value="1920">1920</option>
   <option value="1921">1921</option>
   <option value="1922">1922</option>
   <option value="1923">1923</option>
   <option value="1924">1924</option>
   <option value="1925">1925</option>
   <option value="1926">1926</option>
   <option value="1927">1927</option>
   <option value="1928">1928</option>
   <option value="1929">1929</option>
   <option value="1930">1930</option>
   <option value="1931">1931</option>
   <option value="1932">1932</option>
   <option value="1933">1933</option>
   <option value="1934">1934</option>
   <option value="1935">1935</option>
   <option value="1936">1936</option>
   <option value="1937">1937</option>
   <option value="1938">1938</option>
   <option value="1939">1939</option>
   <option value="1940">1940</option>
   <option value="1941">1941</option>
   <option value="1942">1942</option>
   <option value="1943">1943</option>
   <option value="1944">1944</option>
   <option value="1945">1945</option>
   <option value="1946">1946</option>
   <option value="1947">1947</option>
   <option value="1948">1948</option>
   <option value="1949">1949</option>
   <option value="1950">1950</option>
   <option value="1951">1951</option>
   <option value="1952">1952</option>
   <option value="1953">1953</option>
   <option value="1954">1954</option>
   <option value="1955">1955</option>
   <option value="1956">1956</option>
   <option value="1957">1957</option>
   <option value="1958">1958</option>
   <option value="1959">1959</option>
   <option value="1960">1960</option>
   <option value="1961">1961</option>
   <option value="1962">1962</option>
   <option value="1963">1963</option>
   <option value="1964">1964</option>
   <option value="1965">1965</option>
   <option value="1966">1966</option>
   <option value="1967">1967</option>
   <option value="1968">1968</option>
   <option value="1969">1969</option>
   <option value="1970">1970</option>
   <option value="1971">1971</option>
   <option value="1972">1972</option>
   <option value="1973">1973</option>
   <option value="1974">1974</option>
   <option value="1975">1975</option>
   <option value="1976">1976</option>
   <option value="1977">1977</option>
   <option value="1978">1978</option>
   <option value="1979">1979</option>
   <option value="1980">1980</option>
   <option value="1981">1981</option>
   <option value="1982">1982</option>
   <option value="1983">1983</option>
   <option value="1984">1984</option>
   <option value="1985">1985</option>
   <option value="1986">1986</option>
   <option value="1987">1987</option>
   <option value="1988">1988</option>
   <option value="1989">1989</option>
   <option value="1990">1990</option>
   <option value="1991">1991</option>
   <option value="1992">1992</option>
   <option value="1993">1993</option>
   <option value="1994">1994</option>
   <option value="1995">1995</option>
   <option value="1996">1996</option>
   <option value="1997">1997</option>
   <option value="1998">1998</option>
   <option value="1999">1999</option>
   <option value="2000">2000</option>
   <option value="2001">2001</option>
   <option value="2002">2002</option>
   <option value="2003">2003</option>
   <option value="2004">2004</option>
   <option value="2005">2005</option>
   <option value="2006">2006</option>
   <option value="2007">2007</option>
   <option value="2008">2008</option>
   <option value="2009">2009</option>
   <option value="2010">2010</option>
   <option value="2011">2011</option>
   <option value="2012">2012</option>
   <option value="2013">2013</option>
   <option value="2014">2014</option>
   <option value="2015">2015</option>
   <option value="2016">2016</option>
   <option value="2017">2017</option>
   <option value="2018">2018</option>
   <option value="2019">2019</option>
   <option value="2020">2020</option>
   <option value="2021">2021</option>
</select>

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

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

サンプルコード表示写真

これを作る↓

サンプルコードHTML

<select class="custum-pull" name="number">
   <option value="">数を選択</option>
   <option value="one">1</option>
   <option value="two">2</option>
   <option value="three">3</option>
</select>

CSSサンプルコード

.custum-pull {  
  /* 　デフォルトのプルダウンを解除 */
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
   /* オリジナルのプルダウンを作成 */
    display: inline-block;
    width: 100%;
    max-width: 400px;  
    padding: 20px;
    cursor: pointer;
    line-height: 1.5;
    font-size: 25px;
    font-weight: 700;
    color: #FF0000;
    border-radius: 4px;
    background-color: #FFFF00;
    border: solid 1px #000000;
  /* 　三角マーク作成 */
    background-image: linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.9) 50%),  linear-gradient(135deg, rgba(0,0,0,0.9) 50%, transparent 50%);
    background-size: 10px 10px, 10px 10px;
    background-position: calc(100% - 30px) 50%, calc(100% - 20px) 50%;
    background-repeat: no-repeat;
  }
 /* 　フォーカス時 */
   .custum-pull:focus {
    outline: 0;
    border-color: #C0C0C0;
   } 
 /* 　IEでデフォルトの矢印消す */
  .custum-pull::-ms-expand {
    display: none;
  }

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

まとめ

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

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

①プルダウン作成の基本

<select name=”item”>
   <option value=”item1”>項目1</option>
   <option value=”item2”>項目2</option>
   <option value=”item3”>項目3</option>
   <option value=”item4”>項目4</option>
   <option value=”item5”>項目5</option>
   <option value=”item6”>項目6</option>
   <option value=”item7”>項目7</option>
   <option value=”item8”>項目8</option>
   <option value=”item9”>項目9</option>
   <option value=”item10”>項目10</option>
</select>

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

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

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

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