Contents
はじめに：CSS線形グラデーションの基本
CSSで背景にグラデーションを適用するには、linear-gradient()関数が不可欠です。
この機能を使うことで、2色や複数色のなめらかな移行を実現でき、UIデザインの質感を格段に向上させられます。特にWeb開発・デザインの初心者にとって、背景デザインの基本技法として習得しておくと幅広い場面で役立ちます。
以下では、linear-gradient()関数の構文や方向指定の仕方、色停止点の定義方法などをステップバイステップで解説します。読み終える頃には、自分でグラデーション背景を作成できるようになるでしょう。
linear-gradient()関数の構文
linear-gradient()は、背景に線形グラデーションを設定するためのCSS関数です。
その基本的な構文は background: linear-gradient(方向, 色1 [位置], 色2 [位置], ...); と表されます。この関数には「方向」や「色停止点（color stop）」といった引数が必要で、それぞれの役割を理解することが重要です。
基本的な構文形式
|
1 2 |
background: linear-gradient(方向, 色1 [位置], 色2 [位置], ...); |
- 方向：グラデーションが流れる向き（
to rightや45degなど） - 色1・色2...：使用する色と、それぞれの表示位置（例:
red 30%,blue 80%）
引数の順序と役割
| 項目 | 説明 |
|---|---|
| 方向 | グラデーションの向きを指定。to topや90degなど。 |
| 色1 [位置] | 1つ目の色と、その表示開始位置（省略可能）。 |
| 色2 [位置] | 2つ目以降の色と位置を同様に指定する。 |
この構文を使えば、HTML要素の背景に複雑なグラデーションも簡単に適用できます。
方向指定と角度の設定方法
グラデーションの方向を決めることは、デザインの印象を大きく左右します。
linear-gradient()では「キーワードによる方向指定」と「度数値での自由な角度設定」の2つの方法があります。
キーワードによる方向指定
to top, to right, to bottom leftなど、方向に応じたキーワードが使えます。これは直感的で覚えやすく、初心者にもおすすめです。
- to top：上から下へ
- to right：左から右へ
- to bottom left：右上から左下へ
度数値での自由な角度設定
45degや135degのように度数値を指定することで、任意の方向にグラデーションを作成できます。この方法はデザインの柔軟性が高く、複雑なUIにも対応可能です。
| 指定方法 | 説明 |
|---|---|
| to right | 90度と同じ意味（左から右へ） |
| 45deg | 左上から右下へ斜めにグラデーション |
どちらの方法も使い分けが重要です。キーワードで簡潔に設定したい場合と、微妙な角度を調整したい場合は度数値が役立ちます。
色停止点の定義と応用
色停止点（color stop）は、グラデーションの中での各色の位置を指定するための要素です。
色同士の移行を滑らかにしたり、特定の場所に色を強調したりするために必要不可欠です。
単純な2色グラデーション
最も基本的な例として、2つの色でグラデーションを作成します。
|
1 2 |
background: linear-gradient(to right, red 0%, blue 100%); |
- red 0%：左端から赤色が開始
- blue 100%：右端まで青色に移行
このように、2つの色の位置を明示することで、色の過渡的な変化を制御できます。
複数色での段階的変化
3つ以上の色を使うと、より複雑で印象的なグラデーションが可能です。各色の位置を指定して順次移行させます。
|
1 2 |
background: linear-gradient(to bottom, yellow 0%, orange 50%, red 100%); |
- yellow 0%：上部から黄色が始まる
- orange 50%：中央でオレンジ色に変化
- red 100%：下部まで赤色へ移行
複数の色停止点を加えることで、UIデザインの自由度が広がります。
ブラウザ対応と注意点
現代の主要なブラウザではlinear-gradient()が完全サポートされており、使用する際にはプレフィクス不要です。
ただし、技術的な進化に伴い変更される可能性があるため、最新情報の確認が必要です。
主要ブラウザでのサポート状況
| ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応（2013年以降） |
| Firefox | 完全対応（2014年以降） |
| Safari | 完全対応（2015年以降） |
| Edge | 完全対応（2017年以降） |
過去の-webkit-linear-gradient()などのベンダープレフィクスは不要です。新規開発では標準記法を採用してください。
実際に動くコード例と実験方法
ここでは、実際に動くHTML/CSSのサンプルコードを提供します。
このコードをコピーしてブラウザで確認することで、グラデーション背景の作成手順が理解しやすくなります。
HTML/CSSコードのサンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Linear Gradient Example</title> <style> .gradient-box { width: 300px; height: 200px; background: linear-gradient(to right, red 0%, blue 100%); border: 1px solid #ccc; } </style> </head> <body> <div class="gradient-box"></div> </body> </html> |
- to right：左から右へ流れるグラデーション
- red 0%とblue 100%で赤から青への移行を実現
色組み合わせの自作チャレンジ
このコードを元に、さまざまな色（例: green, purple, orange）を組み合わせてみてください。
to topや135degなど、方向も自由に変えて実験してみてください。
まとめ
- 線形グラデーションはCSSで簡単に作成可能で、UIデザインの魅力を高める技術です
linear-gradient()関数には「方向指定」と「色停止点」が重要で、それぞれ使い分けます- キーワードでも度数値でも方向を指定でき、好みに応じて選択可能です
- ブラウザの対応は完全で、プレフィクスは不要です
- 実際のコードを試すことでグラデーション背景の作成が理解できます
以上を踏まえ、自分なりの色組み合わせと方向指定を試してみてください。独自のデザインを作成するのも面白いでしょう。