CSSチェックボックス生成器
オリジナルデザインのCSSチェックボックスをGUIで作成。 アニメーションや色・形状を自在にカスタマイズできる。
#6366f1
#ffffff
#d1d5db
プレビュー
HTMLコード
<label class="custom-checkbox">
<input type="checkbox" />
<span class="checkmark"></span>
Label text
</label>CSSコード
.custom-checkbox {
display: inline-flex;
align-items: center;
cursor: pointer;
user-select: none;
gap: 8px;
font-size: 14px;
color: #374151;
}
.custom-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.custom-checkbox .checkmark {
position: relative;
height: 24px;
width: 24px;
background-color: #ffffff;
border: 2px solid #d1d5db;
border-radius: 50%;
transition: all 0.2s ease;
flex-shrink: 0;
}
.custom-checkbox:hover .checkmark {
border-color: #6366f1;
}
.custom-checkbox input:checked + .checkmark {
background-color: #6366f1;
border-color: #6366f1;
}
.custom-checkbox .checkmark::after {
content: "";
position: absolute;
display: none;
left: 5px;
top: 2px;
width: 6px;
height: 12px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.custom-checkbox input:checked + .checkmark::after {
display: block;
}このツールをシェア
📖
使い方
Step 1
デザイン選択
チェックボックスのデザインテンプレートを選択
→
Step 2
カスタマイズ
色・サイズ・角丸・アニメーションなどを調整
→
Step 3
コードコピー
HTML/CSSコードをコピー
✨
このツールの特徴
リアルタイムプレビュー
カスタマイズ内容をリアルタイムでプレビュー表示
豊富なテンプレート
チェックマーク・スライド・バウンスなど多彩なアニメーション付きテンプレート
アクセシブル
セマンティックなHTML構造でスクリーンリーダー対応のコードを生成
❓
よくある質問
ブラウザのデフォルトチェックボックスの外観をCSSで独自デザインに変更したものです。
🔗関連ツール
🎨
デザインカラーコード変換器
HEX・RGB・HSLのカラーコードを相互変換。 カラーピッカーとリアルタイムプレビューで直感的に操作。
🎨
デザインカラーピッカー
カラーホイールやスライダーで直感的に色を選べるツール。 HEX・RGB・HSL形式でカラーコードを取得・コピーできる。
🎨
デザイン画像色抽出器
画像から主要な色を自動検出してカラーパレットを生成。 画像上の任意の位置をクリックして個別に色を取得することも可能。
🎯
デザイン画像平均色取得
画像全体または選択範囲の平均色を算出するツール。 デザインの配色決めやサムネイル背景色の決定に活用できる。
🌈
デザインCSSグラデーション生成器
CSSグラデーションをドラッグ操作で視覚的に作成するツール。 リニア・ラジアル・コニックの3タイプとプリセットを搭載。
🔲
デザインCSSボックスシャドウ生成器
CSSのbox-shadowをスライダーで視覚的に調整・生成するツール。 複数シャドウの重ね合わせや内側シャドウ（inset）にも対応。