Softonic

CSSチェックボックスジェネレーター

ステップ 1 / 2
結果

デフォルトのチェックボックスはOSごとに見た目が異なり、再スタイリングも難しいものです。このジェネレーターは、ネイティブチェックボックスに思い通りの見た目を与える純粋なCSSを作成します。チェック時の色、枠線の色、サイズ、角丸を選んでください。スタイルは実際のinput要素に適用されるため、キーボード操作、スクリーンリーダー、フォーム送信はそのまま機能します。生成されたCSSをコピーしてスタイルシートに追加してください。

チェックボックスのスタイリング方法

  1. 1

    色を選ぶ

    チェック時の背景色とボックスの枠線の色を選択します。

  2. 2

    サイズを設定する

    12から48pxの間でサイズを選びます。

  3. 3

    形を設定する

    ボックスの角丸を選びます。最大20pxです。

  4. 4

    CSSをコピーする

    チェックマークをプレビューし、生成されたルールをスタイルシートにコピーします。

生成されるCSSの働き

ルールはappearance: noneとともに直接inputに適用されます。これによりデフォルトの見た目が取り除かれ、ボックスを自由にスタイリングできます：

.checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

チェックボックスがオンになると、ボックスは選択した色で塗りつぶされ、CSSで描かれた白いチェックマークが表示されます：

.checkbox:checked {
  background: #10b981;
  border-color: #10b981;
}
.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

ネイティブのinput要素を使う理由

このスタイルが要素をdivで置き換えることはありません。実際の<input type="checkbox">は、キーボードでのオンオフ、スクリーンリーダーへの対応、フォーム送信をそのまま保持します。appearance: noneが変えるのは見た目だけです。古いSafariをサポートする必要がある場合は、ルールに-webkit-appearance: noneを追加してください。

フォーカスとホバー

生成されるルールには滑らかな色の変化が含まれますが、ホバーやフォーカスのスタイルはありません。キーボードユーザーが常にフォーカス位置を確認できるよう、:hoverと:focus-visibleの独自ルールを追加してください。例えばボックスの周囲に色付きのアウトラインを付ける方法があります。

チェックマーク

チェックマークは45度回転させた小さな白い線です。別の色や、より細い・太い線が必要な場合は、::afterルールのborderとborder-widthの値を編集してください。

よくある質問

いいえ。CSSのみを出力します。フォーム内の実際のinput要素にクラスを適用してください。表示ラベルの有無は問いません。

はい。ルールはネイティブのinputにappearance: noneを使うだけなので、値は通常どおり送信され、キーボードとスクリーンリーダーのサポートも保たれます。

サイズはジェネレーターで12から48pxの間で設定します。チェックマークの色と太さは、生成されたCSSの::afterルールで編集します。

タッチ操作の対象には、少なくとも24px、できれば他のコントロールと同じ44pxを目指してください。デザイン上、ボックスはラベルのテキストに揃えてください。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

HTML フォーマッター

ブラウザ内で HTML を 2 または 4 スペースで整形します。HTML はアップロードも検証もされません。

カラーパレットジェネレーター

基準のHEXカラーから、モノクロマティック、類似色、補色、トライアド、テトラードのパレットを生成し、コピーしやすいCSS変数として書き出します。

変更ログジェネレーター

分類した項目から Keep a Changelog 形式の Markdown セクションを作成します。Added、Changed、Fixed、Removed の各カテゴリに項目を貼り付け、Markdown かプレーンテキストを選んで出力をコピーするだけです。

このツールは他の言語でも利用できます