横並びのチェックボックスを作る方法
複数のチェックボックスを横方向へ並べて表示する方法を紹介します。このサンプルでは、「HTML」「CSS」「JavaScript」「PHP」「Python」の5つのチェックボックスを用意し、それぞれの項目を左から右へ横並びで表示します。チェックボックスを縦方向へ1項目ずつ配置する場合と比べて、横方向のスペースを活用しながら複数の選択肢をコンパクトにまとめられます。
HTMLで各チェックボックスと項目名を配置し、CSSのFlexboxを使って横方向に整列させます。チェックボックス一覧へdisplay:flexとflex-wrap:wrapを設定することで、横幅に余裕がある場合は項目を横に並べ、すべての項目が収まらない場合は自動的に次の行へ折り返します。チェックボックスの選択にはHTML標準の動作を利用するため、JavaScriptは使用しません。
アンケートやお問い合わせフォーム、カテゴリー選択、設定画面など、複数の選択肢を横方向へまとめて表示したい場合に利用できます。画面幅640px以下ではチェックボックス一覧を左揃えに変更し、全体と各項目の余白も調整しています。項目名や項目数はHTMLから変更でき、項目同士の間隔、余白、枠線、角丸、チェックボックスの大きさなどはCSSから調整できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
興味のある項目を自由に選択してください。
各項目をクリックすると複数選択でき、画面幅が狭い場合は自動で次の行へ折り返されます。
コードをコピーして使おう！
<!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">
<!-- 5個のチェックボックスを横方向へ並べる一覧 -->
<div class="horizontal-checkbox_list">
<!-- HTMLのチェックボックス項目 -->
<label class="horizontal-checkbox_label">
<!-- HTMLを選択するチェックボックス -->
<input
class="horizontal-checkbox_input"
type="checkbox"
name="interest[]"
value="html">
HTML
</label>
<!-- CSSのチェックボックス項目 -->
<label class="horizontal-checkbox_label">
<!-- CSSを選択するチェックボックス -->
<input
class="horizontal-checkbox_input"
type="checkbox"
name="interest[]"
value="css">
CSS
</label>
<!-- JavaScriptのチェックボックス項目 -->
<label class="horizontal-checkbox_label">
<!-- JavaScriptを選択するチェックボックス -->
<input
class="horizontal-checkbox_input"
type="checkbox"
name="interest[]"
value="javascript">
JavaScript
</label>
<!-- PHPのチェックボックス項目 -->
<label class="horizontal-checkbox_label">
<!-- PHPを選択するチェックボックス -->
<input
class="horizontal-checkbox_input"
type="checkbox"
name="interest[]"
value="php">
PHP
</label>
<!-- Pythonのチェックボックス項目 -->
<label class="horizontal-checkbox_label">
<!-- Pythonを選択するチェックボックス -->
<input
class="horizontal-checkbox_input"
type="checkbox"
name="interest[]"
value="python">
Python
</label>
</div>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSSの2ファイルで構成されています。HTMLで5個のチェックボックスを配置し、CSSのFlexboxを使って各項目を横方向へ並べます。チェックボックスの選択にはHTML標準の動作を使用しているため、JavaScriptファイルは必要ありません。
チェックボックス一覧へdisplay:flexとflex-wrap:wrapを設定し、各項目を左から右へ横方向に配置します。すべての項目を1行に表示できない場合は次の行へ自動的に折り返されるため、項目数や表示領域の横幅に合わせてレイアウトが変化します。
外部ライブラリや外部サービス、API、画像などは使用していません。APIキーや外部URLなど利用者自身で用意する情報もなく、sampleフォルダ内のindex.htmlとstyle.cssだけで動作します。画面幅640px以下では項目を左揃えに変更し、全体と各項目の余白も調整しています。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlは、HTML・CSS・JavaScript・PHP・Pythonの5個のチェックボックスを記述するファイルです。それぞれのチェックボックスにはname="interest[]"を設定し、項目ごとに異なるvalueを指定しています。項目名や項目数を変更する場合は、このファイルを編集します。
style.cssは、チェックボックス全体の最大横幅、余白、背景色、枠線、角丸、横並びのレイアウト、項目同士の間隔、チェックボックスの大きさなどを設定するファイルです。横幅に収まらない項目を次の行へ折り返す設定や、画面幅640px以下で表示を調整するレスポンシブ設定も記述しています。
設置方法・使い方
sampleフォルダを作成し、その中へindex.htmlとstyle.cssを同じ階層で配置します。index.htmlでは<link rel="stylesheet" href="style.css">を使用してstyle.cssを読み込む構成になっています。2ファイルを配置したら、sample/index.htmlをブラウザで開きます。
横幅に余裕がある場合は、5個のチェックボックスが横方向へ並んで表示されます。それぞれの項目をクリックするとチェック状態を個別に切り替えられ、複数の項目を同時に選択することもできます。
表示領域が狭くなり、すべての項目を同じ行へ配置できなくなると、flex-wrap:wrapによって収まらない項目が次の行へ移動します。項目を追加した場合も同じ仕組みで必要に応じて自動的に折り返されます。
項目を追加する場合は、.horizontal-checkbox_labelと同じ構造のlabelを一覧内へ追加し、チェックボックスのvalueと表示する項目名を変更します。
カスタマイズできる内容
index.htmlでは、チェックボックスの項目名、項目数、name、valueを変更できます。現在は5項目すべてにname="interest[]"を設定していますが、実際にフォームへ組み込む場合は送信する内容に合わせて変更できます。
style.cssでは、全体の最大横幅、余白、背景色、枠線、角丸、項目同士の間隔、各項目の高さ、チェックボックスの大きさ、チェック時の色、項目名の文字サイズなどを変更できます。
横方向の配置はjustify-content:centerで中央揃えにしています。flex-startへ変更すると左揃えにできます。項目同士の間隔はgapからまとめて調整できます。
数値調整
style.css
padding:40px 20px;
ページ全体の余白です。40pxが上下、20pxが左右を表します。値を大きくすると画面端との間隔が広がります。
max-width:900px;
チェックボックス全体の最大横幅です。値を大きくすると多くの項目を同じ行へ配置しやすくなり、小さくすると項目が早い段階で次の行へ折り返されます。
margin:40px auto;
チェックボックス全体の上下余白です。40pxを大きくすると上下の間隔が広がります。autoによって左右中央へ配置します。
padding:32px;
チェックボックス全体の内側余白です。値を大きくすると外枠とチェックボックス一覧との間隔が広がります。
border:1px solid #dfe7f0;
チェックボックス全体と各項目に使用している枠線です。1pxを大きくすると枠線が太くなります。
border-radius:18px;
チェックボックス全体の角丸です。値を大きくすると丸みが強くなります。
gap:12px;
横並びのチェックボックス同士の縦横間隔です。値を大きくすると各項目の間隔が広がります。
min-height:52px;
各チェックボックス項目の最小高さです。値を大きくすると項目が高くなります。
padding:12px 18px;
各チェックボックス項目の内側余白です。12pxが上下、18pxが左右を表します。値を大きくすると枠線と内容との間隔が広がります。
border-radius:12px;
各チェックボックス項目の角丸です。値を大きくすると丸みが強くなります。
font-size:16px;
各項目名の文字サイズです。値を大きくすると文字が大きく表示されます。
width:22px;・height:22px;
チェックボックス本体の横幅と高さです。値を大きくするとチェックボックスが大きくなります。
margin:0 12px 0 0;
チェックボックス本体の右側余白です。12pxを大きくするとチェックボックスと項目名との間隔が広がります。
outline:3px solid rgba(11,107,255,.22);
キーボード操作でチェックボックスへフォーカスしたときの枠線です。3pxを大きくするとフォーカス枠が太くなります。
outline-offset:3px;
チェックボックス本体とフォーカス枠との間隔です。値を大きくするとフォーカス枠が外側へ離れます。
レスポンシブ対応
このサンプルではflex-wrap:wrapを設定しているため、メディアクエリの境界に関係なく、チェックボックスが表示領域へ収まらなくなった時点で自動的に次の行へ折り返されます。
さらに画面幅640px以下では@media (max-width:640px)を使用し、ページ全体の余白を24px 12px、チェックボックス全体の上下余白を24px、内側余白を24px 18pxへ縮小します。チェックボックス一覧はjustify-content:flex-startへ変更し、中央揃えから左揃えに切り替えます。各項目の左右余白も18pxから16pxへ縮小しています。
コメント