【CSS】ドット模様を作る方法

CSSだけでドット模様を作成するのは、単純なCSSプロパティを使って非常に簡単に行うことができます。この方法を使うと、画像を使わずに背景にドットパターンを適用できます。以下に手順を示します。

ベースとなるHTML構造を作成
CSSでドット模様を作成
応用例
まとめ

ベースとなるHTML構造を作成

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSSドット模様</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="dot-pattern"></div>
</body>
</html>

CSSでドット模様を作成

次に、CSSを使ってドット模様を作成します。以下のCSSコードをstyles.cssファイルに追加します。

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dot-pattern {
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    background-image: radial-gradient(circle, #000000 1px, transparent 1px);
    background-size: 20px 20px;
}

background-imageプロパティを使用して、radial-gradientを使ったドットパターンを作成します。

radial-gradient(circle, #000000 1px, transparent 1px)は、黒いドットを1ピクセルの円として定義し、それ以外の部分を透明にします。

background-sizeプロパティを使って、ドットの間隔を設定します。この例では、ドットの間隔を20ピクセルに設定しています。

応用例

異なるドットの色やサイズを試すことで、さまざまなパターンを作成できます。

ドットの色とサイズを変更する

.dot-pattern {
    width: 100vw;
    height: 100vh;
    background-color: #f0f0f0;
    background-image: radial-gradient(circle, #ff0000 2px, transparent 2px);
    background-size: 25px 25px;
}

背景色を淡い灰色（#f0f0f0）に変更
ドットの色を赤（#ff0000）に変更
ドットのサイズを2ピクセルに変更
ドットの間隔を25ピクセルに設定

まとめ

この方法を使って、背景画像を使用せずにCSSだけで様々なドット模様を作成することができます。これにより、ウェブサイトのデザインに柔軟性と軽量化をもたらします。