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

CSSのrepeating-linear-gradient()関数で線形グラデーションを繰り返す方法

CSSのrepeating-linear-gradient()関数を使用すると、指定した色の変化を自動的に繰り返す線形グラデーションを作成できます。通常のlinear-gradient()関数と異なり、グラデーションパターンが要素全体に何度も繰り返し描画されるため、ストライプ模様や縞々の背景などを簡単に実現できるのが特徴です。

基本構文

background: repeating-linear-gradient(角度または方向, 色1 位置1, 色2 位置2, ...);

第1引数にはグラデーションの方向（例：to right、45degなど）を指定し、続けて「色とその開始位置」をカンマ区切りで列挙します。最後の色の位置以降は、それまでのパターンが自動的に繰り返されます。

使用例

以下のコードでは、緑・オレンジ・栗色（マルーン）を使った繰り返し線形グラデーションを実装しています。コードを保存してブラウザで開くと、実際の表示を確認できます。

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

コードのポイント

  • #demoセレクタで、デモ用の<div>要素にheight: 300px;を設定し、グラデーションが見える高さを確保しています。
  • repeating-linear-gradient(green 20%, orange 40%, maroon 40%)により、要素の20%地点から40%地点にかけて緑からオレンジへ変化し、その後は栗色で塗りつぶされるパターンが定義されます。
  • オレンジと栗色の位置を同じ値（40%）にすることで、色の境界がくっきりとしたストライプ状の模様になります。
  • このパターンが要素の下端まで自動的に繰り返されるため、手動で複数の背景を定義する必要はありません。

角度を変更すれば斜めのストライプにもできるので、さまざまなデザインに応用してみてください。

  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（完全に不