CSSのradial-gradient()関数の使い方を解説
CSSのradial-gradient()関数を使うと、要素の背景画像として放射状（円形・楕円形）のグラデーションを設定できます。中心点から外側に向かって色が変化していくため、ボタンやバナー、装飾的な背景など、さまざまな場面で活用できる便利な関数です。
radial-gradient()の基本的な書き方
基本構文は以下のとおりです。カンマで区切って複数の色を指定すると、中心から外側へ順番に色が遷移していきます。
background: radial-gradient(色1, 色2, 色3, ...);
実装例
次のコードでは、緑（green）→ オレンジ（orange）→ 栗色（maroon）の3色を使った放射状グラデーションを背景に設定しています。
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
height: 200px;
background: radial-gradient(green, orange, maroon);
}
</style>
</head>
<body>
<p>背景に放射状グラデーションを設定しています。</p>
<div id = "demo"></div>
</body>
</html>応用：形状やサイズ、位置の指定
radial-gradient()では、グラデーションの形状や大きさ、中心位置も細かく制御できます。
- 形状の指定：
circle（正円）またはellipse（楕円）を選択できます。省略した場合は楕円が既定値になります。 - サイズの指定：
closest-side、farthest-cornerなどのキーワードや、具体的な長さでグラデーションの範囲を指定できます。 - 中心位置の指定：
at top leftやat 50% 50%のように記述することで、グラデーションの中心を自由に配置できます。
例えば、左上を中心とした円形グラデーションは次のように書きます。
background: radial-gradient(circle at top left, green, orange, maroon);
このようにradial-gradient()を活用すれば、画像ファイルを使わずにリッチな視覚効果を実現でき、ページの読み込み速度向上にもつながります。
-
CSS rgba()関数の使い方を解説！透明度付きの色指定方法と実例
rgba()関数とはCSSのrgba()関数は、赤（Red）、緑（Green）、青（Blue）の3原色に加えて、アルファ（Alpha）チャンネルによる透明度を含めたRGBAカラーバリューを定義するための関数です。アルファ値は色の不透明度を表し、0.0〜1.0の範囲の数値で指定します。1.0が完全に不透明な状態、0.0が完全に透明な状態を意味します。基本的な構文は以下のとおりです。rgba(red, green, blue, alpha)red / green / blue：各色成分を0〜255の整数、またはパーセンテージで指定します。alpha：不透明度を0.0（完全に透明）〜1.0（完全に不
-
CSS背景プロパティとは？基本構文と実用的なサンプルコードで解説
CSSの背景プロパティは、要素の背景をスタイリングするために使用される重要な機能です。backgroundプロパティは、要素の背景をまとめて指定できるショートハンド（一括指定）プロパティであり、以下の8つの個別プロパティで構成されています。 背景関連の8つのプロパティ background-color：要素の背景色を指定します。 background-image：背景画像を指定します。 background-repeat：背景画像の繰り返し方法を指定します。 background-position：背景画像の表示位置を指定します。 background-clip：背景の描画範囲を指定します。