基本のチェックボックスを作る方法
基本のチェックボックスを作る方法を紹介します。このサンプルでは、HTMLのinput要素とlabel要素を使用し、複数の選択肢から必要な項目を自由に選べるチェックボックスを実装します。JavaScriptや外部ライブラリは使用せず、HTMLとCSSだけで動作するシンプルな構成です。
チェックボックスは、お問い合わせ画面の希望項目、会員登録フォームの興味分野、ECサイトの商品絞り込み、管理画面の設定項目など、複数の項目を同時に選択させたい場面で利用できます。チェック済みと未選択の状態が見分けやすいため、検索ユーザーが迷わず操作できる選択UIを作成できます。
コードはHTMLとCSSの2ファイルだけで構成されているため、そのままコピペして利用できます。表示する選択肢や文章はHTMLから変更でき、チェックボックスの色、サイズ、余白、角丸などはCSSから調整できます。画面幅に応じて横幅が縮小するため、スマートフォン・タブレット・PCでも利用しやすいサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
興味のある項目を自由に選択してください。
各項目をクリックすると、複数のチェックボックスを自由に選択・解除できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<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="basic-checkbox_wrap">
<!-- タイトル -->
<div class="basic-checkbox_title">
基本のチェックボックス
</div>
<!-- 説明文 -->
<p class="basic-checkbox_text">
興味のある項目を自由に選択してください。
</p>
<!-- チェックボックス一覧 -->
<div class="basic-checkbox_list">
<!-- HTMLの選択項目 -->
<label class="basic-checkbox_label">
<input
class="basic-checkbox_input"
type="checkbox"
name="interest[]"
value="html">
HTML
</label>
<!-- CSSの選択項目 -->
<label class="basic-checkbox_label">
<input
class="basic-checkbox_input"
type="checkbox"
name="interest[]"
value="css">
CSS
</label>
<!-- JavaScriptの選択項目 -->
<label class="basic-checkbox_label">
<input
class="basic-checkbox_input"
type="checkbox"
name="interest[]"
value="javascript">
JavaScript
</label>
<!-- PHPの選択項目 -->
<label class="basic-checkbox_label">
<input
class="basic-checkbox_input"
type="checkbox"
name="interest[]"
value="php">
PHP
</label>
</div>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成された基本的なチェックボックスです。index.html にチェックボックスの構造を記述し、style.css で見た目を整えています。JavaScriptを使用していないため、シンプルな構成でそのまま利用でき、フォームやアンケート画面などへ簡単に組み込めます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.html はチェックボックスの項目や表示する文章を記述するファイルです。項目の追加・削除や表示順の変更も行えます。
style.css は背景色、文字色、余白、枠線、角丸、チェックボックスのサイズなど、見た目全体を設定するファイルです。
設置方法・使い方
sample フォルダ内へ index.html と style.css を配置し、sample/index.html をブラウザで開くだけで利用できます。チェックボックスは複数選択できるため、お問い合わせフォーム、アンケート、ECサイトの商品絞り込み、管理画面の設定項目など幅広い場面で利用できます。
カスタマイズできる内容
index.html を編集すると、チェックボックスの項目名、項目数、value 属性を変更できます。style.css を編集すると、背景色、文字色、余白、枠線、角丸、文字サイズ、チェック時の色などを自由に変更できます。
数値調整
style.css の max-width:700px; は全体の最大横幅です。値を大きくすると横幅が広くなり、小さくするとコンパクトになります。
padding:32px;、padding:14px 18px; は全体や各項目の余白を調整します。値を変更するとゆとりのあるレイアウトやコンパクトな表示へ変更できます。
font-size:22px;、font-size:16px; はタイトルや各項目の文字サイズです。値を変更すると文字の大きさが変わります。
width:22px;、height:22px; はチェックボックス本体のサイズです。値を大きくするとチェックボックスが大きくなり、小さくするとコンパクトになります。
border-radius:18px;、border-radius:12px; は角丸の大きさです。値を大きくすると丸みが強くなり、小さくすると角張ったデザインになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.css の width:100%; と max-width:700px; により画面幅に応じてレイアウトが自動調整されます。また、画面幅640px以下ではメディアクエリによって余白を小さくしているため、スマートフォン・タブレット・PCでも見やすく利用できます。
コメント