読み込み中...

CSSドット背景！5つの簡単な方法で作成しよう

CSSドット背景の作成方法 CSS
2024.02.19
この記事は約6分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

CSSを学び始めたばかりのあなたへ、ドット背景の作り方を徹底解説します。

この記事を読めば、初心者でも簡単にCSSドット背景を作成し、使いこなすことができます。

また、対処法や応用例も紹介するので、ドット背景を活用したデザインが自由自在になります。

●基本的なCSSドット背景の作り方

まずは、基本的なCSSドット背景の作り方を紹介します。

サンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    body {
      background-image: radial-gradient(circle, #000 1px, transparent 1px);
      background-size: 4px 4px;
    }
  </style>
</head>
<body>
</body>
</html>

このコードでは、radial-gradientとbackground-sizeを使用してドット背景を作成しています。

radial-gradientは円形グラデーションを生成し、background-sizeは背景のサイズを指定します。

ドットのサイズや間隔を調整したい場合は、background-sizeの値を変更してください。

●CSSドット背景の色を変える方法

次に、ドット背景の色を変える方法を紹介します。

サンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    body {
      background-image: radial-gradient(circle, #ff0000 1px, transparent 1px);
      background-size: 4px 4px;
    }
  </style>
</head>
<body>
</body>
</html>

このコードでは、radial-gradientの中にあるカラーコード（#ff0000）を変更することで、ドットの色を変更しています。

好みの色に変更することができます。

●CSSドット背景の透明度を変える方法

ドット背景の透明度を変える方法も紹介します。

サンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    body {
      background-image: radial-gradient(circle, rgba(0, 0, 0, 0.5) 1px, transparent 1px);
      background-size: 4px 4px;
    }
  </style>
</head>
<body>
</body>
</html>

このコードでは、radial-gradientの中にあるカラーコードをrgba形式に変更し、透明度を設定しています。

rgbaの最後の値（0.5）を変更することで、ドットの透明度を調整できます。

0（完全透明）から1（不透明）の範囲で指定してください。

●CSSドット背景の形状を変える方法

ドット背景の形状を変える方法も紹介します。

サンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    body {
      background-image: linear-gradient(90deg, #000 1px, transparent 1px), linear-gradient(#000 1px, transparent 1px);
      background-size: 4px 4px;
    }
  </style>
</head>
<body>
</body>
</html>

このコードでは、radial-gradientをlinear-gradientに変更し、角度を指定してドット背景の形状を変えています。

この例では、横方向と縦方向に線状のドット背景が作成されます。

●CSSドット背景の応用例: ホバーエフェクト

最後に、CSSドット背景を応用したホバーエフェクトを紹介します。

サンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    .button {
      display: inline-block;
      padding: 10px 20px;
      background-image: radial-gradient(circle, #000 1px, transparent 1px);
      background-size: 4px 4px;
      text-decoration: none;
      color: #fff;
      font-size: 16px;
      transition: 0.3s;
    }

    .button:hover {
      background-image: radial-gradient(circle, #ff0000 1px, transparent 1px);
    }
  </style>
</head>
<body>
  <a href="#" class="button">ボタン</a>
</body>
</html>

このコードでは、ボタンにドット背景を適用し、ホバー時にドットの色が変わるエフェクトを実現しています。

transitionプロパティを使ってアニメーション効果を付けています。

まとめ

この記事があなたの参考になれば幸いです。