項目をグループ分けしたセレクトボックスを作る方法
項目をグループ分けしたセレクトボックスを作る方法を紹介します。このサンプルではHTMLのoptgroup要素を利用し、関連する選択肢をカテゴリごとにまとめて表示できます。選択肢が多いフォームでも見やすく整理できるため、利用者が目的の項目を探しやすくなります。
都道府県を地域ごとにまとめたり、商品のカテゴリー別一覧、お問い合わせ内容の分類、管理画面の設定項目など、選択肢が増えやすい場面で活用できます。HTMLだけでグループ分けを実現できるため、JavaScriptを使わずシンプルに実装できる点も特徴です。CSSではレイアウトや配色、余白、角丸などを自由に変更でき、サイトデザインに合わせた見た目へ調整できます。
サンプルコードはそのままコピーして利用でき、初心者でも導入しやすい構成になっています。レスポンシブにも対応しているため、スマートフォン・タブレット・PCでも見やすく利用できます。グループ名や選択項目を変更するだけで、ECサイト、会員サイト、予約フォーム、お問い合わせ画面など幅広いWebサイトへ応用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
関連する項目ごとにグループ分けして表示しています。
セレクトボックスを開くと、項目がグループごとに整理されて表示されます。
コードをコピーして使おう！
<!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="grouped-select-box">
<!-- セレクトボックスエリアのタイトル -->
<div class="grouped-select-box_title">
商品カテゴリーを選択
</div>
<!-- グループ表示について案内する説明文 -->
<p class="grouped-select-box_text">
関連する項目ごとにグループ分けして表示しています。
</p>
<!-- セレクトボックスのラベル -->
<label class="grouped-select-box_label" for="category">
カテゴリー
</label>
<!-- セレクトボックスと独自矢印を囲む要素 -->
<div class="grouped-select-box_wrap">
<!-- 商品カテゴリーを選択するセレクトボックス -->
<select
class="grouped-select-box_select"
id="category">
<!-- パソコンのグループ -->
<optgroup label="パソコン">
<!-- パソコングループの選択肢 -->
<option value="laptop">
ノートパソコン
</option>
<option value="desktop">
デスクトップパソコン
</option>
<option value="gaming-pc">
ゲーミングPC
</option>
</optgroup>
<!-- スマートフォンのグループ -->
<optgroup label="スマートフォン">
<!-- スマートフォングループの選択肢 -->
<option value="iphone">
iPhone
</option>
<option value="android-phone">
Android
</option>
</optgroup>
<!-- タブレットのグループ -->
<optgroup label="タブレット">
<!-- タブレットグループの選択肢 -->
<option value="ipad">
iPad
</option>
<option value="android-tablet">
Androidタブレット
</option>
</optgroup>
</select>
</div>
<!-- 操作方法を案内する補足文 -->
<p class="grouped-select-box_note">
セレクトボックスを開くと、項目がグループごとに整理されて表示されます。
</p>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではoptgroup要素を使って選択肢をグループごとに分類し、CSSではセレクトボックス全体のデザインやレイアウトを設定しています。JavaScriptを使用せずに、見やすく整理されたセレクトボックスを実装できるため、初心者でも導入しやすい構成です。
sample/
├── index.html
└── style.css
各ファイルの役割
index.html
セレクトボックス本体、ラベル、説明文、選択肢を配置します。optgroup要素を追加・編集することでグループ名を変更でき、option要素を追加・削除することで各グループ内の選択肢を自由に編集できます。
style.css
セレクトボックス全体のレイアウト、背景色、枠線、文字サイズ、余白、角丸、独自矢印、フォーカス時のデザイン、レスポンシブ表示を設定します。
設置方法・使い方
sampleフォルダ内へindex.htmlとstyle.cssを配置します。sampleフォルダ内のindex.htmlをブラウザで開くと利用できます。セレクトボックスをクリックすると、「パソコン」「スマートフォン」「タブレット」のようにグループごとへ整理された選択肢が表示されます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、グループ名、選択肢の追加・削除・並び順を変更できます。optgroup要素を増やせば新しいグループも追加できます。style.cssでは背景色、文字色、枠線、角丸、余白、最大横幅、矢印位置、フォーカス時の色などを自由に変更できます。
数値調整
style.css
max-width:680px;
680pxは全体の最大横幅です。値を大きくすると表示幅が広くなり、小さくするとコンパクトになります。
style.css
padding:36px;
36pxは全体の内側余白です。値を変更すると内容と外枠の間隔が変わります。
style.css
padding:16px 52px 16px 16px;
右側の52pxは矢印用の余白です。値を変更すると文字と矢印の間隔が変わります。
style.css
right:20px;
20pxは独自矢印を右端から配置する位置です。値を変更すると矢印の位置が変わります。
style.css
width:10px;
height:10px;
10pxは独自矢印の大きさです。値を大きくすると矢印も大きく表示されます。
style.css
border-radius:18px;
18pxはカード全体の角丸です。値を変更すると丸みが変わります。
style.css
border-radius:12px;
12pxはセレクトボックスの角丸です。値を変更すると入力欄の丸みが変わります。
style.css
font-size:30px;
30pxはタイトルの文字サイズです。値を変更するとタイトルの大きさが変わります。
style.css
font-size:16px;
16pxはラベルや選択項目の文字サイズです。値を変更すると文字の大きさが変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでwidth:100%、max-width、box-sizing:border-boxを使用し、画面幅640px以下ではmedia queryによって余白、タイトルサイズ、セレクトボックスの内側余白、矢印位置を調整しています。スマートフォン・タブレット・PCでも画面サイズに合わせて快適に利用できます。
コメント