CSSだけでドット模様を作成するのは、単純な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ピクセルに設定
よくある質問（FAQ）
Q. CSSでボーダーを点線にするには？
A. border: 1px dotted #ccc;を設定します。border-styleのdottedで丸い点、dashedで四角い破線になります。
Q. CSSでドット背景パターンを作るには？
A. background: radial-gradient(circle, #ccc 1px, transparent 1px); background-size: 20px 20px;でドットパターンが作れます。
Q. CSSで複数の点を等間隔に並べるには？
A. FlexboxやGridで要素を等間隔に並べてborder-radius: 50%で丸くします。または::beforeとbox-shadowを使って単一要素から複数の点を描画する方法もあります。
まとめ
この方法を使って、背景画像を使用せずにCSSだけで様々なドット模様を作成することができます。これにより、ウェブサイトのデザインに柔軟性と軽量化をもたらします。