radial-gradient()関数でいろんなドット柄を表現してみる

ドット柄の背景が使われたデザインなど、よくあると思います。

Web上で表現する場合、まるっと画像で指定、またはリピート画像を用意してbackground-repeatを活用して表現することがほとんどだったと思います。
ですが、デザインと場合によってはradial-gradient()関数で対応できる場合があります。

radial-gradient()関数とは（MDN）：
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Values/gradient/radial-gradient

いくつか試してみたいと思います。

やってみる

最後にCodePenのまとめがあります。

【1. 基本的なドット】

シンプルに水玉がきれいに並んでいるパターン。

HTML

<div class="dot-basic"></div>

CSS

.dot-basic {
  background-image: radial-gradient(circle, #ffffff 40%, transparent 45%);
  background-size: 33px 33px;
}

【2. 基本的なドットをちょっと調整】

ドットの位置を少し調整して水玉のサイズを大きくし、逆にダイヤ柄を目立たせてみたパターン。

HTML

<div class="dot-basic-reverse"></div>

CSS

.dot-basic-reverse {
  background-image: radial-gradient(circle, #ffffff 70%, transparent 75%);
  background-size: 30px 30px;
  background-position: 15px 15px; // ドットの位置を半分ずらす
}

【3. ポルカドット柄】

水玉が等間隔に配置されているパターン。
（このドットはポルカドットというのですね、今回初めて知りました）

HTML

<div class="dot-polka"></div>

CSS

.dot-polka {
  background-image: 
    radial-gradient(circle, #ffffff 15%, transparent 16%),
    radial-gradient(circle, #ffffff 15%, transparent 16%);
  
  background-size: 32px 32px;
  background-position: 0 0, 16px 16px; // 2つ目のドットの位置を半分ずらす
}

【4. ドットマトリックス風味】

ガジェットの画面のようなテック系のものに合いそうなパターン。
ドットを限りなく小さく小さく。

HTML

<div class="dot-matrix"></div>

CSS

.dot-matrix {
  background-color: #111827;
  background-image: radial-gradient(circle, rgba(0, 157, 105, 0.3) 10%, transparent 10%);
  background-size: 12px 12px;
}

【5. 某ウィンドウのようなドット】

どこかで見たことがあるドットのパターン。
こうやって作れるのは便利ですね。なにかに役立つ日が来そうです。
（※それぞれをボタンとしたい場合はまったく使えません）

HTML

<div class="mac-window">
  <div class="dot-mac-buttons"></div>
</div>

CSS

.mac-window {
  width: 100%;
  height: 200px;
  background-color: #f3f4f6;
  border-radius: 10px 10px 0 0;  
}

.dot-mac-buttons {
  width: 80px;
  height: 40px;

  background-image: 
    radial-gradient(circle at 20px 20px, #ff5f56 6px, transparent 7px), // 閉じる
    radial-gradient(circle at 40px 20px, #ffbd2e 6px, transparent 7px), // 最小化
    radial-gradient(circle at 60px 20px, #27c93f 6px, transparent 7px); // 最大化
  
  background-repeat: no-repeat;
}

【6. Figmaのプラグイン「Dot Grid」を使っていた場合】

Figmaのプラグインで「Dot Grid」というのがありまして、こちらを使うと綺麗に並んだドットが簡単に作成できます。
設定パネルも最低限しかないのでとても分かりやすいのではないでしょうか。

Dot Grid | Figma

さて、こちらのプラグインを使ったドットですが、単純に図形（Ellipse（円））が羅列されたものが出力されます。
なので、開発モードで確認しても background-image としてのコードはもちろん出てきません。
ただただ要素を横並びにするためのコードだけが取れます。

ですが、設定パネルにある「Width」「Height」「Size」「Gap」の数値を見て、同じように見えるようにCSSを書くことができます。
（多少微調整は必要です）

例　「Width: 300px」「Height: 300px」「Size: 30px」「Gap: 10px」であった場合

HTML

<div class="dot-grid-figma-plugin"></div>

CSS

.dot-grid-figma-plugin {
  width: 300px;
  height: 300px;

  background-image: radial-gradient(circle, #000000 15px, transparent 15px); // 30px x 0.5
  background-size: 40px 40px; // 30px + 10px
}

だいぶ似たのではないでしょうか。
リピート画像を作るか、これで乗り切るか、デザイナーさんとよく相談しましょう。

【CodePenで確認】

紹介した6つのドットをここにまとめました。実際に確認できます。

番外編：ちょっと遊んでみよう

ドットが打てるのではないかと思い付いたので、弊社名「ASTASTER」の文字のドットを打つイメージで試してみたいと思います。

出来てしまった…。
ですが手間がすごくかかったので、遊びでやるのがおすすめです。
フォントを探したり、画像で対応しましょう。

まとめ

Web上で表現するドット柄についてのお話でした。

ただ、Figma（プラグイン未使用）やXDなどでデータをもらった場合、デザインデータと少しでも違うのが許されない状況であれば、やはり画像一択かなと感じます。
けれども、CSSでも再現可能であると知っておくと、何かと役に立つかもしれません。

自分もより良い方法を選んで実装していけたらと思います。
最後まで読んでいただき、ありがとうございました。