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

CSSで複数のカラーストップを使用して線形グラデーションを作成する方法

複数のカラーストップを使った線形グラデーションの基本

CSSのlinear-gradient()関数では、カラーストップ（色の変化点）を複数指定することで、より豊かで滑らかなグラデーション表現が可能になります。カラーストップはカンマで区切って列挙するだけで、指定した方向に向かって順番に色が遷移していきます。

基本的な書き方

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

方向にはto left、to right、to topなどのキーワードや、角度（例：45deg）を指定できます。位置（%やpx）を省略した場合、各色は自動的に均等な間隔で配置されます。

サンプルコード

以下は、5つのカラーストップ（オレンジ、ブルー、グリーン、ピンク、イエロー）を使用し、右から左方向への線形グラデーションを作成する例です。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
    height: 200px;
    width: 100%;
    display: inline-block;
    margin-right: 10px;
}
.linearGradient {
    background-image: linear-gradient(to left, orange, blue, green, pink, yellow);
}
</style>
</head>
<body>
<h1>複数のカラーストップによる線形グラデーション</h1>
<div class="linearGradient"></div>
</body>
</html>

実行結果

上記のコードを実行すると、オレンジ色から始まり、ブルー、グリーン、ピンクを経由して黄色で終わる、滑らかな多色グラデーションが横長のボックス内に表示されます。

CSSで複数のカラーストップを使用して線形グラデーションを作成する方法

ポイント解説

  • to left：グラデーションの進行方向を右から左に指定しています。
  • カラーストップ：orange → blue → green → pink → yellow の順に色が変化します。
  • 均等配置：各色の位置を指定しないため、5色が等間隔で自動配置されます。

このようにlinear-gradient()に複数の色を渡すだけで、手軽にリッチなグラデーション背景を実現できます。ボタンやバナー、セクション背景など、さまざまな場面で活用してみてください。

  1. CSSで放射状グラデーションの形状を設定する方法

    CSSで放射状グラデーションの形状を設定するには、radial-gradient()関数を使用します。この関数は、背景画像として放射状グラデーションを指定するためのもので、第1引数に希望する形状を指定します。指定できる形状は「ellipse」（楕円）と「circle」（円）の2種類です。以下のように記述します。background-image: radial-gradient(ellipse, rgb(217, 255, 0), rgb(255, 0, 0), rgb(14, 239, 255));上記の例では、楕円形のグラデーションが黄緑色から赤、そして水色へと変化していきます。色はカンマで

  2. CSSでグラデーションのカラーストップ位置を設定する方法

    CSSのグラデーションでは、各色が切り替わる位置(カラーストップ)をパーセンテージまたは絶対的な長さで指定できます。これにより、色の遷移を均等ではなく自由にコントロールすることが可能です。カラーストップの基本例えば、linear-gradient()関数でカラーストップの位置を指定する場合、以下のように記述します。background-image: linear-gradient( rgb(61, 255, 2) 40%, rgb(0, 174, 255) 80%, rgb(255, 29, 29) 20% );このように位置を明示的に指定すると、各色がその地点で完全に