勾配

The CSS Podcast - 021: Gradients

サイトを作成していて、上部に見出し、概要、ボタンを含む導入があるとします。デザイナーから、この導入部分の背景が紫色のデザインが提供されました。唯一の問題は、背景に 2 色の紫色がグラデーションとして使用されていることです。具体的な方法は次のとおりです。

最初は、デザインツールから画像をエクスポートする必要があると思われるかもしれませんが、代わりに linear-gradient を使用できます。

グラデーションは画像であり、画像を使用できる場所であればどこでも使用できますが、CSS で作成され、色、数値、角度で構成されています。CSS グラデーションを使用すると、2 色間の滑らかなグラデーションから、複数のグラデーションを組み合わせて繰り返すことで印象的なアートワークまで、さまざまなものを作成できます。

線形グラデーション

linear-gradient() 関数は、2 つ以上の色の画像を段階的に生成します。複数の引数を取りますが、最もシンプルな構成では、次のようにいくつかの色を渡すと、それらが自動的に均等に分割され、ブレンドされます。

.my-element {
    background: linear-gradient(black, white);
}

角度を表す角度またはキーワードを渡すこともできます。キーワードを使用する場合は、to キーワードの後に方向を指定します。つまり、左（黒）から右（白）に黒と白のグラデーションを作成する場合は、最初の引数として角度を to right として指定します。

.my-element {
    background: linear-gradient(to right, black, white);
}

色が停止し、隣接する色と混ざる場所を定義するカラーストップ値。暗い赤色から始まり、45 度の角度でグラデーションするグラデーションの場合、グラデーションのサイズの 30% で明るい赤色に変化します。次に例を示します。

.my-element {
    background: linear-gradient(45deg, darkred 30%, crimson);
}

linear-gradient() には、色とカラーストップをいくつでも追加できます。グラデーションを重ねて表示するには、各グラデーションをカンマで区切って指定します。

円形グラデーション

円形に放射状に広がるグラデーションを作成するには、radial-gradient() 関数を使用します。linear-gradient() に似ていますが、角度を指定する代わりに、必要に応じて位置と終了形状を指定します。色のみを指定した場合は、radial-gradient() が位置を center として自動的に選択し、ボックスのサイズに応じて円または楕円を選択します。

.my-element {
    background: radial-gradient(white, black);
}

グラデーションの位置は、キーワードや数値を使用する background-position に似ています。円形グラデーションのサイズは、グラデーションの終了形状（円または楕円）のサイズを決定します。デフォルトでは farthest-corner になります。つまり、ボックスの中心から最も遠い角に正確に収まります。次のキーワードも使用できます。

• closest-corner は、グラデーションの中心から最も近いコーナーに配置されます。
• closest-side は、グラデーションの中心から最も近いボックスの側面に合います。
• farthest-side は closest-side とは逆の動作を行います。

linear-gradient と同様に、カラーストップは必要な数だけ追加できます。同様に、radial-gradients はいくつでも追加できます。

円錐形グラデーション

円錐状のグラデーションは、ボックス内に中心点があり、（デフォルトでは）上から始まり、360 度円を描くように変化します。

.my-element {
    background: conic-gradient(white, black);
}

conic-gradient() 関数は、位置と角度の引数を受け入れます。

デフォルトでは、角度は 0 度で、上部の中央から始まります。角度を 45deg に設定すると、右上隅になります。angle 引数には、リニア グラデーションや放射状グラデーションなど、任意の角度値を指定できます。

デフォルトでは中央に配置されます。放射状グラデーションや線形グラデーションと同様に、配置はキーワードベースにすることも、数値で定義することもできます。

他のグラデーション タイプと同様に、カラーストップは必要な数だけ追加できます。円錐状のグラデーションを使用するこの機能のユースケースとして、CSS で円グラフをレンダリングする方法があります。

繰り返しとミックス

各タイプのグラデーションには、繰り返しタイプもあります。これらは、repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient() です。繰り返し関数と似ており、同じ引数を受け取ります。違いは、定義されたグラデーションを繰り返してボックスを塗りつぶすことができる場合、両方のサイズに基づいて塗りつぶされる点です。

グラデーションが繰り返されない場合は、いずれかのカラーストップの長さを設定していない可能性があります。たとえば、カラーストップ レングスを設定することで、repeating-linear-gradient でストライプの背景を作成できます。

.my-element {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 30px,
    white 30px,
    white 60px
  );
}

background プロパティでグラデーション関数を組み合わせたり、背景画像と同様にグラデーションをいくつでも定義したりすることもできます。たとえば、複数の線形グラデーションを組み合わせたり、2 つの線形グラデーションと放射状グラデーションを組み合わせたりできます。

リソース

• Conic.css - 円錐状のグラデーションの便利なコレクション
• MDN の勾配ガイド
• グラデーション生成ツール

理解度を確認する

グラデーションに関する知識をテストする