チェックボックスの角を変更する方法
チェックボックスの角を変更する方法を紹介します。このサンプルでは、HTMLとCSSだけを使用して、四角・角丸・丸型の3種類のチェックボックスを作成します。CSSの border-radius の値を変更することで、同じ構造のチェックボックスを好みの形へ調整できます。
四角いチェックボックスはシンプルな入力フォーム、角丸デザインはお問い合わせ画面や会員登録フォーム、丸型デザインは管理画面やECサイトの商品選択などに利用できます。形の違いを比較できるため、Webサイトのデザインに合うチェックボックスを選びやすいサンプルです。
コードはHTMLとCSSの2ファイルだけで構成されており、JavaScriptや外部ライブラリは使用しません。項目名はHTMLから変更でき、チェックボックスの形はCSSの border-radius から調整できます。値を0にすると四角、数値を指定すると角丸、50%にすると丸型になります。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
四角・角丸・丸型の違いを確認できます。
各項目をクリックすると、形の異なるチェックボックスを選択・解除できます。
コードをコピーして使おう！
<!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-border-radius_wrap">
<!-- チェックボックスエリアのタイトル -->
<div class="checkbox-border-radius_title">
角の形を変更したチェックボックス
</div>
<!-- 表示している形を説明する文章 -->
<p class="checkbox-border-radius_text">
四角・角丸・丸型の違いを確認できます。
</p>
<!-- 3種類のチェックボックスをまとめる一覧 -->
<div class="checkbox-border-radius_list">
<!-- 四角型の選択状態を管理するチェックボックス -->
<input
class="checkbox-border-radius_input"
id="checkbox-border-radius-square"
type="checkbox"
name="shape[]"
value="square"
checked>
<!-- 四角型のチェックボックスと項目名をまとめるラベル -->
<label
class="checkbox-border-radius_label"
for="checkbox-border-radius-square">
<!-- border-radius:0で表示する四角型 -->
<span
class="checkbox-border-radius_box checkbox-border-radius_box--square"
aria-hidden="true">
</span>
<!-- 四角型の項目名 -->
<span class="checkbox-border-radius_name">
四角
</span>
</label>
<!-- 角丸型の選択状態を管理するチェックボックス -->
<input
class="checkbox-border-radius_input"
id="checkbox-border-radius-rounded"
type="checkbox"
name="shape[]"
value="rounded"
checked>
<!-- 角丸型のチェックボックスと項目名をまとめるラベル -->
<label
class="checkbox-border-radius_label"
for="checkbox-border-radius-rounded">
<!-- border-radius:7pxで表示する角丸型 -->
<span
class="checkbox-border-radius_box checkbox-border-radius_box--rounded"
aria-hidden="true">
</span>
<!-- 角丸型の項目名 -->
<span class="checkbox-border-radius_name">
角丸
</span>
</label>
<!-- 丸型の選択状態を管理するチェックボックス -->
<input
class="checkbox-border-radius_input"
id="checkbox-border-radius-circle"
type="checkbox"
name="shape[]"
value="circle"
checked>
<!-- 丸型のチェックボックスと項目名をまとめるラベル -->
<label
class="checkbox-border-radius_label"
for="checkbox-border-radius-circle">
<!-- border-radius:50%で表示する丸型 -->
<span
class="checkbox-border-radius_box checkbox-border-radius_box--circle"
aria-hidden="true">
</span>
<!-- 丸型の項目名 -->
<span class="checkbox-border-radius_name">
丸型
</span>
</label>
</div>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成された、チェックボックスの角を変更するサンプルです。index.html で四角・角丸・丸型のチェックボックスを配置し、style.css の border-radius でそれぞれの形を設定しています。JavaScriptや外部ライブラリは使用せず、CSSの :checked を利用してチェックマークを表示します。
sample/
├── index.html
└── style.css
各ファイルの役割
index.html はチェックボックスの構造を記述するファイルです。四角・角丸・丸型の項目名、value 属性、初期状態でチェックする項目を変更できます。
style.css はチェックボックス全体のレイアウトとデザインを設定するファイルです。チェックボックスの形、サイズ、色、余白、枠線、チェックマークを変更できます。
設置方法・使い方
sample フォルダ内へ index.html と style.css を配置し、sample/index.html をブラウザで開きます。各項目をクリックするとチェック状態が切り替わり、四角・角丸・丸型それぞれのチェックボックスで選択・解除できます。
カスタマイズできる内容
index.html の checkbox-border-radius_name 内を書き換えると項目名を変更でき、input 要素の value 属性を書き換えると送信時に使用する値を変更できます。初期状態で選択する項目は、対象の input 要素へ checked を付けて設定します。
style.css の border-radius を変更すると、チェックボックスの角を調整できます。0 は四角、7px は角丸、50% は丸型です。背景色や枠線色は #ffffff、#94a3b8、#2563eb を変更して調整できます。
数値調整
style.css の max-width:700px; は全体の最大横幅です。値を大きくすると表示領域が広くなり、小さくするとコンパクトになります。
width:24px; と height:24px; はチェックボックスの大きさです。2つを同じ値にすると正方形または円形を維持できます。
border-radius:0;、border-radius:7px;、border-radius:50%; は角の形を設定します。数値を大きくするほど角の丸みが強くなります。
width:6px; と height:11px; はレ点の大きさ、gap:14px; はチェックボックスと項目名の間隔、gap:12px; は各項目同士の間隔です。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.css の width:100%; と max-width:700px; により、画面幅に合わせて全体の横幅が自動調整されます。画面幅640px以下ではメディアクエリによって body、全体、各項目の余白を縮小しているため、スマートフォン・タブレット・PCで利用できます。
コメント