透明チェッカー背景ジェネレーター

機能

• チェッカー（格子）と 45° の斜めの縞の 2 種類
• 前景色と背景色はカラーピッカーで選択
• セルサイズは 4〜64px で調整可能
• ⚠️ チェッカーの 0/25/50/75/100 のストップを 1 つも省かず、グラデーションに化けません
• チェッカーは conic-gradient と 4 枚の linear-gradient の 2 通りと、その取捨を明記
• 斜めは repeating-linear-gradient とタイル版の 2 通り
• background の一括指定 1 行か、background-image / background-size / background-position に分けるかを選択
• リアルタイムのプレビュー。色が不正なら既定色に戻るため、生成される CSS は常に有効です
• すべてブラウザー内で完結し、何も送信しません

使い方

1. チェッカーか斜めかを選び、セルサイズを調整します
2. カラーピッカーで前景色と背景色を選びます
3. 一括指定か個別のプロパティかを選び、下のプレビューを確認します
4. 生成された CSS をコピーします

よくある質問

チェッカーが conic-gradient なのはなぜですか？繰り返しグラデーションではだめですか？

チェッカーは二次元で、`repeating-linear-gradient` は一次元（縞）だからです —— 1 本では格子を描けません。したがって格子は `conic-gradient` で 1 セルを 4 つの扇形にするか、`linear-gradient` を4 枚重ねるかのどちらかです。斜めは一次元なので `repeating-linear-gradient` が使えます。両方を用意しているので、対象のブラウザーで選べます。

ストップを 1 つ省くとどうなりますか？

エラーにはなりませんが模様が壊れます。たとえば `50% 75%` で止めると、ブラウザーが残りの区間をグラデーションにしてしまい、各セルの最後の四分の一がぼやけます —— 「だいたい合っている」ように見えて、じっと見ると違います。そこでここでは 0/25/50/75/100 の 5 つの境目をすべて明示し、25% と 75% の両方が含まれることをテストで確認しています。

一括指定と個別のプロパティはどちらを選ぶべきですか？

既にあるスタイルに混ぜるときは個別のプロパティ（`background-image` / `background-size` / `background-position` を別々に）を使ってください。他の層を保ったまま 1 つだけ変えられるからです。下地をゼロから書くときは `background` の一括指定のほうが短くなります。斜めのタイル版とチェッカーの linear 版は多層で、一括指定だと 1 行が長くなるため、ここでは常に個別のプロパティで出力します。