チェック時に色が変わるチェックボックスを作る方法
チェック時に色が変わるチェックボックスを作る方法を紹介します。このサンプルでは、HTMLとCSSだけを使用して、チェックした項目の背景色や枠線、文字色が変化するチェックボックスを実装します。JavaScriptを使用しないため、シンプルな構成のまま視覚的に分かりやすい選択UIを作成できます。
チェック済みの項目を目立たせたいお問い合わせフォームやアンケート、ECサイトの商品オプション、管理画面の設定項目などで利用できます。未選択と選択済みを色で区別できるため、利用者が現在の状態をひと目で確認しやすく、操作ミスの防止にも役立ちます。
コードはHTMLとCSSのみで構成されているため、そのままコピペして利用できます。表示する項目は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="checkbox-color-change_wrap">
<!-- チェックボックスエリアのタイトル -->
<div class="checkbox-color-change_title">
色が変わるチェックボックス
</div>
<!-- 操作方法を案内する説明文 -->
<p class="checkbox-color-change_text">
チェックすると背景色と文字色が変わります。
</p>
<!-- 複数のチェックボックスをまとめる一覧 -->
<div class="checkbox-color-change_list">
<!-- HTMLの選択状態を管理するチェックボックス -->
<input
class="checkbox-color-change_input"
id="checkbox-html"
type="checkbox"
name="interest[]"
value="html"
checked>
<!-- HTMLのチェックボックスと項目名をまとめるラベル -->
<label
class="checkbox-color-change_label"
for="checkbox-html">
<!-- HTML用のチェックマーク表示エリア -->
<span
class="checkbox-color-change_box"
aria-hidden="true">
</span>
<!-- HTMLの項目名 -->
<span class="checkbox-color-change_name">
HTML
</span>
</label>
<!-- CSSの選択状態を管理するチェックボックス -->
<input
class="checkbox-color-change_input"
id="checkbox-css"
type="checkbox"
name="interest[]"
value="css">
<!-- CSSのチェックボックスと項目名をまとめるラベル -->
<label
class="checkbox-color-change_label"
for="checkbox-css">
<!-- CSS用のチェックマーク表示エリア -->
<span
class="checkbox-color-change_box"
aria-hidden="true">
</span>
<!-- CSSの項目名 -->
<span class="checkbox-color-change_name">
CSS
</span>
</label>
<!-- JavaScriptの選択状態を管理するチェックボックス -->
<input
class="checkbox-color-change_input"
id="checkbox-javascript"
type="checkbox"
name="interest[]"
value="javascript"
checked>
<!-- JavaScriptのチェックボックスと項目名をまとめるラベル -->
<label
class="checkbox-color-change_label"
for="checkbox-javascript">
<!-- JavaScript用のチェックマーク表示エリア -->
<span
class="checkbox-color-change_box"
aria-hidden="true">
</span>
<!-- JavaScriptの項目名 -->
<span class="checkbox-color-change_name">
JavaScript
</span>
</label>
<!-- PHPの選択状態を管理するチェックボックス -->
<input
class="checkbox-color-change_input"
id="checkbox-php"
type="checkbox"
name="interest[]"
value="php">
<!-- PHPのチェックボックスと項目名をまとめるラベル -->
<label
class="checkbox-color-change_label"
for="checkbox-php">
<!-- PHP用のチェックマーク表示エリア -->
<span
class="checkbox-color-change_box"
aria-hidden="true">
</span>
<!-- PHPの項目名 -->
<span class="checkbox-color-change_name">
PHP
</span>
</label>
</div>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成された、チェック時に色が変わるチェックボックスです。index.html でチェックボックスの項目と選択状態を管理し、style.css で未選択時とチェック時の背景色・枠線・文字色・チェックマークを切り替えています。JavaScriptや外部ライブラリは使用せず、CSSの :checked を利用して動作します。
sample/
├── index.html
└── style.css
各ファイルの役割
index.html はチェックボックスの構造を記述するファイルです。項目名、項目数、value 属性、初期状態でチェックする項目を変更できます。
style.css はチェックボックス全体のレイアウトとデザインを設定するファイルです。未選択時とチェック時の背景色・枠線・文字色、チェックマークの形、余白、角丸、文字サイズを変更できます。
設置方法・使い方
sample フォルダ内へ index.html と style.css を配置し、sample/index.html をブラウザで開きます。各項目をクリックするとチェック状態が切り替わり、選択した項目の背景色・枠線・文字色が青系へ変化します。複数の項目を同時に選択できます。
カスタマイズできる内容
index.html の checkbox-color-change_name 内を書き換えると表示する項目名を変更でき、input 要素の value 属性を書き換えると送信時に使用する値を変更できます。項目を追加する場合は、input 要素と対応する label 要素を1組として追加し、input の id と label の for に同じ固有の値を指定します。初期状態で選択する項目は、対象の input 要素へ checked を付けます。
style.css では、#eaf2ff を変更するとチェック時の背景色、#2563eb を変更すると枠線・文字・チェックボックスの色、#ffffff を変更するとチェックマークの色を調整できます。
数値調整
style.css の max-width:700px; は全体の最大横幅です。値を大きくすると表示領域が広くなり、小さくするとコンパクトになります。
width:22px; と height:22px; はチェックボックスの大きさ、width:6px; と height:11px; はレ点の大きさを設定します。
gap:16px; はチェックボックスと項目名の間隔、gap:12px; は各項目同士の間隔です。
border-radius:18px;、border-radius:12px;、border-radius:6px; は全体・項目・チェックボックスの角丸を設定します。値を大きくすると丸みが強くなります。
transition:background-color 0.2s, border-color 0.2s, color 0.2s; の 0.2s は色が切り替わる時間です。値を大きくするとゆっくり、小さくすると速く変化します。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.css の width:100%; と max-width:700px; により、画面幅に合わせて全体の横幅が自動調整されます。画面幅640px以下ではメディアクエリによって body、全体、各項目の余白を縮小しているため、スマートフォン・タブレット・PCで利用できます。
コメント