CSSのグラデーションの種類を徹底解説！線形と円形の使い分け
CSSのグラデーション（gradient）とは、2色以上の色を滑らかに組み合わせて表示するための機能です。単一の背景色では表現できない奥行きや立体感、洗練されたデザインを実現できるため、現代のWebデザインにおいて欠かせないテクニックの一つとなっています。
グラデーションの主な種類
CSSで使用できるグラデーションには、主に以下の2種類があります。
- 線形グラデーション（Linear Gradients）：上から下、左から右、または斜め方向など、直線に沿って色が変化します。
- 円形グラデーション（Radial Gradients）：中心点から外側に向かって放射状に色が変化します。
1. 線形グラデーション（linear-gradient）
線形グラデーションは、指定した方向に沿って色が直線的に変化するグラデーションです。方向は「to top」「to bottom」「to left」「to right」などのキーワードや、角度（例：45deg）で指定できます。
background: linear-gradient(to right, red, blue);
この例では、左側の赤から右側の青へと滑らかに色が変化します。
2. 円形グラデーション（radial-gradient）
円形グラデーションは、中心点から外側へ向かって楕円状または円状に色が広がるグラデーションです。ボタンやアイコンに立体感を持たせたい場合などによく使われます。
実装例：円形グラデーション
ここでは、実際に円形グラデーションを適用したサンプルコードを見てみましょう。赤・緑・ピンクの3色を使い、それぞれの色が変化し始める位置をパーセンテージで指定しています。
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 550px;
background: radial-gradient(red 5%, green 15%, pink 60%);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>
コードの解説
- height: 100px / width: 550px：グラデーションを表示する要素の高さと幅を指定しています。
- red 5%：赤色が中心から5%の位置まで表示されます。
- green 15%：緑色が15%の位置まで変化します。
- pink 60%：ピンク色が60%の位置まで広がり、それ以降もピンクが継続します。
なお、かつてはブラウザごとの互換性のため「-webkit-」「-moz-」「-o-」といったベンダープレフィックスが必要でしたが、現在の主要ブラウザでは標準のradial-gradient()だけで正しく表示されます。
まとめ
CSSのグラデーションには、直線的に色が変化する「線形グラデーション」と、中心から放射状に広がる「円形グラデーション」の2種類があります。画像ファイルを用意することなくCSSだけで美しい色彩表現が可能なので、バナーデザインやボタンの装飾など、さまざまな場面でぜひ活用してみてください。
-
CSSのbackground-imageプロパティで背景画像を設定する方法
CSSのbackground-imageプロパティは、選択した要素の背景に画像を設定するために使用されます。単一の画像だけでなく、複数の画像をカンマで区切って指定することも可能で、グラデーションを背景として利用することもできます。基本構文CSSのbackground-imageプロパティの構文は以下の通りです。セレクタ { background-image: /*値*/ }値には、url()関数で画像のパスを指定するか、linear-gradient()などのグラデーション関数を指定します。以下の例では、CSSのbackground-imageプロパティの使い方を紹介します。例1: 要
-
CSSのbackground-repeatプロパティで背景画像の繰り返しを制御する方法
CSSの background-repeat プロパティは、背景画像が要素内でどのように繰り返されるか（タイル状に敷き詰められるか）を定義するために使用されます。デフォルトでは背景画像は縦横両方向に繰り返されますが、このプロパティを使うことで繰り返しの方向や間隔を細かく制御できます。構文CSSの background-repeat プロパティの基本構文は以下のとおりです。Selector { background-repeat: /*値*/ }主な値repeat：画像を縦・横の両方向に繰り返して表示します（初期値）。repeat-x：水平方向のみ繰り返します。repe