ラベル付きセレクトボックスを横並びに配置する方法
ラベル付きのセレクトボックスを横並びで配置する方法を紹介します。都道府県や配送方法、支払い方法など、関連する入力項目を1行にまとめて表示したい場面で便利なレイアウトです。
HTMLとCSSだけで実装できるため、JavaScriptは不要です。PCでは横並び、画面幅が狭いスマートフォンでは縦並びへ自動で切り替わるため、さまざまな画面サイズで見やすく表示できます。
ラベルや選択肢の内容はもちろん、幅・余白・角丸・色などもCSSから簡単に変更できます。お問い合わせフォームや会員登録画面、ECサイトなど幅広い用途で利用できます。
サンプルコードの利用によって発生した損害について、当サイトは責任を負いません。
デモ
ラベル付きのセレクトボックスを横並びで配置したサンプルです。
PCでは横並び、スマートフォンでは自動で縦並びになります。
コードをコピーして使おう！
<!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="side-by-side-labeled-select-box">
<!-- フォームのタイトル -->
<div class="side-by-side-labeled-select-box_title">
配送情報を選択
</div>
<!-- フォームの説明文 -->
<p class="side-by-side-labeled-select-box_text">
都道府県と配送方法を選択してください。
</p>
<!-- 2つのセレクトボックスを横並びにするエリア -->
<div class="side-by-side-labeled-select-box_row">
<!-- 都道府県の入力項目 -->
<div class="side-by-side-labeled-select-box_item">
<!-- 都道府県セレクトボックスのラベル -->
<label
class="side-by-side-labeled-select-box_label"
for="prefecture">
都道府県
</label>
<!-- 都道府県を選択するセレクトボックス -->
<select
class="side-by-side-labeled-select-box_select"
id="prefecture"
name="prefecture">
<!-- 初期表示する案内項目 -->
<option value="">選択してください</option>
<!-- 都道府県の選択肢 -->
<option value="tokyo">東京都</option>
<option value="osaka">大阪府</option>
<option value="fukuoka">福岡県</option>
</select>
</div>
<!-- 配送方法の入力項目 -->
<div class="side-by-side-labeled-select-box_item">
<!-- 配送方法セレクトボックスのラベル -->
<label
class="side-by-side-labeled-select-box_label"
for="delivery">
配送方法
</label>
<!-- 配送方法を選択するセレクトボックス -->
<select
class="side-by-side-labeled-select-box_select"
id="delivery"
name="delivery">
<!-- 初期表示する案内項目 -->
<option value="">選択してください</option>
<!-- 配送方法の選択肢 -->
<option value="normal">通常配送</option>
<option value="express">お急ぎ便</option>
<option value="mail">メール便</option>
</select>
</div>
</div>
<!-- レスポンシブ表示についての補足文 -->
<p class="side-by-side-labeled-select-box_note">
PCでは横並び、画面幅が狭い場合は縦並びで表示されます。
</p>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルだけで構成されています。HTMLではラベル付きセレクトボックスの配置や選択項目を記述し、CSSでは横並びレイアウトやデザインを設定しています。JavaScriptを使用していないため、そのままコピーして利用できます。
セレクトボックスは2つを横並びに配置し、画面幅が狭くなると自動で縦並びへ切り替わります。お問い合わせフォームや会員登録画面、配送情報入力など、複数の選択項目を見やすく配置したい場面で利用できます。
ラベルや選択肢はHTMLを書き換えるだけで変更でき、色や角丸、余白などの見た目はCSSから自由に調整できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.html
ラベル付きセレクトボックスのHTMLを記述します。ラベル名や選択肢、表示する項目を変更する場合はこのファイルを編集します。
style.css
横並びレイアウト、セレクトボックスのデザイン、余白、角丸、枠線、フォーカス時の装飾、レスポンシブ表示を設定します。
設置方法・使い方
sampleフォルダ内のindex.htmlをブラウザで開くと動作を確認できます。Webサイトへ設置する場合は、index.htmlとstyle.cssを同じフォルダへ配置してください。
カスタマイズできる内容
index.htmlではラベル名、選択肢、表示内容を変更できます。style.cssでは横並び時の間隔、文字サイズ、背景色、枠線の色、角丸、余白、フォーカス時のデザインなどを自由に変更できます。
数値調整
style.css
・padding:16px 48px 16px 16px;
上下・左右の余白を設定しています。
例えば「16px 48px 16px 16px」を「20px 48px 20px 20px」に変更すると、セレクトボックスの高さが大きくなり、文字の周囲にも余裕ができます。
・gap:24px;
2つのセレクトボックスの間隔です。
「24px」を「40px」にすると入力欄同士の間隔が広くなり、「12px」にするとコンパクトに表示されます。
・border-radius:12px;
セレクトボックスの角丸です。
「12px」を「24px」にすると丸みが強くなり、「0」にすると角のない四角いデザインになります。
・border:2px solid #cbd5e1;
枠線の太さと色です。
「2px」を「3px」にすると枠線が太くなり、「#cbd5e1」を変更すると好きな色へ変更できます。
・font-size:16px;
文字サイズです。
「16px」を「18px」にすると文字が大きくなり、「14px」にするとコンパクトな表示になります。
・transition:0.2s;
フォーカス時のアニメーション時間です。
「0.2s」を「0.5s」にするとゆっくり変化し、「0.1s」にすると素早く切り替わります。
レスポンシブ対応
style.cssではwidth:100%、max-width、box-sizing、media queryを使用しています。PCでは2列表示、スマートフォンやタブレットでは1列表示へ自動で切り替わるため、画面サイズに合わせて見やすく表示されます。
コメント