アイコン付きチェックボックスを作る方法
アイコン付きチェックボックスを作る方法を紹介します。通常のチェックボックスにアイコンを組み合わせることで、項目ごとの意味が伝わりやすくなり、視認性の高いフォームを作成できます。HTMLとCSSだけで実装できるため、JavaScriptを使わずに導入できるサンプルです。
チェックボックスの左側へアイコンを配置し、クリックするとチェック状態が切り替わります。お問い合わせフォームや設定画面、管理画面、会員サイト、アンケート画面など、選択項目を分かりやすく表示したい場面で利用できます。アイコンや文字、色はCSSとHTMLを編集するだけで簡単に変更できます。
レスポンシブにも対応しているため、スマートフォン・タブレット・PCでもレイアウトが崩れにくく、そのまま利用しやすい構成です。見た目を少し工夫したチェックボックスを作りたい場合や、アイコンを使ってユーザーが直感的に選択できるUIを作りたい場合におすすめです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
アイコン付きの項目を自由に選択してください。
各項目をクリックすると、アイコン付きチェックボックスを自由に選択・解除できます。
コードをコピーして使おう！
<!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="icon-checkbox_wrap">
<!-- チェックボックスエリアのタイトル -->
<div class="icon-checkbox_title">
アイコン付きチェックボックス
</div>
<!-- 操作方法を案内する説明文 -->
<p class="icon-checkbox_text">
アイコン付きの項目を自由に選択してください。
</p>
<!-- 複数のチェックボックスをまとめる一覧 -->
<div class="icon-checkbox_list">
<!-- HTMLのチェックボックス項目 -->
<label class="icon-checkbox_label">
<!-- HTMLの選択状態を管理するチェックボックス -->
<input
class="icon-checkbox_input"
type="checkbox"
name="interest[]"
value="html">
<!-- HTMLを表すアイコン -->
<span
class="icon-checkbox_icon"
aria-hidden="true">
🌐
</span>
<!-- HTMLの項目名 -->
<span class="icon-checkbox_name">
HTML
</span>
</label>
<!-- CSSのチェックボックス項目 -->
<label class="icon-checkbox_label">
<!-- CSSの選択状態を管理するチェックボックス -->
<input
class="icon-checkbox_input"
type="checkbox"
name="interest[]"
value="css"
checked>
<!-- CSSを表すアイコン -->
<span
class="icon-checkbox_icon"
aria-hidden="true">
🎨
</span>
<!-- CSSの項目名 -->
<span class="icon-checkbox_name">
CSS
</span>
</label>
<!-- JavaScriptのチェックボックス項目 -->
<label class="icon-checkbox_label">
<!-- JavaScriptの選択状態を管理するチェックボックス -->
<input
class="icon-checkbox_input"
type="checkbox"
name="interest[]"
value="javascript">
<!-- JavaScriptを表すアイコン -->
<span
class="icon-checkbox_icon"
aria-hidden="true">
⚙️
</span>
<!-- JavaScriptの項目名 -->
<span class="icon-checkbox_name">
JavaScript
</span>
</label>
<!-- PHPのチェックボックス項目 -->
<label class="icon-checkbox_label">
<!-- PHPの選択状態を管理するチェックボックス -->
<input
class="icon-checkbox_input"
type="checkbox"
name="interest[]"
value="php">
<!-- PHPを表すアイコン -->
<span
class="icon-checkbox_icon"
aria-hidden="true">
🐘
</span>
<!-- PHPの項目名 -->
<span class="icon-checkbox_name">
PHP
</span>
</label>
</div>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルは、HTMLとCSSだけでアイコン付きチェックボックスを作成するサンプルです。使用ファイルは HTML と CSS の2ファイルだけで構成されており、HTMLでチェックボックスとアイコンを配置し、CSSでレイアウトやデザインを設定しています。JavaScriptを使用しないため、そのままWebページへ組み込んで利用できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.html はチェックボックス、アイコン、項目名を配置するファイルです。表示する項目やアイコン、テキストの変更や追加を行えます。
style.css は配色、余白、文字サイズ、アイコンサイズ、チェックボックスの大きさなど、見た目全体を設定します。
設置方法・使い方
sample フォルダ内へ index.html と style.css を配置してください。配置後は sample/index.html をブラウザで開くだけで利用できます。各項目は複数選択・解除ができます。
カスタマイズできる内容
index.html では項目名やアイコン、チェックボックスの数を変更できます。
style.css では背景色、文字色、枠線、余白、角丸、文字サイズ、アイコンサイズ、チェックボックスの色などを変更できます。
数値調整
style.css
・max-width：全体の横幅
・padding：内側の余白
・gap：各項目やアイコンの間隔
・font-size：タイトル・文字・アイコンの大きさ
・border-radius：角丸の大きさ
・width・height：チェックボックスのサイズ
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.css のメディアクエリでスマートフォン向けの余白やアイコンサイズを調整しています。また、width:100% と max-width を使用しているため、スマートフォン・タブレット・PCでもレイアウトが崩れにくく表示できます。
コメント