最初から項目が選択されたセレクトボックスを作る方法
最初から項目が選択されたセレクトボックスを作る方法を紹介します。このサンプルでは、HTMLのselected属性を使用して、ページを開いた時点で任意の項目を初期選択した状態で表示します。利用者が最初に選択する手間を省けるため、よく利用する項目や推奨する選択肢をあらかじめ設定したい場合に便利です。
お問い合わせフォームの都道府県選択、会員登録画面の初期設定、管理画面の既定値、ECサイトの配送地域や支払い方法など、初期状態から特定の項目を表示したい場面で活用できます。ページを開いた時点で指定した項目が選択されており、その後は通常のセレクトボックスとして別の項目へ自由に変更できます。
HTMLでは初期選択する項目や表示する選択肢を変更でき、CSSでは横幅、文字サイズ、余白、背景色、枠線、角丸、フォーカス時のデザインなどを調整できます。レスポンシブにも対応しているため、スマートフォン・タブレット・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="initial-selected-select-box_demo">
<!-- タイトル -->
<div class="initial-selected-select-box_demo_title">
都道府県を選択
</div>
<!-- 説明文 -->
<p class="initial-selected-select-box_demo_text">
ページを開いた時点で「東京都」が選択されています。
</p>
<!-- セレクトボックスのラベル -->
<label
class="initial-selected-select-box_demo_label"
for="prefecture">
都道府県
</label>
<!-- セレクトボックスと矢印を囲む要素 -->
<div class="initial-selected-select-box_demo_wrap">
<!-- 都道府県を選択するセレクトボックス -->
<select
id="prefecture"
class="initial-selected-select-box_demo_select"
name="prefecture">
<!-- 北海道 -->
<option value="hokkaido">
北海道
</option>
<!-- selected属性を付けた項目が最初から選択される -->
<option value="tokyo" selected>
東京都
</option>
<!-- 大阪府 -->
<option value="osaka">
大阪府
</option>
<!-- 福岡県 -->
<option value="fukuoka">
福岡県
</option>
</select>
</div>
<!-- 補足説明 -->
<p class="initial-selected-select-box_demo_note">
別の項目を選択すると通常のセレクトボックスとして利用できます。
</p>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではセレクトボックスのタイトル、説明文、ラベル、選択肢を配置し、selected属性を使って「東京都」を最初から選択した状態にします。CSSでは全体の横幅や余白、枠線、角丸、独自矢印、フォーカス時の表示などを設定します。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはセレクトボックス全体を構成するファイルです。タイトル、説明文、ラベル、各選択肢の文字と値を変更できます。初期状態で選択する項目は、対象のoption要素へselected属性を付けて設定します。
style.cssはセレクトボックス全体のデザインを設定するファイルです。横幅、余白、背景色、文字色、枠線、角丸、独自矢印、フォーカス時の枠線や外枠を変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置してください。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開きます。ページを開いた時点で「東京都」が選択された状態で表示され、その後は通常のセレクトボックスとして別の項目へ変更できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、都道府県の選択肢を変更できます。初期選択する項目を変更する場合は、現在「東京都」へ付いているselected属性を削除し、最初から選択したい別のoption要素へ付け替えてください。
style.cssではセレクトボックス全体の最大横幅、内側余白、背景色、文字サイズ、枠線、角丸、矢印の大きさや位置、フォーカス時の色を変更できます。
数値調整
style.css
max-width:680px;
セレクトボックス全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:36px;
全体の内側余白です。値を大きくすると内容と外枠の間隔が広がり、小さくすると詰まった表示になります。
border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:30px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
margin:0 0 28px;
説明文の下側余白です。28pxを大きくするとラベルとの間隔が広がり、小さくすると狭くなります。
padding:16px 52px 16px 16px;
セレクトボックスの内側余白です。右側の52pxは文字と独自矢印が重ならないための余白です。値を変更すると入力欄の高さや文字位置が変わります。
border:2px solid #dbe5f1;
セレクトボックスの枠線です。2pxを大きくすると太くなり、小さくすると細くなります。
border-radius:12px;
セレクトボックスの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
right:20px;
独自矢印の右端からの位置です。値を大きくすると矢印が左へ移動し、小さくすると右へ移動します。
width:10px;とheight:10px;
独自矢印の大きさです。両方を同じ値で変更すると形を保ったまま拡大・縮小できます。
outline:3px solid rgba(37,99,235,.18);
フォーカス時に表示する外枠です。3pxを大きくすると外枠が太くなり、小さくすると細くなります。
outline-offset:2px;
セレクトボックスとフォーカス外枠の間隔です。値を大きくすると外枠が外側へ離れます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:680pxにより、画面幅に合わせて全体が縮小されます。また、画面幅640px以下ではページ全体とセレクトボックスの余白、タイトルの文字サイズ、入力欄の内側余白、矢印の位置を調整しているため、スマートフォン・タブレット・PCで利用できます。
コメント