基本のセレクトボックスを作る方法【HTML/CSS・サンプルコード付き】

基本のセレクトボックスを作る方法

基本のセレクトボックスを作る方法を紹介します。セレクトボックスは複数の選択肢を一覧表示し、その中から1つだけ選択できるフォーム部品です。都道府県やカテゴリー、年代、プラン選択など、入力項目をコンパクトにまとめたい場面でよく利用されます。

このサンプルではHTMLとCSSだけを使用し、シンプルで使いやすいセレクトボックスを実装しています。特別なライブラリやJavaScriptは使用せず、ブラウザですぐに動作を確認できます。基本的な構造を理解しやすいため、初めてフォームを作成する方にもおすすめです。

お問い合わせフォーム、会員登録画面、ECサイトの商品カテゴリ選択、管理画面の設定項目など、さまざまなWebサイトで利用できます。選択肢の追加や削除、表示する文言の変更も簡単に行えるため、用途に合わせて自由にカスタマイズできます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

都道府県を選択

セレクトボックスから1つ選択してください。

都道府県

セレクトボックスをクリックすると選択肢が表示され、1つだけ選択できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードをUTF-8へ設定 -->
  <meta charset="UTF-8">

  <!-- スマートフォン・タブレット表示へ対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>基本のセレクトボックス</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- セレクトボックス全体 -->
  <div class="basic-select-box">

    <!-- タイトル -->
    <div class="basic-select-box_title">
      都道府県を選択
    </div>

    <!-- 説明文 -->
    <p class="basic-select-box_text">
      セレクトボックスから1つ選択してください。
    </p>

    <!-- ラベル -->
    <label class="basic-select-box_label" for="prefecture">
      都道府県
    </label>

    <!-- セレクトボックス -->
    <div class="basic-select-box_wrap">

      <select
        id="prefecture"
        class="basic-select-box_select">

        <option>選択してください</option>
        <option>北海道</option>
        <option>東京都</option>
        <option>大阪府</option>
        <option>福岡県</option>

      </select>

    </div>

  </div>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20pxの余白。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* セレクトボックス全体 */
