【HTML/CSS】CSSで水玉模様やドット柄背景を作る方法

2022-12-28 2025.01.02

1 水玉模様やドット柄背景とは
2 CodePen ソースコードサンプル
3 基本的なHTML構造
4 CSSで水玉模様やドット柄背景を作成する方法

ウェブデザインにおいて、背景に水玉模様やドット柄を取り入れることで、視覚的な魅力と遊び心を加えることができます。これらのパターンはシンプルながらも効果的で、さまざまなデザインスタイルにマッチします。本記事では、CSSを使用して水玉模様やドット柄背景を作成する方法を、具体的なコード例とともに詳しく解説します。

水玉模様やドット柄背景とは

水玉模様やドット柄背景は、均等に配置された丸い点や小さな円で構成されたパターンです。これらのパターンは、シンプルでありながら視覚的に印象的なデザインを実現し、テキストや他のコンテンツを引き立てる効果があります。水玉模様やドット柄は、ブランドアイデンティティの強化や、セクションの区切りとしても活用されます。

CodePen ソースコードサンプル

基本的なHTML構造

水玉模様やドット柄背景を適用するための基本的なHTML構造は非常にシンプルです。以下のような<div>要素にクラスを付与し、CSSでスタイリングを行います。

<div class="dots">
  <p class="text">テキストテキストテキストテキストテキスト</p>
</div>

解説:

<div class="dots">: ドット柄背景を適用するコンテナ要素です。
<p class="text">: 背景上に表示されるテキスト要素です。適宜スタイリングします。

CSSで水玉模様やドット柄背景を作成する方法

CSSのradial-gradientを使用して、水玉模様やドット柄の背景を作成します。以下に基本的なスタイルを示します。

.dots {
  --DOTS_COLOR: #ace8f2;
  --DOTS_SIZE: 20px;
  --DOTS_POSITION: 20%;
  background-image:
    radial-gradient(var(--DOTS_COLOR) var(--DOTS_POSITION), transparent var(--DOTS_POSITION)),
    radial-gradient(var(--DOTS_COLOR) var(--DOTS_POSITION), transparent var(--DOTS_POSITION));
  background-size: var(--DOTS_SIZE) var(--DOTS_SIZE);
  background-position: 0 0, calc(var(--DOTS_SIZE) / 2) calc(var(--DOTS_SIZE) / 2);
}
.text {
  text-align: center;
  padding-block: 200px;
}

ポイント:

カスタムプロパティ（CSS変数）を使用して、ドットの色、サイズ、位置を簡単に調整可能。
radial-gradientを用いて、繰り返しのドットパターンを生成。
background-sizeとbackground-positionを調整することで、ドットの配置を制御。

コードの詳細解説

--DOTS_COLOR: ドットの色を指定します。ここでは薄い青色（#ace8f2）を使用しています。
--DOTS_SIZE : ドットパターンの一つのセルのサイズを指定します。
--DOTS_POSITION: ドットのサイズ（直径）の割合を指定します。
radial-gradient: 放射状のグラデーションを生成します。ここでは、指定した色から透明にグラデーションすることで、ドットの形状を作成しています。
重ね合わせ: 二つのradial-gradientを重ね合わせることで、縦横に均等に配置されたドットパターンを形成します。