CSS グラデーション
説明
CSS グラデーションを使用すると、CSS で滑らかな色の遷移を作成できます。これらの遷移は、指定された 2 つ以上の色で構成されます。
CSS グラデーションの種類
-
線形グラデーション (
linear-gradient)直線に沿ってグラデーションを作成します。グラデーションの方向、色、色の停止位置を設定できます。
構文:
linear-gradient( [ | to ]?, [,]+)例:
background: linear-gradient(to right, red, yellow);この例では、左から右へ、赤から黄色への線形グラデーションを作成します。
-
放射状グラデーション (
radial-gradient)中心点から外側に向かって放射状にグラデーションを作成します。グラデーションの形状、サイズ、色、色の停止位置を設定できます。
構文:
radial-gradient( [ || ] at , [,]+ )例:
background: radial-gradient(circle at center, red, yellow, green);この例では、中心から外側に向かって、赤、黄色、緑の放射状グラデーションを作成します。形状は円形です。
-
繰り返しグラデーション (
repeating-linear-gradient,repeating-radial-gradient)線形または放射状のグラデーションパターンを繰り返します。
構文:
linear-gradientおよびradial-gradientと同じですが、repeating-プレフィックスを使用します。例:
background: repeating-linear-gradient(45deg, red 10px, yellow 20px);この例では、45 度の角度で、赤 (10px) と黄色 (20px) を繰り返す線形グラデーションを作成します。
色の停止
- グラデーション内の各色の位置を定義します。
- パーセンテージ、長さの単位、またはキーワード (
top、bottom、left、right、center) を使用して指定できます。
グラデーションの方向
- 線形グラデーション: 角度、キーワード (
to top、to bottom、to left、to right)、または辺と角のキーワード (to top left、to bottom rightなど) を使用して指定できます。 - 放射状グラデーション: キーワード (
center、top、bottom、left、right) またはパーセンテージを使用して円の中心の位置を指定できます。
グラデーションの形状
- 放射状グラデーション: 円形 (
circle) または楕円形 (ellipse) にすることができます。
グラデーションのサイズ
- 放射状グラデーション: キーワード (
closest-side、closest-corner、farthest-side、farthest-corner) または長さの単位を使用して指定できます。
複数のグラデーションの使用
- 複数のグラデーション関数をコンマで区切って使用することで、複数のグラデーションを作成できます。
- 後で宣言されたグラデーションは、前に宣言されたグラデーションを上書きします。
ブラウザの互換性
- ほとんどのモダンブラウザは CSS グラデーションをサポートしています。
- 古いブラウザの場合は、Modernizr などの JavaScript ライブラリを使用して、ブラウザが CSS グラデーションをサポートしているかどうかを検出できます。
詳細については、Can I use を参照してください。
使用シーン
- 背景パターンやテクスチャの作成
- ボタンやその他の UI 要素への視覚効果の追加
- データの視覚化の作成
よくある質問
Q1: 線形グラデーションと放射状グラデーションの違いは何ですか？
A1: 線形グラデーションは直線に沿って色の遷移を作成しますが、放射状グラデーションは中心点から外側に向かって放射状に色の遷移を作成します。
Q2: グラデーションの色を透明にすることはできますか？
A2: はい、色の値として transparent キーワードを使用することで、グラデーションの色を透明にすることができます。
Q3: グラデーションをアニメーション化することはできますか？
A3: はい、CSS の transition プロパティや animation プロパティを使用して、グラデーションをアニメーション化することができます。たとえば、時間の経過とともにグラデーションの方向や色を変更することができます。