横並びのチェックボックスを作る方法
横並びのチェックボックスを作る方法を紹介します。このサンプルでは、HTMLとCSSだけを使用して、複数のチェックボックスを横方向へ並べて表示します。選択肢を縦に並べる場合よりも表示領域をコンパクトにまとめられるため、項目数が少ないフォームや設定画面に適しています。
チェックボックスの一覧にはFlexboxを使用し、画面内に収まらない項目は次の行へ自動で折り返します。お問い合わせ画面の希望項目、アンケートの選択肢、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="horizontal-checkbox_wrap">
<!-- チェックボックスエリアのタイトル -->
<div class="horizontal-checkbox_title">
横並びのチェックボックス
</div>
<!-- 操作方法を案内する説明文 -->
<p class="horizontal-checkbox_text">
興味のある項目を自由に選択してください。
</p>
<!-- 複数のチェックボックスを横方向へ並べる一覧 -->
<div class="horizontal-checkbox_list">
<!-- HTMLのチェックボックス項目 -->
<label class="horizontal-checkbox_label">
<!-- HTMLの選択状態を管理するチェックボックス -->
<input
class="horizontal-checkbox_input"
type="checkbox"
name="interest[]"
value="html">
<!-- HTMLの項目名 -->
<span class="horizontal-checkbox_name">
HTML
</span>
</label>
<!-- CSSのチェックボックス項目 -->
<label class="horizontal-checkbox_label">
<!-- CSSの選択状態を管理するチェックボックス -->
<input
class="horizontal-checkbox_input"
type="checkbox"
name="interest[]"
value="css">
<!-- CSSの項目名 -->
<span class="horizontal-checkbox_name">
CSS
</span>
</label>
<!-- JavaScriptのチェックボックス項目 -->
<label class="horizontal-checkbox_label">
<!-- JavaScriptの選択状態を管理するチェックボックス -->
<input
class="horizontal-checkbox_input"
type="checkbox"
name="interest[]"
value="javascript">
<!-- JavaScriptの項目名 -->
<span class="horizontal-checkbox_name">
JavaScript
</span>
</label>
<!-- PHPのチェックボックス項目 -->
<label class="horizontal-checkbox_label">
<!-- PHPの選択状態を管理するチェックボックス -->
<input
class="horizontal-checkbox_input"
type="checkbox"
name="interest[]"
value="php">
<!-- PHPの項目名 -->
<span class="horizontal-checkbox_name">
PHP
</span>
</label>
<!-- Pythonのチェックボックス項目 -->
<label class="horizontal-checkbox_label">
<!-- Pythonの選択状態を管理するチェックボックス -->
<input
class="horizontal-checkbox_input"
type="checkbox"
name="interest[]"
value="python">
<!-- Pythonの項目名 -->
<span class="horizontal-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を配置します。
style.cssが読み込まれていることを確認したあと、sample/index.htmlをブラウザで開くと横並びのチェックボックスを利用できます。
カスタマイズできる内容
項目名やチェックボックスの追加・削除はindex.htmlで編集できます。
色・文字サイズ・余白・横並びの間隔・チェックボックスのサイズ・角丸などはstyle.cssで変更できます。
数値調整
max-widthを変更すると全体の横幅が変わります。
paddingを変更すると内側の余白が変わります。
gapを変更すると各項目の間隔が変わります。
font-sizeを変更するとタイトルや文字の大きさが変わります。
width・heightを変更するとチェックボックスのサイズが変わります。
border-radiusを変更すると角丸の大きさが変わります。
レスポンシブ対応
style.cssのmedia queryによりレスポンシブ対応しています。画面幅に応じて余白や配置を調整し、スマートフォン・タブレット・PCでも利用できます。また、width:100%とmax-widthを使用しているため、画面サイズに合わせてレイアウトが自然に収まります。
コメント