CSS 入門

CSS グラデーション

単なるソリッドな単色塗りとは異なり、グラデーションは2色以上の色の間を滑らかに遷移させ、デザインにダイナミックな動きと洗練された印象を与えます。

本章では、CSSにおける2つの主要なグラデーションタイプである線形グラデーション (Linear Gradients)と放射状グラデーション (Radial Gradients)について解説します。それぞれの構文、カスタマイズオプション、そして実戦的なアプリケーションを深く掘り下げ、あなたのウェブサイトに驚くべき視覚効果をもたらす方法をマスターしましょう。

1. 線形グラデーション

線形（リニア）グラデーションは、色が直線に沿って遷移するスタイルです。この直線の方向と、線上に現れる色を定義する必要があります。

1.1 基本構文

background: linear-gradient(direction, color-stop1, color-stop2, ...);
  • direction（方向）: グラデーション線の方向を指定します。
    • 角度: 0deg (下から上へ), 90deg (左から右へ), 180deg (上から下へ), 270deg (右から左へ)。
    • キーワード: to top, to bottom (デフォルト), to left, to right, to top left など。
  • color-stop（カラーストップ）: 色と、その色が出現する位置を指定します。最低でも2つの色が必要です。

例：

.linear-gradient-example {
  /* 左から右へ、赤から黄色への線形グラデーション */
  background: linear-gradient(to right, red, yellow);
}

1.2 方向の変化

角度を使用する場合：

.linear-gradient-angle {
  /* 45度の角度で青から緑へ遷移 */
  background: linear-gradient(45deg, blue, green);
}

キーワードを使用する場合：

.linear-gradient-keyword {
  /* 右上から左下へ、紫からオレンジへ遷移 */
  background: linear-gradient(to bottom left, purple, orange);
}

1.3 カラーストップと位置 (Color Stops)

グラデーションの中で色が出现する位置を正確に指定することで、遷移をより細かくコントロールできます。

.linear-gradient-positions {
  /* 赤(0%) -> 黄色(50%) -> 緑(100%) の順で配置 */
  background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
}
  • red 0%: 赤からグラデーションが開始されます。
  • yellow 50%: グラデーションの中間地点に黄色が配置されます。
  • green 100%: グラデーションの終点が緑になります。

1.4 ハードストップ (Hard Stops)

ハードストップは、滑らかな遷移ではなく、くっきりとした色の境界線を作成します。隣接する2つの色に同じ位置を指定することで実現します。

.linear-gradient-hardstop {
  /* 左半分が赤、右半分が黄色で、中央に明確な境界線を作成 */
  background: linear-gradient(to right, red 50%, yellow 50%);
}

1.5 rgba() と hsla() による透明度の実現

rgba() や hsla() を使用して、透明度（透過度）を持つグラデーションを作成できます。これは、画像の上にオーバーレイを重ねる際や、繊細なビジュアルエフェクトを作るのに非常に有効です。

例：

.linear-gradient-transparent {
  /* 完全に透明な状態から純粋な黒への遷移 */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); 
}

2. 放射状グラデーション

放射状（ラジアル）グラデーションは、中心点から外側に向かって色が放射状に広がるスタイルです。円形や楕円形のハイライト、シャドウを作成する際によく使われます。

2.1 基本構文

background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
  • shape（形状）: グラデーションの形を定義します。circle (円形) または ellipse (楕円形、デフォルト) が指定可能です。
  • size（サイズ）: グラデーションの大きさを決定します。
    • キーワード: closest-side, farthest-side, closest-corner, farthest-corner (デフォルト)。
    • 具体的な数値: 50px や 50% など。
  • at position（位置）: グラデーションの中心点を指定します。
    • キーワード: center (デフォルト), top, bottom, left, right。
    • 数値: at 50% 50% や at 20px 30px など。

例：

.radial-gradient-example {
  /* 中心が赤、エッジが黄色の円形グラデーション */
  background: radial-gradient(circle, red, yellow);
}

2.2 形状とサイズの変化

円形 (Circle):

.radial-gradient-circle {
  /* 中心から最も遠い角まで広がる青から緑への円形グラデーション */
  background: radial-gradient(circle farthest-corner at center, blue, green);
}

楕円形 (Ellipse):

.radial-gradient-ellipse {
  /* 左上角から最も近い辺まで広がる紫からオレンジへの楕円グラデーション */
  background: radial-gradient(ellipse closest-side at top left, purple, orange);
}

固定サイズ:

.radial-gradient-size {
  /* 半径を50pxに固定した円形グラデーション */
  background: radial-gradient(circle 50px at center, red, yellow);
}

2.3 位置の変化

グラデーションの中心位置は自由に変更可能です。

キーワードを使用:

.radial-gradient-position-keyword {
  /* 中心を右上に配置 */
  background: radial-gradient(circle at top right, red, yellow);
}

ピクセル/パーセンテージを使用:

.radial-gradient-position-pixel {
  /* 左から20px、上から30pxの位置を中心にする */
  background: radial-gradient(circle at 20px 30px, red, yellow);
}

2.4 カラーストップと位置

線形グラデーションと同様に、各色の出現位置を指定できます。

.radial-gradient-positions {
  /* 中心(0%)は赤 -> 中間点(50%)は黄色 -> エッジ(100%)は緑 */
  background: radial-gradient(circle, red 0%, yellow 50%, green 100%);
}

2.5 マルチカラー・ストップ

複数のカラーストップを使用して、複雑な放射状グラデーションを作成できます。

.radial-gradient-multiple {
  /* 中心から外側に向かって多色が放射される */
  background: radial-gradient(circle, red, orange, yellow, green, blue);
}

3. 実戦例とデモンストレーション

3.1 線形グラデーションによるボタンの作成

グラデーションを使用することで、ボタンに立体感を与えることができます。

.button {
  /* 緑のグラデーション */
  background: linear-gradient(to bottom, #4CAF50, #388E3C); 
  border: none;
  color: white;
  padding: 15px 32px;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  /* ホバー時にグラデーションを反転 */
  background: linear-gradient(to bottom, #388E3C, #4CAF50); 
}

3.2 製品のスポットライトエフェクト (放射状グラデーション)

放射状グラデーションは、画像内の特定エリアを強調するのに適しています。

<div class="product-spotlight">
  <img src="product-image.jpg" alt="製品画像">
  <div class="spotlight-overlay"></div>
</div>
.product-spotlight {
  position: relative;
  width: 300px;
  height: 300px;
}

.product-spotlight img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spotlight-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 中心は透明、周囲を黒くすることでスポットライト効果を演出 */
  background: radial-gradient(circle, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.8) 80%);
}

3.3 透過グラデーション (Transparency)

rgba や hsla を組み合わせた透過グラデーションは、背景画像上のテキストの可読性を高めるための遮蔽（マスク）としてよく使われます。

.hero-section {
  /* 背景画像の上に、上部透明・下部黒のグラデーションを重ねる */
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7)), url('hero.jpg');
}

これにより、背景画像を表示させつつ、下部にあるテキスト説明エリアのコントラストを確保し、視認性を向上させることができます。