CSS Stockを表示するスマートフォンのモック
デザインの例1デザインの例2デザインの例3

HTML・CSSでつくるおしゃれなチェックボックスのデザイン3選

HTML・CSSでつくるチェックボックスのデザインをまとめました。丸型のものからボタン風のもの、アニメーション付きのものまでどれもコピペで簡単にカスタマイズすることが可能です。もちろん、縦並び・横並びの選択にも対応しています。

ボタン型のチェックボックス

スタンダード

スタンダード

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 並びの向き
  • 形状
背景色あり

背景色あり

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 並びの向き
  • 形状

チェック時に背景色ごと変わるチェックボックスです。白いチェックマークを際立たせるために、基調色はコントラストが強めの色にするのがおすすめです。

リスト型のチェックボックス

枠線 & 背景色

枠線 & 背景色

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 形状