【コピペでカンタン】CSSだけで作れるドット（水玉）柄
苦労してシームレスな画像を用意してなくても、スタイルシートだけでドット（水玉）が作れます。
サンプルもいくつか用意していますので、コピペでどうぞ。
この記事で分かること
- CSSだけでドット（水玉）柄を作る方法
豊かに引きこもる。
Webデザインは器。ブログは中身。
「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
おウチで豊かに楽しく暮らす方法をご紹介しています。
ドット（水玉）柄の作り方
コピペでサクッと済ませたい方はこちらのCSSをどうぞ
各パラメータをいじると、色や水玉のサイズがカスタマイズできます。
div{
background-image:radial-gradient(#DDD 5px, #FFF 5px);
background-size:20px 20px;
}以下、ロジックを説明します。
ドット（水玉）のしくみをじっくり解説
円形のグラデーション（radial-gradientプロパティ）を工夫して水玉に見せている、というのがこちらの種明かしです。
ということでここからは、まず基本のグラデーションから始めて、少しずつ水玉柄に整えていきながら内容を確認していきます。
基本のグラデーション
グラデーションの実装にはbackground-imageプロパティを使います。「background-color」ではないので注意。
例えば黒（#000）から白（#FFF）へ変わる円形グラデーションは、以下のような表記で実装することができます。
div{
background-image:radial-gradient(#000, #FFF);
}radial-gradient(色1, 色2)のように、半角カンマ区切りで色を繋げていきます。3色以上のグラデーションも可能です。
グラデーション位置の変更
色指定の後にサイズに関する数値を追加することによって、グラデーションの切り替わり位置を指定することができます。
以下は、横半径50pxの位置で色1から色2に突然切り替えることで、輪郭のハッキリした円に見せています。
div{
background-image:radial-gradient(#DDD 50px, #FFF 50px);
}グラデーションサイズの変更
「background-sizeプロパティを使うと、グラデーションのサイズを指定することができます。
以下では、20*20pxの正方形内に半径5pxの円が入っているパターンを作っています。
パターンは要素内を敷き詰めるように繰り返されるので、結果、水玉柄になります。
div{
background-image:radial-gradient(#DDD 5px, #FFF 5px);
background-size:20px 20px;
}これでドット（水玉）柄の完成です。
まとめ
これで、シームレスな背景用の画像を用意する手間から解放されますね。
CSSだけで作れるボーダー・ストライプ柄編、チェック(格子)柄編もオススメです。