.basic-select-box{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:680px; /* 全体の最大横幅。値を大きくすると表示領域が広がる */
  margin:40px auto; /* 上下40pxの余白を付け、左右を中央配置 */
  padding:36px; /* 全体の内側余白。値を大きくすると内容と外枠の間隔が広がる */
  border:1px solid #dbe5f1; /* 全体を囲む枠線の太さ・種類・色 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* セレクトボックス全体の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* タイトル */
.basic-select-box_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  color:#111827; /* タイトルの文字色 */
  font-size:30px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間。値を大きくすると行間が広がる */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.basic-select-box_text{
  margin:0 0 28px; /* 下側28pxの余白。値を大きくするとラベルとの間隔が広がる */
  color:#64748b; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
  text-align:center; /* 説明文を中央揃えにする */
}

/* セレクトボックスのラベル */
.basic-select-box_label{
  display:block; /* ラベルを1行で表示 */
  margin-bottom:10px; /* 下側10pxの余白。値を大きくするとセレクトボックスとの間隔が広がる */
  color:#111827; /* ラベルの文字色 */
  font-size:16px; /* ラベルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* ラベルを太字にする */
  line-height:1.5; /* ラベルの行間。値を大きくすると行間が広がる */
}

/* セレクトボックスと矢印を囲む要素 */
.basic-select-box_wrap{
  position:relative; /* 矢印をこの要素を基準に配置 */
  width:100%; /* 親要素の横幅いっぱいに表示 */
}

/* セレクトボックス本体 */
.basic-select-box_select{
  width:100%; /* 親要素の横幅いっぱいに表示 */
  padding:16px 52px 16px 16px; /* 上下16px・右52px・左16pxの内側余白。右側を広くして矢印と文字の重なりを防ぐ */
  border:2px solid #dbe5f1; /* セレクトボックスを囲む枠線の太さ・種類・色 */
  border-radius:12px; /* セレクトボックスの角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* セレクトボックスの背景色 */
  color:#111827; /* 選択項目の文字色 */
  font-size:16px; /* 選択項目の文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.5; /* 選択項目の行間。値を大きくすると高さが広がる */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
  appearance:none; /* ブラウザ標準の矢印を非表示 */
  -webkit-appearance:none; /* Safariでブラウザ標準の矢印を非表示 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* セレクトボックス右側の矢印 */
.basic-select-box_wrap::after{
  content:""; /* 疑似要素を表示 */
  position:absolute; /* セレクトボックス上へ重ねて配置 */
  top:50%; /* 矢印を縦方向の中央へ配置 */
  right:20px; /* 右端から20px離して配置。値を大きくすると矢印が左へ移動する */
  width:10px; /* 矢印の横幅。値を大きくすると矢印が大きくなる */
  height:10px; /* 矢印の高さ。値を大きくすると矢印が大きくなる */
  border-right:2px solid #111827; /* 矢印右側の線の太さ・種類・色 */
  border-bottom:2px solid #111827; /* 矢印下側の線の太さ・種類・色 */
  transform:translateY(-70%) rotate(45deg); /* 縦位置を調整し、45度回転させて下向き矢印にする */
  pointer-events:none; /* 矢印がクリック操作を妨げないようにする */
}

/* セレクトボックスへフォーカスした状態 */
.basic-select-box_select:focus{
  border-color:#2563eb; /* フォーカス時の枠線色 */
  outline:3px solid rgba(37,99,235,0.18); /* フォーカス位置を示す外枠の太さ・種類・色 */
  outline-offset:2px; /* 外枠とセレクトボックスの間隔。値を大きくすると外側へ離れる */
}

/* 画面幅640px以下 */
@media screen and (max-width:640px){

  /* スマートフォン表示時のページ全体 */
  body{
    padding:24px 12px; /* 上下24px・左右12pxへ縮小して画面を広く使う */
  }

  /* スマートフォン表示時の全体 */
  .basic-select-box{
    margin:24px auto; /* 上下余白を24pxへ縮小し、左右を中央配置 */
    padding:24px 18px; /* 上下24px・左右18pxへ縮小して画面内へ収める */
  }

  /* スマートフォン表示時のタイトル */
  .basic-select-box_title{
    font-size:24px; /* タイトルの文字サイズを24pxへ縮小 */
  }

  /* スマートフォン表示時のセレクトボックス */
  .basic-select-box_select{
    padding:14px 50px 14px 14px; /* 上下14px・右50px・左14pxへ縮小し、矢印部分の余白を確保 */
  }

  /* スマートフォン表示時の矢印 */
  .basic-select-box_wrap::after{
    right:18px; /* 右端から18px離して配置。値を大きくすると矢印が左へ移動する */
  }

}

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLファイルでタイトルやラベル、セレクトボックスを配置し、CSSファイルでレイアウトや配色、独自の矢印デザインを設定しています。JavaScriptを使用しないため、シンプルな構成で基本的なセレクトボックスの作り方を学べます。

sample/
├── index.html
└── style.css

各ファイルの役割
index.html
セレクトボックス本体やラベル、選択肢を配置します。選択肢の追加・削除や表示する文字、タイトルや説明文を変更できます。

style.css
セレクトボックス全体のレイアウト、背景色、枠線、余白、角丸、文字サイズ、独自の矢印デザイン、レスポンシブ対応など見た目を設定します。

設置方法・使い方
sampleフォルダ内へ index.html と style.css を配置します。sampleフォルダ内の index.html をブラウザで開くと利用できます。セレクトボックスをクリックすると選択肢が表示され、一覧から1つ選択できます。

カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、選択肢の追加・削除や表示順を変更できます。style.cssでは背景色、枠線、文字色、文字サイズ、余白、角丸、セレクトボックスの横幅、独自矢印の位置や大きさなどを自由に変更できます。

数値調整
max-width:680px;
680pxは全体の最大横幅です。値を大きくすると表示領域が広くなります。

padding:36px;
36pxは全体の内側余白です。値を大きくすると余白が広くなります。

padding:16px 52px 16px 16px;
右側52pxは矢印と文字が重ならないように確保している余白です。値を変更すると文字と矢印の間隔が変わります。

right:20px;
20pxは独自矢印の右側位置です。値を大きくすると矢印が左へ移動し、小さくすると右端へ近付きます。

width:10px;
height:10px;
10pxは独自矢印のサイズです。値を変更すると矢印の大きさが変わります。

border-radius:18px;
18pxは全体カードの角丸です。値を大きくすると丸みが強くなります。

border-radius:12px;
12pxはセレクトボックスの角丸です。値を変更すると丸みが変わります。

font-size:30px;
30pxはタイトルの文字サイズです。値を変更するとタイトルの大きさが変わります。

font-size:16px;
16pxはラベルやセレクトボックスの文字サイズです。値を変更すると文字の大きさが変わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでwidth:100%、max-width、box-sizing:border-box、および画面幅640px以下のmedia queryを使用しています。スマートフォンでは余白やタイトルサイズ、セレクトボックスの内側余白、矢印位置を調整するため、スマートフォン・タブレット・PCでもレイアウトが崩れにくく利用できます。