CSS3の線形グラデーション（linear-gradient）と放射状グラデーション（radial-gradient）の使い方
グラデーションとは、2つ以上の色を滑らかに組み合わせて表示するCSSの機能です。中でもよく使われるのが「線形グラデーション」と「放射状グラデーション」の2種類です。
線形グラデーションは、上から下、左から右など、直線に沿って色が変化していくスタイルです。一方、放射状グラデーションは、要素の中心から外側に向かって色が広がるように変化します。
ここでは、CSS3でこれら2つのグラデーションを使う方法を、実際のコード例とともに解説します。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.linearGradient {
height: 100px;
width: 300px;
background-image: linear-gradient(rgb(255, 0, 200), yellow);
}
.radialGradient {
height: 200px;
width: 200px;
background-image: radial-gradient(rgb(255, 0, 200),yellow);
}
</style>
</head>
<body>
<h2>Linear Gradient </h2>
<div class="linearGradient"></div>
<h2>Radial Gradient</h2>
<div class="radialGradient"></div>
</body>
</html>
コードの解説
このコードでは、background-imageプロパティに対してlinear-gradient()関数とradial-gradient()関数を指定しています。どちらの関数も、開始色と終了色をカンマ区切りで渡すことで、その間を滑らかにつなぐグラデーションを生成します。
- linear-gradient(rgb(255, 0, 200), yellow)：ピンク（rgb(255, 0, 200)）から黄色へ、上から下へと変化する線形グラデーションを作成します。
- radial-gradient(rgb(255, 0, 200), yellow)：中心のピンクから外側の黄色へと円形に広がる放射状グラデーションを作成します。
実行結果
上記のコードを実行すると、次のような出力が得られます。
まとめ
CSS3のグラデーション機能を使えば、画像ファイルを用意することなく、CSSだけで美しい色の演出が可能になります。linear-gradient()は方向を指定した直線的な変化に、radial-gradient()は中心から広がる円形の変化にそれぞれ適しています。方向や角度、色の追加など、パラメータを工夫することで、さらに多彩なデザイン表現にも応用できます。
-
CSSで放射状グラデーションのサイズを指定する方法
CSSで放射状グラデーションのサイズを制御するには、radial-gradient() 関数を使用します。この関数は、背景画像として放射状グラデーションを定義するもので、第1引数にサイズ（形状と大きさ）を、その後に位置やカラーストップを指定します。基本的な書き方以下の例のように、関数の最初のパラメータとして希望するサイズを設定します。background-image: radial-gradient(40% 50px at center, rgb(30, 255, 0), rgb(0, 195, 255), rgb(128, 0, 32));サイズに指定できる値グラデーションのサイズには、以下
-
CSSで放射状グラデーションの形状を設定する方法
CSSで放射状グラデーションの形状を設定するには、radial-gradient()関数を使用します。この関数は、背景画像として放射状グラデーションを指定するためのもので、第1引数に希望する形状を指定します。指定できる形状は「ellipse」（楕円）と「circle」（円）の2種類です。以下のように記述します。background-image: radial-gradient(ellipse, rgb(217, 255, 0), rgb(255, 0, 0), rgb(14, 239, 255));上記の例では、楕円形のグラデーションが黄緑色から赤、そして水色へと変化していきます。色はカンマで