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

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

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

基本

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

表示非表示

チェックすると選択した項目が消えるチェックボックスを作る方法
チェックで項目の表示・非表示を切り替えるチェックボックスを作る方法
チェックした件数を表示するチェックボックスを作る方法
チェックボックスでテーブルの列を表示・非表示にする方法
パスワードの表示・非表示を切り替えるテキストフィールドを作る方法

アニメーション

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

デザイン

立体的なくぼみがあるチェックボックスを作る方法
アイコン付きチェックボックスを作る方法
チェック時に色が変わるチェックボックスを作る方法

レイアウト

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

初期状態

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

自動

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

操作

一括選択機能付きチェックボックスを作る方法

状態維持

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

コンテンツ

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

入れ子

カード型チェックボックスを作る方法

入力・検証

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

応用

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