ドット格子背景
等間隔のドットが整然と並ぶミニマルな背景パターンです。仕組みはとてもシンプルで、 radial-gradient で小さな点を1つ描き、 background-size:24px 24px でタイルのように敷き詰めているだけ。画像ファイルを一切使わないため読み込みが速く、拡大してもにじまない点が利点です。
解説
等間隔のドットが整然と並ぶミニマルな背景パターンです。仕組みはとてもシンプルで、radial-gradientで小さな点を1つ描き、background-size:24px 24pxでタイルのように敷き詰めているだけ。画像ファイルを一切使わないため読み込みが速く、拡大してもにじまない点が利点です。
使いどころ
テック系・コーポレートサイトのヒーロー背景、資料スライドの台紙、セクションを区切る帯などに向きます。中央のキャプションは半透明でなく不透明の白カードに乗せているので、ドットの上でも文字がしっかり読めます。
- 点の密度は
background-sizeの数値で調整（小さくすると密に、大きくすると疎に） - 点の色とサイズは
radial-gradientの色指定と1.5pxの値を書き換える - 背景色
#FDF8EFを変えるとパターン全体の印象が一新する
装飾的な背景なので本文の可読性を最優先し、点が濃すぎてテキストの邪魔にならないよう薄めの色を選ぶと失敗しません。
使用例・適したシーン
- ヒーロー背景
- セクション区切り
- フッター前装飾
よくある質問
ドットの間隔や大きさはどこで変えますか
間隔は background-size の値（初期は24px）で、点の大きさは radial-gradient 内の 1.5px の数値で調整します。色は radial-gradient の最初の色指定を書き換えてください。JavaScript は不要で、CSS だけで完結します。
画像ファイルを用意しなくても表示できますか
はい。CSSグラデーションだけで描いているため画像は不要です。ファイルの追加リクエストが発生せず表示も軽く、解像度に依存しないので高精細ディスプレイでもくっきり表示されます。