CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

repeating-radial-gradient()関数の使い方｜CSSで繰り返し放射状グラデーションを作成する方法

CSSのrepeating-radial-gradient()関数を使用すると、中心点から外側に向かって広がる放射状グラデーション（radial gradient）を、指定した範囲で繰り返し描画できます。通常のradial-gradient()関数と異なり、グラデーションのパターンが要素全体に自動的に反復されるため、ストライプ状や同心円状の装飾的な背景を簡単に作成できます。

基本構文

background: repeating-radial-gradient(色 位置%, 色 位置%, ...);

各カラーストップには「色」と「開始位置」を指定します。最後のカラーストップの位置まで達すると、そのパターンが繰り返されます。

実装例

以下のコードでは、緑・オレンジ・栗色（マルーン）の3色を使った繰り返し放射状グラデーションを実装しています。ブラウザで表示すると、同心円状のパターンが繰り返し描画されているのが確認できます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #demo {
            height: 300px;
            background: repeating-radial-gradient(green 20%, orange 40%, maroon 40%);
         }
      </style>
   </head>
   <body>
      <p>繰り返し放射状グラデーションのサンプル</p>
      <div id = "demo"></div>
   </body>
</html>

ポイント解説

  • green 20%：中心から20%までが緑色になります。
  • orange 40%：20%〜40%の間がオレンジ色へと滑らかに変化します。
  • maroon 40%：40%の位置で栗色に切り替わり、ここで一つのパターンが完了し、以降同じパターンが繰り返されます。

このようにカラーストップの位置を調整することで、グラデーションの変化の幅や繰り返しの間隔を自由にコントロールできます。ボタンの装飾や背景パターンなど、さまざまな場面で活用できる便利なCSS関数です。

  1. CSSのrotate()関数の使い方 – 要素を回転させる方法を解説

    CSSのrotate()関数とは？CSSのrotate()関数は、要素を回転させるための変換関数です。transformプロパティと組み合わせて使用し、指定した角度だけ要素を回転させることができます。引数には回転角度を指定します。単位はdeg（度）やrad（ラジアン）などが利用可能で、正の値を指定すると時計回りに、負の値を指定すると反時計回りに回転します。指定できる角度の単位deg（度）：360degで1回転rad（ラジアン）：約6.28rad（2π）で1回転grad（グラード）：400gradで1回転turn（回転数）：1turnで1回転使用例以下の例では、複数の段落要素を表示し、そのうちの

  2. CSS rgba()関数の使い方を解説！透明度付きの色指定方法と実例

    rgba()関数とはCSSのrgba()関数は、赤（Red）、緑（Green）、青（Blue）の3原色に加えて、アルファ（Alpha）チャンネルによる透明度を含めたRGBAカラーバリューを定義するための関数です。アルファ値は色の不透明度を表し、0.0〜1.0の範囲の数値で指定します。1.0が完全に不透明な状態、0.0が完全に透明な状態を意味します。基本的な構文は以下のとおりです。rgba(red, green, blue, alpha)red / green / blue：各色成分を0〜255の整数、またはパーセンテージで指定します。alpha：不透明度を0.0（完全に透明）〜1.0（完全に不