CSS3 グラデーション

 

CSS グラデーション：夢幻的なウェブページ背景と要素を作成する強力なツール

この文章では、CSS グラデーションについて詳しく解説します。線形グラデーション、放射状グラデーション、繰り返しグラデーションなどを、実例とコードを交えながら分かりやすく説明し、魅力的なウェブデザインを作成する方法を紹介します。

CSS グラデーションの基本：線形グラデーションと放射状グラデーション

CSS グラデーションは、要素の背景に滑らかな色の変化を作成する強力な機能です。コードの簡潔さ、優れたパフォーマンス、デザインの柔軟性など、多くの利点があります。

線形グラデーション (linear-gradient)

線形グラデーションは、直線方向に色が変化するグラデーションです。

構文：

background: linear-gradient(方向, 色標1, 色標2, ...);

主なパラメータ：

  • 方向： グラデーションの向きを指定します。キーワード (to top, to bottom, to right, to left, to top right など) または角度値 (deg) を使用します。
  • 色標： グラデーションの色と位置を指定します。複数の色を指定して、滑らかな色の変化を作成できます。

コード例：

<!DOCTYPE html>
<html>
<head>
  <title>Radial Gradient Example</title>
  <style>
    .radial-gradient-example {
      background: radial-gradient(circle at center, red, yellow, green);
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div class="radial-gradient-example"></div>
</body>
</html>

カスタマイズ

  • グラデーションの色や順番を変えることで、様々な表現が可能です。

  • circle at top left のように at の後の値を変更することで、グラデーションの中心を調整できます。

  • ellipse を指定することで、楕円形のグラデーションを作成することもできます。

放射状グラデーション (radial-gradient)

放射状グラデーションは、中心点から放射状に色が変化するグラデーションです。

構文：

background: radial-gradient(形状 サイズ 位置, 色標1, 色標2, ...);

主なパラメータ：

  • 形状： グラデーションの形状を指定します。円形 (circle) または楕円形 (ellipse) を指定できます。
  • サイズ： グラデーションのサイズを指定します。closest-side, closest-corner, farthest-side, farthest-corner または具体的な長さ値を使用します。
  • 位置： グラデーションの中心点を指定します。キーワード (center, top, bottom, left, right など) またはパーセンテージ (%) を使用します。
  • 色標： 線形グラデーションと同様に、グラデーションの色と位置を指定します。

コード例：

.radial-gradient-example {
  background: radial-gradient(circle at center, red, yellow, green);
}

応用テクニック：繰り返しグラデーションと多重グラデーション

CSS グラデーションは、さらに複雑な効果を作成するために、繰り返しグラデーションや多重グラデーションなどの応用テクニックを提供します。

繰り返しグラデーション

繰り返し線形グラデーション (repeating-linear-gradient) と繰り返し放射状グラデーション (repeating-radial-gradient) は、指定したグラデーションを繰り返し表示することで、ストライプやドットなどのパターンを作成できます。

コード例：

.repeating-linear-gradient-example {
  background: repeating-linear-gradient(45deg, red 10px, yellow 20px);
}

.repeating-radial-gradient-example {
  background: repeating-radial-gradient(circle, red 5px, yellow 10px);
}

多重グラデーション

複数のグラデーションを重ねることで、より複雑で奥行きのある視覚効果を作成できます。例えば、放射状グラデーションと線形グラデーションを組み合わせることで、光の効果を模倣できます。

コード例：

.multiple-gradient-example {
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.5), transparent),
              linear-gradient(to bottom right, blue, green);
}

実践演習：CSS グラデーションでウェブ要素を美しく装飾する

CSS グラデーションは、ボタン、ナビゲーションバー、カードなどのウェブ要素を美しく装飾するために使用できます。

例1：グラデーションボタン

.gradient-button {
  background: linear-gradient(to bottom, #4CAF50, #43A047);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

例2：影付きカード

.shadow-card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

.shadow-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: radial-gradient(circle at bottom right, rgba(0, 0, 0, 0.1), transparent);
}

例3：パターン付きナビゲーションバー

.pattern-navbar {
  background: repeating-linear-gradient(45deg, #eee 5px, #ddd 10px);
  padding: 20px;
}

ツール紹介：CSS グラデーションを使いこなすためのツール

CSS グラデーションを効率的に作成・調整するためのオンラインツールを紹介します。

ツール名 説明
CSS Gradient Generator 視覚的にグラデーションを作成・調整し、コードを生成できます。
Color.oulu.me 豊富なグラデーション配色例とインスピレーションを提供します。

関連QA

Q1: CSS グラデーションは古いブラウザでも動作しますか？

A1: CSS グラデーションは、比較的新しい CSS3 の機能ですが、主要なブラウザの最新バージョンでは広くサポートされています。ただし、古いブラウザではサポートされていない場合があります。古いブラウザでも正しく表示されるように、フォールバックとして単色背景を設定しておくことをお勧めします。

Q2: グラデーションの方向を細かく調整するにはどうすればよいですか？

A2: グラデーションの方向は、角度値 (deg) を使用することで細かく調整できます。0deg は上から下、90deg は左から右、180deg は下から上、270deg は右から左となります。

Q3: 複数のグラデーションを重ねる場合、表示順序はどうなりますか？

A3: 複数のグラデーションを重ねる場合、後に指定したグラデーションが上に表示されます。