チェックボックス
コピペですぐ使えるチェックボックスのサンプルコードを動作・特徴別にまとめています。
無料ツール
チェックボックスを自由に作成

項目・並び方向・サイズ・色・枠線・角丸などを設定して、HTML・CSSを自動生成できます。

チェックボックス作成ツールを使う
新しいタブで開きます

基本

基本のチェックボックスを作る方法

フェード

チェックマークをフェードしながら表示するチェックボックスの作り方

指定時間

指定時間後にチェックできなくなるチェックボックスを作る方法

最初から

最初から項目が選択されたチェックボックスを作る方法

状態維持

ページを移動しても選択状態を記憶するチェックボックスの作り方

画像

画像付きチェックボックスを作る方法
画像をチェックボックスにする方法

立体的

立体的なくぼみがあるチェックボックスを作る方法

FAQ・Q&A向け

FAQ・Q&A向けチェックボックスの作り方

localStorage

ページを移動しても選択状態を記憶するチェックボックスの作り方

アイコン

アイコン付きチェックボックスを作る方法

フォーム

利用規約に同意すると送信できるチェックボックスを作る方法

並び方

横に2行で並ぶチェックボックスを作る方法
縦に2列で並ぶチェックボックスを作る方法
縦並びのチェックボックスを作る方法
横並びのチェックボックスを作る方法

応用

チェックすると選択した項目が消えるチェックボックスを作る方法
チェックで項目の表示・非表示を切り替えるチェックボックスを作る方法
チェックした件数を表示するチェックボックスを作る方法
一括選択機能付きチェックボックスを作る方法
カード型チェックボックスを作る方法
チェック時に色が変わるチェックボックスを作る方法
チェックボックスでテーブルの列を表示・非表示にする方法