CSS Tips | 超実務コアCSSテクニック：UIパーツ － チェックボックスカスタム

Web APP CSS
スポンサーリンク

チェックボックスカスタムは「見た目を変えても、意味はそのまま」にする UI テクニック

チェックボックスはフォームの中でも“意味が強い”パーツなので、 見た目を変えても、チェックできる・外せる・状態が分かる という本質を壊さないことが大事です。

そのために使うのが、 非表示の本体（input）＋見た目の箱（擬似要素）＋チェック状態の反映 という定番構造。

ここでは CSS と Tailwind CSS の両方で、 初心者でも迷わないように、実務で使えるチェックボックスカスタムを丁寧に解説します。

カスタムチェックボックスの基本構造

本体の input は隠す

見た目の箱は label や擬似要素で作る

チェック状態は :checked で反映する

この3ステップで、どんなデザインでも作れます。

例1：最も基本の「角丸チェックボックス」

CSS 版

.checkbox-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.checkbox-wrap input {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #64748b;
  border-radius: 6px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.checkbox-wrap input:checked {
  background: #2563eb;
  border-color: #2563eb;
}

.checkbox-wrap input:checked::after {
  content: "";
  position: relative;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
CSS
<label class="checkbox-wrap">
  <input type="checkbox">
  <span>利用規約に同意する</span>
</label>
HTML

Tailwind 版

<label class="flex items-center gap-2">
  <input
    type="checkbox"
    class="appearance-none w-5 h-5 border-2 border-slate-500 rounded-md
           checked:bg-sky-600 checked:border-sky-600
           checked:[&::after]:content-[''] 
           checked:[&::after]:block
           checked:[&::after]:w-[6px] checked:[&::after]:h-[12px]
           checked:[&::after]:border-white checked:[&::after]:border-r-2 checked:[&::after]:border-b-2
           checked:[&::after]:rotate-45 checked:[&::after]:translate-x-[5px] checked:[&::after]:translate-y-[2px]">
  <span>利用規約に同意する</span>
</label>
HTML

深掘りポイント

チェックマークは ::after で描くのが定番。 appearance: none でブラウザ標準の見た目を消し、 自分で枠・背景・チェックマークを作ります。

例2：丸型の「ラジオ風チェックボックス」

CSS 版

.circle-check {
  appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid #64748b;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.circle-check:checked {
  background: radial-gradient(circle, #2563eb 40%, transparent 41%);
  border-color: #2563eb;
}
CSS
<label class="flex items-center gap-2">
  <input type="checkbox" class="circle-check">
  <span>ニュースを受け取る</span>
</label>
HTML

Tailwind 版

<label class="flex items-center gap-2">
  <input
    type="checkbox"
    class="appearance-none w-5 h-5 border-2 border-slate-500 rounded-full
           checked:border-sky-600
           checked:bg-[radial-gradient(circle,#2563eb_40%,transparent_41%)]">
  <span>ニュースを受け取る</span>
</label>
HTML

深掘りポイント

丸型チェックは「選択感」が強く、 ラジオボタンのような柔らかい印象になります。

例3：チェック時に“ポップに跳ねる”アニメーション

CSS 版

.check-anim {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #64748b;
  border-radius: 6px;
  transition: transform 0.2s ease, background 0.2s ease;
}

.check-anim:checked {
  background: #22c55e;
  border-color: #22c55e;
  transform: scale(1.15);
}
CSS
<label class="flex items-center gap-2">
  <input type="checkbox" class="check-anim">
  <span>メール通知をオンにする</span>
</label>
HTML

Tailwind 版

<label class="flex items-center gap-2">
  <input
    type="checkbox"
    class="appearance-none w-5 h-5 border-2 border-slate-500 rounded-md
           transition
           checked:bg-emerald-500 checked:border-emerald-500
           checked:scale-110">
  <span>メール通知をオンにする</span>
</label>
HTML

深掘りポイント

チェック時に少し大きくするだけで、 「選択した！」というフィードバックが強くなります。

例4：チェック時にアイコンを表示する（SVG版）

CSS 版

.check-icon {
  appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid #64748b;
  border-radius: 6px;
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.check-icon:checked {
  background-image: url('check.svg');
  background-color: #2563eb;
  border-color: #2563eb;
}
CSS

Tailwind 版

<label class="flex items-center gap-2">
  <input
    type="checkbox"
    class="appearance-none w-5 h-5 border-2 border-slate-500 rounded-md
           bg-no-repeat bg-center bg-[length:70%]
           checked:bg-sky-600 checked:border-sky-600
           checked:bg-[url('check.svg')]">
  <span>チェックアイコン版</span>
</label>
HTML

深掘りポイント

SVG を使うと、 より「UIらしい」チェックボックスになります。

例5：アクセシブルな“フォーカスリング付き”チェックボックス

CSS 版

.check-access {
  appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid #64748b;
  border-radius: 6px;
  transition: outline 0.2s ease;
}

.check-access:focus {
  outline: 3px solid rgba(37, 99, 235, 0.4);
  outline-offset: 2px;
}

.check-access:checked {
  background: #2563eb;
  border-color: #2563eb;
}
CSS

Tailwind 版

<label class="flex items-center gap-2">
  <input
    type="checkbox"
    class="appearance-none w-5 h-5 border-2 border-slate-500 rounded-md
           focus:outline focus:outline-[3px] focus:outline-sky-500/40 focus:outline-offset-2
           checked:bg-sky-600 checked:border-sky-600">
  <span>アクセシブルチェック</span>
</label>
HTML

深掘りポイント

フォーカスリングはアクセシビリティの要。 outline を消すのではなく「見やすくする」のが正解です。

チェックボックスカスタムの設計ポイント

input は必ず残す（display:none は NG）

display:none にするとキーボード操作やスクリーンリーダーが使えなくなります。 appearance:none で見た目だけ消すのが正しい方法。

label とセットで使う

クリック範囲が広がり、操作性が大きく向上します。

状態変化は「色＋形＋動き」のどれか

色だけ 色＋影 色＋拡大 アイコン表示 など、変化を絞ると上品になります。

そのまま使える「万能チェックボックス」（Tailwind）

<label class="flex items-center gap-2">
  <input
    type="checkbox"
    class="appearance-none w-5 h-5 border-2 border-gray-400 rounded-md
           focus:outline focus:outline-[3px] focus:outline-sky-500/40 focus:outline-offset-2
           checked:bg-sky-600 checked:border-sky-600
           checked:[&::after]:content-[''] checked:[&::after]:block
           checked:[&::after]:w-[6px] checked:[&::after]:h-[12px]
           checked:[&::after]:border-white checked:[&::after]:border-r-2 checked:[&::after]:border-b-2
           checked:[&::after]:rotate-45 checked:[&::after]:translate-x-[5px] checked:[&::after]:translate-y-[2px]">
  <span class="text-slate-800">チェックしてください</span>
</label>
HTML

影・フォーカスリング・チェックマークが揃っていて、 どんな UI にも使える万能テンプレートです。

さいごに

チェックボックスカスタムは、 「意味を壊さずに、見た目を整える」 UI デザインです。

影・色・アイコン・アニメーションを少し足すだけで、 フォームの質感が大きく向上します。

もしあなたが作っているフォーム（設定画面、問い合わせ、ログインなど）があれば、 その画面に合わせた最適なチェックボックスデザインを一緒に作れます。

スポンサーリンク
タイトルとURLをコピーしました