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

CSSのlinear-gradient()関数で背景に線形グラデーションを設定する方法

CSSでは、linear-gradient()関数を使うことで、背景画像として線形グラデーションを簡単に設定できます。この関数はbackgroundプロパティやbackground-imageプロパティの値として指定し、複数の色をカンマで区切って渡すことで、それらが滑らかにつながったグラデーションが生成されます。

linear-gradient()関数の基本構文

background: linear-gradient(色1, 色2, 色3, ...);

色は2つ以上指定でき、上から下へ順番に表示されます。グラデーションの方向（角度）を指定することも可能です。例えばlinear-gradient(to right, red, blue)とすれば左から右へのグラデーションになります。

実装例

以下のコードでは、緑・オレンジ・栗色（マルーン）の3色を使った線形グラデーションを、高さ200pxの要素の背景に設定しています。コードをコピーしてブラウザで実行し、実際の表示を確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #demo {
            height: 200px;
            background: linear-gradient(green, orange, maroon);
         }
      </style>
   </head>
   <body>
      <p>背景に線形グラデーションを設定しています。</p>
      <div id = "demo"></div>
   </body>
</html>

出力結果

上記のコードを実行すると、ページ上部に説明文が表示され、その下に200pxの高さを持つ領域が現れます。この領域の背景には、上部が緑（green）、中央がオレンジ（orange）、下部が栗色（maroon）へと変化する滑らかな縦方向のグラデーションが適用されます。

ポイントまとめ

  • linear-gradient()はCSS関数であり、backgroundやbackground-imageプロパティで使用できる
  • 色はカンマ区切りで2つ以上指定可能で、指定順に沿ってグラデーションが描画される
  • デフォルトでは上から下へグラデーションがかかるが、to rightや角度（例：45deg）で方向を変更できる
  • 色名だけでなく、HEX値やrgb()、rgba()なども使用できるため、半透明のグラデーションも作成可能
  1. CSSのrepeating-linear-gradient()で線形グラデーションを繰り返す方法

    CSSで線形グラデーションを繰り返し表示したい場合は、repeating-linear-gradient() 関数を使用します。通常の linear-gradient() はグラデーションが要素いっぱいに一度だけ描画されますが、この関数を使うと指定したカラーストップのパターンが自動的に繰り返され、ストライプ模様などを簡単に作成できます。repeating-linear-gradient() の基本構文background: repeating-linear-gradient(角度または方向, 色1 位置1, 色2 位置2, ...);各色の位置（パーセントやピクセル）を指定することで、その範囲

  2. CSSで背景に放射状グラデーション（radial-gradient）を設定する方法

    CSSのradial-gradient()関数を使用すると、中心点から外側に向かって色が変化する放射状グラデーションを、背景画像として簡単に設定できます。複数の色を指定するだけで、滑らかなグラデーションが自動的に生成されるため、ボタンやバナー、セクション背景などのデザインに幅広く活用できます。radial-gradient()の基本構文background: radial-gradient(色1, 色2, 色3, ...);色はカンマ区切りで複数指定でき、左側に記述した色が中心になり、右側の色が外周へと変化していきます。実装例次のコードでは、緑（green）・オレンジ（orange）・栗色（m