ドット柄を見ると職業柄ついパンチングメタル(等ピッチ穴明きの鉄板)を思い出すゴロドクさんです、どうも。 「CSSのみ画像不要のストライプ柄背景~」という記事に引き続き、CSSのみの背景パターンの作り方の解説です。今回はドット柄に挑戦です。 背景イメージに円形グラデーションを上適用してみる ベースとなるHTMLは前回同様1行のみです。単純なボックスの適用に対して考えてみます。 <div class="dot"></div> クラス名は自分で分かりやすいように適当につけておいてください。今回は単純にドット柄なので dot としておきますね。 基本CSSは以下の通りとします。 .dot{ display:block; width:300px; height:300px; background-color:#ff0040; } 【ブラウズ結果】 サンプルページ 300px×300pxのボックスに単
![CSSのみ画像不要のドット柄背景の作り方を若干丁寧に説明してみる](https://cdn-ak-scissors.b.st-hatena.com/image/square/e45fb59d957836d0d9fed0a8333f1316980a5f14/height=288;version=1;width=512/https%3A%2F%2Fblog.56doc.net%2Fwp-content%2Fuploads%2F2017%2F05%2Fsample001-2.png)