CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの放射状グラデーション（radial-gradient）でカラーストップの間隔を自由に設定する方法

CSSのradial-gradient()関数では、各色の開始位置を示す「カラーストップ」に任意のパーセンテージを指定することで、色と色の間隔を自由にコントロールできます。デフォルトでは色が均等に配置されますが、値を明示的に指定すれば、意図したデザインに合わせてグラデーションを細かく調整可能です。

間隔の異なるカラーストップを指定する

以下の例では、orange 20%、green 15%、yellow 50% のように、それぞれの色に異なる位置を指定しています。このように記述することで、中心から外側へ向かって色が変化するタイミングを個別に制御できます。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
#demo {
  height: 200px;
  background: radial-gradient(orange 20%, green 15%, yellow 50%);
}
</style>
</head>
<body>
<h2>Radial Gradient</h2>
<div id="demo">Radial Gradients</div>
</body>
</html>

コードの解説

  • height: 200px; … グラデーションを表示する要素の高さを200pxに設定しています。
  • radial-gradient(orange 20%, green 15%, yellow 50%) … オレンジが20%、グリーンが15%、イエローが50%の位置で変化する放射状グラデーションを背景に適用しています。
  • <div id="demo"> … グラデーションを実際に表示するコンテナ要素です。

このコードをブラウザで実行すると、オレンジからグリーン、そしてイエローへと滑らかに移り変わる放射状グラデーションが確認できます。カラーストップのパーセンテージを変更しながら試すことで、グラデーションの挙動への理解が深まります。

  1. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

  2. CSSで複数のカラーストップを使用して線形グラデーションを作成する方法

    複数のカラーストップを使った線形グラデーションの基本CSSのlinear-gradient()関数では、カラーストップ（色の変化点）を複数指定することで、より豊かで滑らかなグラデーション表現が可能になります。カラーストップはカンマで区切って列挙するだけで、指定した方向に向かって順番に色が遷移していきます。基本的な書き方background-image: linear-gradient(方向, 色1, 色2, 色3, ...);方向にはto left、to right、to topなどのキーワードや、角度（例：45deg）を指定できます。位置（%やpx）を省略した場合、各色は自動的に均等な間隔で