📷 完成イメージ
- 明るいブルー〜グリーンの背景グラデーション(色は任意）
- 中央に白い文字（
.gradient-box__title,.gradient-box__text） - ボックスに丸みや影がついて視認性アップ
📁 作成ファイル・保存場所
css-practice フォルダに以下のファイルを用意してください。
| ファイル名 | 内容 |
|---|---|
| gradient-background.html | グラデーション背景の練習用HTMLファイル |
| gradient-background.css | CSSで背景グラデーションを指定するファイル |
👉 HTMLファイルとCSSファイルは <link> タグで連携してください。
HTMLはこのページ下部の模写コードを参考に入力します。
🔰 目的
- CSSの
backgroundにlinear-gradient()を使って背景に色のグラデーションを設定できるようになる to right,to bottom,45degなど方向指定の意味を理解するradial-gradient()や 透明グラデーションなどの応用例に触れる
チェックポイント
- グラデーションの構文（関数）が正しく書けているか
- グラデーションを背景に指定して要素に適用できているか
- 色と角度の組み合わせが視覚的にわかりやすく使われているか
- レスポンシブでも崩れないか（幅・高さ・テキストの配置など）
HTMLを模写しよう
下記のHTMLを参考に css-practice03.html を作成してください。.gradient-box クラスを使って、背景グラデーションの対象を明確にします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Practice 03 - グラデーション</title>
<link rel="stylesheet" href="gradient-background.css>
</head>
<body>
<main>
<section class="gradient-box">
<h2 class="gradient-box__title">グラデーション背景</h2>
<p class="gradient-box__text">このボックスはCSSのグラデーションで背景が彩られています。</p>
</section>
</main>
</body>
</html>
🏋️ トレーニングスタート！
次は css-practice03.css を作成し、背景に linear-gradient を適用してみましょう。
CSSヒント
.gradient-boxにbackground: linear-gradient(...)を指定- グラデーションは
to right,to bottom,45degなどで方向を調整 padding,border-radius,colorなども調整して見た目を整えましょう
応用ポイント
radial-gradient()で中央からの放射状グラデーションも試してみようrgba()を使って透明なグラデーションや、重ね背景にも挑戦してみよう- グラデーションを ボタンや セクション背景にも応用できます！
解答例（CSS）
色や角度は任意の色で試してみましょう。
/* ベース設定 */
body {
margin: 0;
padding: 2rem;
font-family: sans-serif;
background-color: #f2f2f2;
}
/* グラデーションボックス */
.gradient-box {
max-width: 800px;
margin: 0 auto;
padding: 3rem 2rem;
border-radius: 12px;
color: #fff;
background: linear-gradient(135deg, #58c0e8, #5bd7a8);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
text-align: center;
}
/* 見出しと本文 */
.gradient-box__title {
font-size: 1.8rem;
margin-bottom: 1rem;
}
.gradient-box__text {
font-size: 1rem;
line-height: 1.6;
}