アイコン付きチェックボックスを作る方法
アイコン付きチェックボックスを作る方法を、HTMLとCSSのサンプルコードを使って紹介します。通常のチェックボックスにSVGアイコンと項目名を組み合わせ、選択肢の内容を文字だけでなく見た目でも区別しやすいデザインにします。各項目はチェックボックスをクリックまたはタップすることで選択・解除でき、JavaScriptを使わずHTML標準のチェックボックス機能だけで操作できます。
サンプルでは、チェックボックス・SVGアイコン・項目名を横並びに配置し、それぞれを1つの項目として表示します。SVGはHTML内へ直接記述しているため、アイコン用の画像ファイルや外部ライブラリを別途用意する必要はありません。CSSではチェックボックスの色、アイコンのサイズや背景色、枠線、角丸、項目同士の間隔などを設定しており、用途やサイトのデザインに合わせてカスタマイズできます。
お問い合わせ画面の選択項目、会員サイトの設定画面、管理画面の機能選択、ECサイトの商品条件やオプション選択など、複数の項目から必要なものを選んでもらう場面で利用できます。画面幅が640px以下の場合は外側や各項目の余白を小さくするレスポンシブ対応も行っているため、PCだけでなくスマートフォンでも配置を保ったまま操作できます。HTMLとCSSの2ファイルで構成されているので、チェックボックスにアイコンを付ける基本的な実装方法を確認したい場合にも利用しやすいサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
アイコン付きの項目を自由に選択してください。
各項目をクリックすると、SVGアイコン付きのチェックボックスを自由に選択・解除できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>アイコン付きチェックボックス</title>
<link
rel="stylesheet"
href="style.css"
>
</head>
<body>
<!-- アイコン付きチェックボックス -->
<div class="icon-checkbox_wrap">
<div class="icon-checkbox_list">
<!-- HTML -->
<label class="icon-checkbox_label">
<input
class="icon-checkbox_input"
type="checkbox"
name="skills[]"
value="html"
>
<!-- ホームアイコン -->
<span class="icon-checkbox_icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path d="M3 11L12 4L21 11"></path>
<path d="M5 10V20H19V10"></path>
<path d="M9 20V14H15V20"></path>
</svg>
</span>
<span class="icon-checkbox_name">HTML</span>
</label>
<!-- CSS -->
<label class="icon-checkbox_label">
<input
class="icon-checkbox_input"
type="checkbox"
name="skills[]"
value="css"
>
<!-- 検索アイコン -->
<span class="icon-checkbox_icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<circle cx="11" cy="11" r="6"></circle>
<path d="M16 16L21 21"></path>
</svg>
</span>
<span class="icon-checkbox_name">CSS</span>
</label>
<!-- JavaScript -->
<label class="icon-checkbox_label">
<input
class="icon-checkbox_input"
type="checkbox"
name="skills[]"
value="javascript"
>
<!-- ベルアイコン -->
<span class="icon-checkbox_icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path d="M18 8A6 6 0 0 0 6 8C6 15 3 16 3 16H21C21 16 18 15 18 8"></path>
<path d="M10 20H14"></path>
</svg>
</span>
<span class="icon-checkbox_name">JavaScript</span>
</label>
<!-- PHP -->
<label class="icon-checkbox_label">
<input
class="icon-checkbox_input"
type="checkbox"
name="skills[]"
value="php"
>
<!-- 設定アイコン -->
<span class="icon-checkbox_icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<circle cx="12" cy="12" r="3"></circle>
<path d="M12 2V5"></path>
<path d="M12 19V22"></path>
<path d="M4.9 4.9L7 7"></path>
<path d="M17 17L19.1 19.1"></path>
<path d="M2 12H5"></path>
<path d="M19 12H22"></path>
<path d="M4.9 19.1L7 17"></path>
<path d="M17 7L19.1 4.9"></path>
</svg>
</span>
<span class="icon-checkbox_name">PHP</span>
</label>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルは、HTMLとCSSの2ファイルで構成されています。HTMLではチェックボックス、SVGアイコン、項目名を組み合わせ、CSSでは各項目の配置やアイコンの大きさ、色、余白などのデザインを設定しています。
アイコンには画像ファイルや外部のアイコンライブラリを使用せず、SVGをHTML内へ直接記述しています。そのため、別途画像を用意したり、CDNや外部サービスを読み込んだりする必要はありません。
JavaScriptは使用していません。チェックボックスの選択と解除にはHTML標準の動作を利用しているため、ブラウザ上でそのまま操作できます。また、画面幅が640px以下になると余白や項目間のスペースを調整するレスポンシブ対応を行っています。
ファイル構成sample/
├── index.html
└── style.css
index.htmlには、4つのチェックボックスとSVGアイコン、項目名を記述しています。それぞれのチェックボックスはlabel要素でまとめているため、チェックボックス本体だけでなく項目部分をクリックして選択・解除できます。
SVGアイコンは.icon-checkbox_iconの中へ直接記述しています。SVGにはaria-hidden="true"を設定し、隣に表示している項目名と同じ内容を重複して読み上げないようにしています。
style.cssでは、チェックボックス全体の横幅、各項目の枠線や余白、SVGアイコンのサイズと色、文字の表示などを設定しています。外部CSSの影響を受けにくくするため、項目名にはフォントや文字方向なども明示的に指定しています。
ダウンロードしたsampleフォルダ内に、index.htmlとstyle.cssを同じ階層で配置します。index.htmlからstyle.cssを読み込む構成になっているため、ファイル名や配置を変更する場合は読み込み先も合わせて変更してください。
設置後はsample/index.htmlをブラウザで開くと、アイコン付きチェックボックスが表示されます。各項目をクリックまたはタップするとチェック状態を切り替えられます。
項目を追加する場合は、.icon-checkbox_labelのブロックを複製し、チェックボックスのvalue、表示するSVG、項目名を変更します。フォームで実際に値を送信する場合は、利用するフォームの仕様に合わせてnameとvalueを設定してください。
項目名は.icon-checkbox_name内の文字を変更することで自由に設定できます。SVGも.icon-checkbox_icon内のSVGコードを差し替えることで、用途に合わせたアイコンへ変更できます。
アイコンの背景色は.icon-checkbox_iconのbackground、SVGの線色はcolorで変更できます。各項目の背景色や枠線、角丸については.icon-checkbox_labelから調整できます。
チェック時の色は.icon-checkbox_inputのaccent-colorで変更できます。サイトのメインカラーに合わせて変更すると、既存デザインにもなじませやすくなります。
全体の最大横幅はmax-width:700px、内側の余白はpadding:32pxです。max-widthを大きくすると全体を広く、小さくするとコンパクトに表示できます。
各項目の最低の高さはmin-height:64px、内側の余白はpadding:14px 18pxです。項目同士の間隔はgap:12pxで調整できます。
チェックボックスは22px × 22px、アイコン背景は40px × 40px、SVG本体は24px × 24pxです。それぞれの数値を変更することで、チェックボックスとアイコンの大きさを調整できます。
チェックボックスとアイコン、アイコンと項目名の間隔は通常時16pxです。項目名の文字サイズは16px、行の高さは1.5、SVGの線の太さはstroke-width:2に設定しています。
外枠の角丸は18px、各項目の角丸は12px、アイコン背景の角丸は10pxです。数値を小さくすると角がはっきりし、大きくすると丸みのあるデザインになります。
画面幅が640px以下になると、ページ全体の余白を24px 12px、チェックボックス全体の内側余白を24px 18pxへ変更します。
各項目の余白は14pxになり、チェックボックスとアイコン、アイコンと項目名の間隔はそれぞれ14pxへ縮小します。項目自体は1列のまま表示されるため、スマートフォンでも縦方向に選択肢を確認できます。
コメント