基本のセレクトボックスを作る方法
基本のセレクトボックスを作る方法を紹介します。このサンプルでは、HTMLのselect要素とoption要素を使用し、一覧から1つの項目を選択できるシンプルなセレクトボックスを作成します。CSSでは見た目を整え、ブラウザ標準の矢印を非表示にしてオリジナルの矢印を表示することで、統一感のあるデザインを実現しています。
お問い合わせフォームの都道府県選択、会員登録時の年代や性別の選択、ECサイトの配送地域や支払い方法の指定、管理画面の設定項目など、1つの選択肢を選ばせたい場面で幅広く利用できます。クリックすると候補一覧が表示され、その中から目的の項目を選択できるため、入力ミスを減らしながら分かりやすいフォームを作成できます。
タイトル、説明文、ラベル、選択項目はHTMLから自由に変更できます。CSSでは横幅、余白、文字サイズ、背景色、枠線、角丸、フォーカス時の色、矢印の位置やサイズなどを調整できるため、用途に合わせたデザインへカスタマイズできます。レスポンシブにも対応しており、スマートフォン・タブレット・PCでも利用しやすい基本的なセレクトボックスとして活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
セレクトボックスから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>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではタイトル、説明文、ラベル、セレクトボックスを配置し、一覧から1つの項目を選択できるフォームを作成します。CSSではセレクトボックス全体のデザインやレイアウト、独自の矢印表示、フォーカス時の装飾などを設定しており、初心者でも扱いやすい基本的なセレクトボックスのサンプルです。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはセレクトボックス全体を構成するファイルです。タイトル、説明文、ラベル、選択項目を編集できます。option要素を追加・削除・変更することで、用途に合わせた選択肢を自由に作成できます。
style.cssはセレクトボックス全体のデザインを設定するファイルです。横幅、余白、背景色、文字サイズ、枠線、角丸、フォーカス時の表示、右側の矢印デザインなどを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。表示されたセレクトボックスをクリックすると選択肢の一覧が表示され、任意の項目を1つ選択できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、option要素の選択項目を自由に変更できます。用途に合わせて都道府県、年代、性別、カテゴリーなどさまざまな選択リストへ変更できます。
style.cssでは全体の横幅、背景色、余白、文字サイズ、枠線、角丸、セレクトボックスの高さ、フォーカス時の色、右側の矢印の位置やサイズなどを調整できます。
数値調整
style.css
max-width:680px;
セレクトボックス全体の最大横幅です。値を大きくすると横幅が広がり、小さくするとコンパクトになります。
padding:36px;
全体の内側余白です。値を大きくすると内容と外枠の間隔が広がり、小さくすると詰まった表示になります。
font-size:30px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
margin:0 0 28px;
説明文の下側余白です。値を大きくするとラベルとの間隔が広がり、小さくすると狭くなります。
padding:16px 52px 16px 16px;
セレクトボックスの内側余白です。右側の52pxを変更すると、矢印との間隔を調整できます。
border-radius:12px;
セレクトボックスの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
right:20px;
矢印の右側位置です。値を変更すると矢印の表示位置が左右に移動します。
width:10px; / height:10px;
矢印のサイズです。値を大きくすると矢印が大きく表示され、小さくするとコンパクトになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:680pxにより画面幅に合わせて縮小表示されます。また、640px以下ではpaddingやタイトルサイズを調整し、スマートフォン・タブレット・PCでも見やすく操作しやすいレイアウトになります。
コメント