タスクの道筋 / 入力から結果へ
CSS 背景パターンを作る方法
- 01
パターンを選ぶ
「パターン」を開き、「ドット」「グリッド」「斜め」から選びます。3 つとも CSS グラデーションだけで構成され、画像ファイルは一切使いません。切り替えてもタイル、マーク、色の値は保持されるため、スタイルの比較にコストはかかりません。デフォルトの 28 px ドットグリッドは静かな出発点です。
- 02
タイルを設定する
「タイルサイズ」を 8〜96 px、「マーク幅」を 1〜16 px の間で選びます。マーク幅はタイルサイズの半分を超えられません。超えるとステータスが「値を確認」になり、該当するルールが示されます。
- 03
2 色を選ぶ
「パターンカラー」がマークを描き、「キャンバスカラー」がその下の地を塗ります。さりげないパターンは 2 色間の低いコントラストから生まれます。キャンバスよりわずかに暗い程度のマークは、装飾ではなく質感として読み取れます。
- 04
実際のスケールで繰り返しを判断する
プレビューは結果をパネル全体にタイル状に敷き詰めるため、弱いコントラストや窮屈なタイルはここで見抜けます。目安として、マークはタイルの半分より十分小さく保ちましょう。28 px タイルの 2 px マークは、ノイズではなく質感として読めます。
- 05
パターン CSS をコピーする
「CSS をコピー」または「.css をダウンロード」で toolars-background-pattern.css を保存します。.pattern ルールは background-color、background-image、background-size の 3 宣言だけで、どの要素にもそのまま適用できます。
- 06
ルールを適用して調整する
このルールは背景を描くだけなので、レイアウトへの副作用なしにどの要素にも適用できます。パターンの密度を変えたくなったら background-size を調整し、パターンがテキストと競合するときは、マークを小さくするのではなく 2 色間のコントラストを下げましょう。