radial-gradient()プロパティは、中心から放射状に広がるグラデーションを作成するために使用されます。グラデーションの形や開始点、色の変化をカスタマイズすることで、さまざまなデザインを表現することができます。
radial-gradient()プロパティの値とその効果の一覧
circle– 円形のグラデーションを作成します。ellipse– 楕円形のグラデーションを作成します。farthest-corner– グラデーションの終わりを要素の最も遠いコーナーに設定します。at [位置]– グラデーションの中心位置を指定します。
注意点や関連情報
radial-gradient()は、形状や位置、色の組み合わせで非常に柔軟なグラデーションを作成できます。
ただし、複雑なグラデーションを使用すると、読み込み速度やパフォーマンスに影響する場合があるので、適切に使用することが重要です。
radial-gradient()が効かない時の原因と対策
background-imageが指定されていない
radial-gradient()は通常、background-imageプロパティに使用されます。background-colorや他のプロパティに使用しても機能しません。
対策: radial-gradient()はbackground-imageプロパティ内で使用してください。例えば、background-image: radial-gradient(circle, red, blue);のように指定します。
z-indexやpositionが影響している
radial-gradient()を適用した要素が他の要素に重なっている場合、z-indexやpositionプロパティによって、グラデーションが隠れてしまうことがあります。
対策: z-indexやpositionプロパティを確認し、必要に応じてスタッキング順序を調整します。position: relative;やz-index: 1;などで要素の重なり順を変更し、グラデーションが見えるようにします。
opacityやfilterの影響
要素にopacityやfilterが設定されていると、radial-gradient()の効果が薄れて見えにくくなることがあります。
対策: opacityやfilterの設定を確認し、radial-gradient()が視認しやすいように調整します。必要に応じて、これらのプロパティの値を調整してグラデーションがはっきりと見えるようにします。
共通するCSSコード
.css-sample-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 80%;
margin: 20px auto;
padding: 20px;
border: 2px solid #333;
background-color: #f9f9f9;
}
.css-sample-box {
width: 100%;
height: 200px;
margin: 20px 0;
text-align: center;
line-height: 200px;
font-size: 20px;
color: white;
border: 1px solid #ccc;
}
radial-gradient(circle, red, yellow)
デフォルトの円形グラデーション。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box css-sample-radial-default">
円形のグラデーション</div>
</div>
CSSコード
.css-sample-radial-default {
background: radial-gradient(circle, red, yellow);
}
表示結果
radial-gradient(ellipse, green, blue)
楕円形のグラデーション。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box css-sample-radial-ellipse">
楕円形のグラデーション</div>
</div>
CSSコード
.css-sample-radial-ellipse {
background: radial-gradient(ellipse, green, blue);
}
表示結果
radial-gradient(circle farthest-corner, pink, purple)
最も遠いコーナーに向かう円形グラデーション。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box css-sample-radial-farthest-corner">
最も遠いコーナーに向かう円形</div>
</div>
CSSコード
.css-sample-radial-farthest-corner {
background: radial-gradient(circle farthest-corner, pink, purple);
}
表示結果
radial-gradient(circle at center, #ff7f50, #1e90ff, #4b0082)
複数の色を使ったカスタムグラデーション。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box css-sample-radial-custom">
カスタムグラデーション</div>
</div>
CSSコード
.css-sample-radial-custom {
background: radial-gradient(circle at center, #ff7f50, #1e90ff, #4b0082);
}
表示結果
まとめ
radial-gradient(circle, ...)では、円形のグラデーションを作成します。radial-gradient(ellipse, ...)では、楕円形のグラデーションを作成します。farthest-cornerを使うと、グラデーションの終わりを要素の最も遠い角に設定できます。at [位置]で、グラデーションの中心位置を細かく調整できます。