Day 8 です。
今日から Phase 2: デザインの表現力を高める週 に入ります。
これまでの 1 週間で「骨組み（レイアウト）」を作る力はつきました。ここからは「装飾（デザイン）」の技術を学びます。
今日はその第一歩、Web サイトの雰囲気を変える「グラデーション」を扱います。
はじめに：画像を使わない色表現
Web デザインにおいて、単色（ベタ塗り）の背景は安全ですが、単調に見えることがあります。
CSS グラデーション（Gradients）を使えば、画像を読み込むことなく、奥行きのある色彩や模様を作り出すことができます。しかもデータ容量はほぼゼロで、ページの表示速度にも優しい技術です。
🎯 本日の目標
-
linear-gradient（線形） を使いこなし、美しい夕焼けのような背景を作る。 -
radial-gradient（円形） やrepeating-...（繰り返し） を使って、CSS だけで「模様」を描く。 - 複数のグラデーションを 重ねる テクニックを理解する。
📝 ミッション内容
以下の 2 つのカード（長方形のボックス）を CSS で作ってください。
-
Mission 1: 「Sunset Card」
- 左上から右下に向かって、紫からオレンジ、そして黄色へと変化する「夕暮れの空」のような滑らかなグラデーションをかける。
-
Mission 2: 「Pattern Card」
- CSS の機能だけで「ストライプ（縞模様）」または「水玉模様」の背景を作る。
💻 実装サンプル
正解例
See the Pen CSSマスターへの道「背景とグラデーション」 by サカツ (@saka2jp) on CodePen.
🧠 解説と重要ポイント
1. グラデーションは「画像」扱い
CSS において、グラデーションは background-color ではなく、background-image プロパティとして扱われます（短縮形の background でも可）。
2. linear-gradient（線形）の書き方
最もよく使う形です。
background: linear-gradient(方向, 色1, 色2, 色3...);
-
方向:
to right（右へ）、to bottom（下へ）、45deg（斜め）などで指定。 -
色の位置: 色の後ろに
%をつけると、変化する位置を細かく制御できます。- 例:
linear-gradient(to right, blue 50%, red 50%)→ 青と赤がくっきり分かれた 2 色旗になります。
- 例:
3. グラデーションは「重ねられる」
background-image はカンマ , 区切りで複数の値を指定できます。「先に書いたものが手前（上）」 に表示されます。
/* 例: 写真の上に、黒い半透明グラデーションを重ねる */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)),
/* 手前の層（暗くする用） */ url("photo.jpg"); /* 奥の層（写真） */
これを使えば、文字が乗っても読みやすい背景画像が作れます。
💡 応用：円形グラデーションで「スポットライト」
線形だけでなく、中心から広がる radial-gradient もあります。これを応用すると、一部分だけ明るいスポットライトのような効果が作れます。
.spotlight {
background: radial-gradient(
circle at center,
#ffffff 0%,
#dddddd 20%,
#888888 100%
);
}
-
circle: 正円（デフォルトは楕円になることも）。 -
at center: 中心の位置を指定（at top leftなども可）。
おわりに
グラデーションは色の組み合わせセンスが問われますが、「uiGradients」などの Web サイトを参考にすると、配色がすぐに見つかります。
次回は、カードデザインをさらに立体的にする 「影（Box-shadow）」 です。マテリアルデザインやニューモーフィズムといった表現に挑戦します。