縦並びのチェックボックスを作る方法
縦並びのチェックボックスを作る方法を紹介します。このサンプルでは、複数のチェックボックスを上から下へ1列に並べ、各項目をクリックして自由に選択・解除できるフォームをHTMLとCSSだけで作成します。選択肢を1項目ずつ見やすく表示できるため、内容を確認しながら操作してもらいたい場合に適しています。
お問い合わせ画面の希望内容、会員サイトの興味分野、ECサイトの商品条件、管理画面の設定項目、アンケートフォームの回答欄など、複数の選択肢を整理して表示したい場面で利用できます。横幅の狭いスマートフォンでも項目が詰まりにくく、選択肢の文字が長い場合にも読みやすい点がメリットです。
コードはHTMLとCSSの2ファイルだけで構成されており、JavaScriptや外部ライブラリは使用しません。項目名、項目数、送信時の値は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="vertical-checkbox_wrap">
<!-- チェックボックスエリアのタイトル -->
<div class="vertical-checkbox_title">
縦並びのチェックボックス
</div>
<!-- 操作方法を案内する説明文 -->
<p class="vertical-checkbox_text">
興味のある項目を自由に選択してください。
</p>
<!-- 複数のチェックボックスを縦方向へ並べる一覧 -->
<div class="vertical-checkbox_list">
<!-- HTMLのチェックボックス項目 -->
<label class="vertical-checkbox_label">
<!-- HTMLの選択状態を管理するチェックボックス -->
<input
class="vertical-checkbox_input"
type="checkbox"
name="interest[]"
value="html">
<!-- HTMLの項目名 -->
<span class="vertical-checkbox_name">
HTML
</span>
</label>
<!-- CSSのチェックボックス項目 -->
<label class="vertical-checkbox_label">
<!-- CSSの選択状態を管理するチェックボックス -->
<input
class="vertical-checkbox_input"
type="checkbox"
name="interest[]"
value="css">
<!-- CSSの項目名 -->
<span class="vertical-checkbox_name">
CSS
</span>
</label>
<!-- JavaScriptのチェックボックス項目 -->
<label class="vertical-checkbox_label">
<!-- JavaScriptの選択状態を管理するチェックボックス -->
<input
class="vertical-checkbox_input"
type="checkbox"
name="interest[]"
value="javascript">
<!-- JavaScriptの項目名 -->
<span class="vertical-checkbox_name">
JavaScript
</span>
</label>
<!-- PHPのチェックボックス項目 -->
<label class="vertical-checkbox_label">
<!-- PHPの選択状態を管理するチェックボックス -->
<input
class="vertical-checkbox_input"
type="checkbox"
name="interest[]"
value="php">
<!-- PHPの項目名 -->
<span class="vertical-checkbox_name">
PHP
</span>
</label>
<!-- Pythonのチェックボックス項目 -->
<label class="vertical-checkbox_label">
<!-- Pythonの選択状態を管理するチェックボックス -->
<input
class="vertical-checkbox_input"
type="checkbox"
name="interest[]"
value="python">
<!-- Pythonの項目名 -->
<span class="vertical-checkbox_name">
Python
</span>
</label>
</div>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでチェックボックスの項目を配置し、CSSで縦並びレイアウトや余白、色、サイズなどのデザインを設定しています。
JavaScriptを使用しないため、そのままブラウザで開くだけですぐに動作を確認できます。シンプルな構成なので、初めてチェックボックスをカスタマイズする方でも編集しやすいサンプルです。
sample/
├── index.html
└── style.css
各ファイルの役割
index.html
チェックボックスの項目や表示するテキストを編集できます。項目を追加・削除したい場合もこのファイルを編集します。
style.css
全体のレイアウト、縦並び表示、余白、色、文字サイズ、枠線、角丸などの見た目を編集できます。
設置方法・使い方
sampleフォルダ内の index.html と style.css を同じ場所へ保存します。
保存後に sample/index.html をブラウザで開くと、縦並びのチェックボックスを利用できます。
カスタマイズできる内容
index.htmlではチェックボックスの項目名や追加・削除ができます。
style.cssでは全体の横幅、色、余白、文字サイズ、チェックボックスのサイズ、枠線、角丸などを変更できます。
数値調整
max-width は全体の最大横幅です。700pxならコンパクトに表示され、900pxなどへ変更すると横幅が広がります。
padding は内側の余白です。32pxならゆったり表示され、20pxにすると余白が狭くなります。
gap は各チェックボックスの間隔です。12pxなら標準的な間隔になり、20pxにすると項目同士の間隔が広がります。
font-size はタイトルや文字の大きさです。16pxから18pxへ変更すると文字が大きくなり、14pxにすると小さく表示されます。
border-radius は角丸の大きさです。12pxなら適度な丸みになり、24pxへ変更するとより丸いデザインになります。
width と height はチェックボックスのサイズです。22pxなら標準サイズになり、28pxへ変更するとチェックボックスが大きく表示されます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.css の width:100%、max-width、padding、および media query により、画面サイズに合わせて余白やレイアウトが自動で調整されます。スマートフォン・タブレット・PCでも見やすく利用できます。
コメント