基本のチェックボックスを作る方法
基本のチェックボックスを作る方法を紹介します。このサンプルでは、HTMLのcheckbox要素を使用し、複数の項目を自由に選択できるチェックボックスを作成します。HTML・CSSだけで実装しているため、シンプルな構成で導入しやすく、アンケートや入力フォームなどさまざまな場面で利用できます。チェックボックスは複数選択に対応しており、利用者が必要な項目だけを選択できる基本的なフォームを作成できます。
お問い合わせ画面、会員サイトのプロフィール設定、ECサイトの注文オプション、管理画面の設定項目、アンケートフォームなど、複数の選択肢を提示したい場面に適しています。各項目はクリックしやすいレイアウトになっており、チェックボックスと項目名をまとめて選択できるため、スマートフォン・タブレット・PCでも操作しやすいデザインになっています。
タイトル、説明文、チェック項目の追加・削除、表示する文字、value属性はHTMLから変更できます。CSSでは全体の横幅、余白、背景色、枠線、角丸、文字サイズ、チェックボックスの大きさや色などを用途に合わせて調整できます。レスポンシブにも対応しているため、初心者でも導入しやすく、実際のWebサイトでも利用しやすい基本的なチェックボックスのサンプルとして活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
興味のある項目を自由に選択してください。
各項目をクリックすると、複数のチェックボックスを自由に選択・解除できます。
コードをコピーして使おう！
<!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ファイルで構成されています。HTMLでは基本的なチェックボックスを複数配置し、利用者が複数の項目を自由に選択できるフォームを作成します。CSSでは全体レイアウトや各チェックボックス項目のデザイン、余白、文字サイズ、背景色、枠線などを設定し、見やすく操作しやすいデザインに仕上げています。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはチェックボックス全体を構成するファイルです。タイトル、説明文、チェック項目の追加・削除、表示する文字、value属性などを自由に変更できます。用途に合わせてアンケートや申込フォームなどへ利用できます。
style.cssは全体レイアウトやチェックボックス項目のデザインを設定するファイルです。横幅、余白、背景色、枠線、角丸、文字サイズ、チェックボックスの大きさや色などを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。表示されたチェックボックスをクリックすると項目を自由に選択・解除できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、チェック項目の追加・削除、表示文字、value属性を変更できます。用途に合わせてアンケート、利用規約への同意、興味のある分野の選択などへ変更できます。
style.cssでは全体の横幅、背景色、余白、角丸、枠線、文字サイズ、チェックボックスの大きさ、チェック時の色（accent-color）、項目同士の間隔などを変更できます。
数値調整
style.css
max-width:700px;
チェックボックス全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると詰まった表示になります。
border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
gap:12px;
チェックボックス項目同士の間隔です。値を大きくすると間隔が広がり、小さくすると狭くなります。
min-height:56px;
各チェックボックス項目の最小高さです。値を大きくするとクリックしやすくなり、小さくするとコンパクトになります。
padding:14px 18px;
各項目の内側余白です。上下14pxを大きくすると高さが増え、左右18pxを大きくすると文字との余白が広がります。
border-radius:12px;
各項目の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
width:22px;
チェックボックスの横幅です。値を大きくするとチェックボックスが大きく表示されます。
height:22px;
チェックボックスの高さです。値を大きくすると縦方向に大きく表示されます。
margin:0 14px 0 0;
チェックボックスと文字の間隔です。14pxを大きくすると文字との距離が広がり、小さくすると近付きます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより画面幅に合わせて全体が縮小されます。また、640px以下ではpaddingやmarginを調整し、スマートフォン・タブレット・PCでも見やすく操作しやすいレイアウトになります。
コメント