スクロール付きセレクトボックスを作る方法
スクロール付きセレクトボックスを作る方法を紹介します。通常のプルダウン型セレクトボックスとは異なり、このサンプルでは複数の選択肢を一覧表示し、表示範囲を超えた項目をスクロールして確認できるリスト形式のセレクトボックスを作成します。HTMLのsize属性を使うため、JavaScriptを使用せずに実装できます。
このサンプルでは、セレクトボックスへsize=”5″を設定し、5件分の選択肢を表示します。選択肢は全部で10件あるため、最初に表示される5件を超えた6件目以降は、セレクトボックス内をスクロールして確認できます。表示件数を増減したい場合は、size属性の数値を変更するだけで調整できます。
都道府県、商品カテゴリー、担当者、プラン、管理画面の設定項目など、選択肢が多いフォームで一覧を見せながら1つ選択してもらいたい場合に利用できます。お問い合わせ画面や会員サイト、ECサイト、管理画面などへ導入しやすく、CSSで横幅、背景色、文字サイズ、枠線、角丸なども変更できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
5件分を表示し、6件目以降はスクロールして確認できます。
size=”5″により5件分を表示しています。6件目以降はセレクトボックス内をスクロールすると確認できます。
セレクトボックスには10件の選択肢があり、最初に5件分だけ表示されます。表示範囲を超えた項目はスクロールして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="scroll-select-box">
<!-- セレクトボックスエリアのタイトル -->
<div class="scroll-select-box_title">
都道府県を選択
</div>
<!-- 表示件数とスクロールについて案内する説明文 -->
<p class="scroll-select-box_text">
5件分を表示し、6件目以降はスクロールして確認できます。
</p>
<!-- セレクトボックスのラベル -->
<label class="scroll-select-box_label" for="prefecture">
都道府県
</label>
<!-- size属性で5件分を一覧表示するセレクトボックス -->
<select
class="scroll-select-box_select"
id="prefecture"
name="prefecture"
size="5">
<!-- 北海道の選択肢 -->
<option value="hokkaido">
北海道
</option>
<!-- 青森県の選択肢 -->
<option value="aomori">
青森県
</option>
<!-- 岩手県の選択肢 -->
<option value="iwate">
岩手県
</option>
<!-- 宮城県の選択肢 -->
<option value="miyagi">
宮城県
</option>
<!-- 秋田県の選択肢 -->
<option value="akita">
秋田県
</option>
<!-- 6件目以降はスクロールして確認する選択肢 -->
<option value="yamagata">
山形県
</option>
<option value="fukushima">
福島県
</option>
<option value="ibaraki">
茨城県
</option>
<option value="tochigi">
栃木県
</option>
<option value="gunma">
群馬県
</option>
</select>
<!-- size属性の設定内容を案内する補足文 -->
<p class="scroll-select-box_note">
size="5"により5件分を表示しています。6件目以降はセレクトボックス内をスクロールすると確認できます。
</p>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLファイルではsize属性を使って5件分の選択肢を一覧表示し、表示範囲を超えた6件目以降をスクロールして確認できるセレクトボックスを配置しています。CSSファイルでは、全体の横幅、余白、背景色、枠線、文字サイズ、角丸、フォーカス時の表示などを設定しています。
sample/
├── index.html
└── style.css
各ファイルの役割
index.html
タイトル、説明文、ラベル、都道府県の選択肢、補足文を配置します。セレクトボックスへsize=”5″を設定しているため、5件分の項目が常に表示され、6件目以降はセレクトボックス内をスクロールして確認できます。選択肢の追加・削除や表示順、表示件数を変更できます。
style.css
セレクトボックス全体の最大横幅、背景色、枠線、文字サイズ、余白、角丸、フォーカス時の外枠、スマートフォン表示時の調整を設定します。
設置方法・使い方
index.htmlとstyle.cssを同じsampleフォルダ内へ配置します。sampleフォルダ内のindex.htmlをブラウザで開くと、5件分を一覧表示するセレクトボックスを確認できます。選択肢は全部で10件あるため、6件目以降はセレクトボックス右側のスクロール操作を使って表示し、目的の項目を1つ選択します。
カスタマイズできる内容
index.htmlでは、タイトル、説明文、ラベル、補足文、option要素の文字、value属性、選択肢の数、表示順を変更できます。表示件数を変更する場合は、select要素のsize属性を編集します。style.cssでは、背景色、枠線、文字色、文字サイズ、余白、角丸、最大横幅、フォーカス時の色などを変更できます。
数値調整
index.html
size=”5″
5はセレクトボックス内へ同時に表示する項目数です。選択肢が5件を超えると、6件目以降はスクロールして確認できます。値を大きくすると一度に表示する項目数が増え、小さくすると表示件数が減ります。
style.css
max-width:680px;
680pxは全体の最大横幅です。値を大きくすると表示領域が広くなり、小さくするとコンパクトになります。
style.css
padding:36px;
36pxは全体の内側余白です。値を大きくすると内容と外枠の間隔が広くなります。
style.css
padding: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でも画面幅に合わせて利用できます。
コメント