CSS アドバンス

CSS3 グラデーション

CSS3 グラデーション（Gradients）を使用すると、2色以上の指定した色の間で滑らかな遷移を表示できます。以前はこれらの効果を実現するために画像を作成する必要がありましたが、CSS3 の導入により、コードのみでレンダリング可能になり、ダウンロード時間と帯域幅の節約に直結しています。

CSS3 では以下の 3 種類のグラデーションが定義されています。

  • 線形グラデーション (Linear Gradients): 下、上、左、右、または対角線方向に進むグラデーション。
  • 放射状グラデーション (Radial Gradients): 中心から外側に向かって放射状に広がるグラデーション。
  • 扇状グラデーション (Conic Gradients): 中心点を軸に時計回りに回転するグラデーション。

1. CSS3 線形グラデーション (Linear Gradients)

線形グラデーションを作成するには、少なくとも 2 つのカラーストップ（Color Stops）を定義する必要があります。カラーストップとは、レンダリングされる色の変化点のことです。また、開始点と方向（または角度）を設定することも可能です。

1.1 基本構文

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

1.2 上から下へのグラデーション（デフォルト）

方向を指定しない場合、グラデーションは自動的に上から下へ描画されます。

#grad {
  /* 赤から青へ、上から下へのグラデーション */
  background-image: linear-gradient(red, blue);
}

1.3 左から右へのグラデーション

to right キーワードを使用して方向を指定します。

#grad {
  /* 左から右へのグラデーション */
  background-image: linear-gradient(to right, red, yellow);
}

1.4 対角線方向のグラデーション

水平方向と垂直方向のキーワードを組み合わせることで、対角線方向のグラデーションを作成できます。

#grad {
  /* 左上から右下へのグラデーション */
  background-image: linear-gradient(to bottom right, red, yellow);
}

1.5 角度（Angle）による指定

方向をキーワードで指定する代わりに、角度（deg）を使用して精密な制御が可能です。

#grad {
  /* 180度（上から下）のグラデーション */
  background-image: linear-gradient(180deg, red, yellow);
}

1.6 複数のカラーストップの使用

3 色以上の色を組み合わせて複雑なグラデーションを作成できます。

#grad {
  /* 赤、オレンジ、黄色、緑、青、藍、紫の虹色グラデーション */
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

1.7 透明度（Transparency）の使用

RGBA カラー値を使用することで、透明度を含んだグラデーションを実現できます。

#grad {
  /* 完全に透明な赤から、完全に不透明な赤へのグラデーション */
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

1.8 線形グラデーションの繰り返し (repeating-linear-gradient)

repeating-linear-gradient() 関数を使用して、パターンを繰り返すことができます。

#grad {
  /* 青から黄色へのグラデーションを繰り返す */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

2. CSS3 放射状グラデーション (Radial Gradients)

放射状グラデーションは、中心点（Center）から色が開始され、外側に向かって変化します。

2.1 基本構文

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

2.2 等間隔のカラーストップ

デフォルトでは、各色は均等に配置されます。

#grad {
  /* 中心から赤、緑、青の順に広がるグラデーション */
  background-image: radial-gradient(red, green, blue);
}

2.3 形状（Shape）の設定

circle（円）または ellipse（楕円、デフォルト値）を指定できます。

#grad {
  /* 円形の放射状グラデーション */
  background-image: radial-gradient(circle, red, yellow, green);
}

2.4 サイズキーワード（Size）の使用

closest-side, farthest-side, closest-corner, farthest-corner を使用して、グラデーションが広がる範囲を制御します。

#grad {
  /* 最も遠い角に合わせて広がるグラデーション */
  background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
}

2.5 放射状グラデーションの繰り返し (repeating-radial-gradient)

線形と同様に、放射状グラデーションも繰り返すことが可能です。

#grad {
  /* 同心円状に色が繰り返されるパターン */
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

3. CSS3 扇状グラデーション (Conic Gradients)

扇状グラデーションは、時計回りに回転しながら色が変化します。円グラフのデザインなどに非常に有効です。

3.1 基本構文

background-image: conic-gradient([from angle] [at position], color-stop1, color-stop2, ...);

3.2 基本的な扇状グラデーション

#grad {
  /* 赤、黄色、緑の順で回転するグラデーション */
  background-image: conic-gradient(red, yellow, green);
}

3.3 角度とカラーストップの制御

特定のパーセンテージや角度で色を切り替えることで、円グラフ（Pie Chart）を作成できます。

#grad {
  /* 円グラフのようなデザインの実装 */
  background-image: conic-gradient(red 0% 25%, yellow 25% 50%, blue 50% 75%, green 75% 100%);
}

3.4 扇状グラデーションの繰り返し (repeating-conic-gradient)

#grad {
  /* 放射状のストライプ（サンバースト）効果 */
  background-image: repeating-conic-gradient(red 10%, yellow 20%);
}

これらのグラデーションプロパティをマスターすることで、画像リソースを削減しつつ、リッチで動的な UI を構築することが可能になります。特に conic-gradient は比較的新しい機能ですが、主要なモダンブラウザで広くサポートされています。