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

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

CSSのlinear-gradient()関数では、2色だけでなく3色以上の複数のカラーストップを自由に指定できます。色をカンマで区切って並べるだけで、それぞれの色が滑らかにつながった美しいグラデーションが自動的に生成されます。

複数のカラーストップの基本構文

基本的な書き方は以下のとおりです。色と色の間にカンマを入れるだけで、いくつでもカラーストップを追加できます。

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

位置（パーセントやピクセル）を省略した場合、各色は要素内で均等に配置されます。位置を明示的に指定すれば、グラデーションの切り替わりポイントを細かくコントロールすることも可能です。

サンプルコード

実際に、青・オレンジ・黄・グレーの4色を使った線形グラデーションの例を見てみましょう。以下のコードはそのままブラウザで実行できます。

例

<!DOCTYPE html>
<html>
<head>
<style>
#demo {
  height: 100px;
  background: linear-gradient(blue, orange, yellow, gray);
}
</style>
</head>
<body>
<h2>Linear Gradient</h2>
<div id="demo">Multiple Color Stops</div>
</body>
</html>

コードの解説

  • #demoセレクターで、高さ100pxのdiv要素に背景としてグラデーションを適用しています。
  • linear-gradient(blue, orange, yellow, gray)により、上から下へ向かって「青 → オレンジ → 黄 → グレー」の順に色が変化します。
  • 方向の指定を省略しているため、デフォルトの「上から下（to bottom）」が適用されます。

このように、複数のカラーストップを活用すれば、虹色のような多彩なグラデーションや、より繊細な色の変化を表現できます。ぜひ自分のプロジェクトでも試してみてください。

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

    複数のカラーストップを使った線形グラデーションの基本CSSのlinear-gradient()関数では、カラーストップ（色の変化点）を複数指定することで、より豊かで滑らかなグラデーション表現が可能になります。カラーストップはカンマで区切って列挙するだけで、指定した方向に向かって順番に色が遷移していきます。基本的な書き方background-image: linear-gradient(方向, 色1, 色2, 色3, ...);方向にはto left、to right、to topなどのキーワードや、角度（例：45deg）を指定できます。位置（%やpx）を省略した場合、各色は自動的に均等な間隔で

  2. CSS3で複数の背景画像を追加する方法

    CSS3では、background-imageプロパティを使うことで、1つの要素に複数の背景画像を簡単に追加できます。各背景画像はカンマ（,）で区切って指定し、表示順序は先に書いたものが前面に、後ろに書いたものが背面に配置されます。 さらに、background-positionやbackground-repeatなどの関連プロパティも、背景画像と同じ順番でカンマ区切りで指定することで、それぞれの画像に対して個別の設定が可能です。 サンプルコード 以下は、CSS3で複数の背景を追加する具体例です。 <!DOCTYPE html> <html> <head>