LTech

レッスン6: CSSで彩ろう！装飾効果とグラデーションをマスターしよう

影などの装飾効果とグラデーションを学び、Webページの見た目を洗練させましょう。

🎯 学習目標

  • 装飾効果（影）に関するプロパティの使い方を習得する
  • グラデーションを活用した高級感のあるデザインを習得する
  • 要素に立体感と奥行きを与える方法を学ぶ
  • これらの技術を活用して魅力的なUIを作れるようになる

📘 目次

  1. 装飾効果（影）に関するプロパティ
  2. グラデーションの設定
  3. 今日のまとめ
  4. 演習：学んだプロパティを使ってみよう
  5. 理解度チェック

📚 レッスン

1. 装飾効果（影）に関するプロパティ

影をつけることで、要素に立体感を出したり、浮き上がっているような効果を与えることができます。

ボックスに影をつける（box-shadow）

box-shadow プロパティを使うと、要素に影をつけられます。

.card {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

設定項目は次の順番で指定します。

  1. 水平方向のずれ：正の値で右、負の値で左
  2. 垂直方向のずれ：正の値で下、負の値で上
  3. ぼかしの半径：大きいほどぼやけた影に
  4. 広がりの半径：（省略可能）影の大きさを拡大
  5. 色：影の色
基本的な影
2px 2px 5px rgba(0,0,0,0.3)
ぼかし影
0 0 15px rgba(0,0,0,0.2)
オフセット影
8px 8px 0 rgba(0,0,0,0.2)
内側の影
inset 0 0 10px rgba(0,0,0,0.3)

↑ 実際の表示例（様々なbox-shadow効果）

テキストに影をつける（text-shadow）

text-shadow プロパティを使うと、テキストに影をつけられます。

.title {
  text-shadow: 1px 1px 2px #888;
}

設定項目は次の順番で指定します：

  1. 水平方向のずれ
  2. 垂直方向のずれ
  3. ぼかしの半径
  4. 色
見出し
影なし
見出し
text-shadow: 1px 1px 2px #888;
見出し
text-shadow: 2px 2px 0 #888;

↑ 実際の表示例（様々なテキストの影効果）

2. グラデーションの設定

グラデーションを使うと、立体感や高級感のあるデザインを実現できます。

グラデーション背景を設定する（linear-gradient, radial-gradient）

/* 線形（直線状）グラデーション */
.box-linear {
  background: linear-gradient(to right, #3498db, #8e44ad);
  /* 方向、開始色、終了色 */
}

/* 放射状（円形）グラデーション */
.box-radial {
  background: radial-gradient(circle, #f5f5f5, #3498db);
  /* 形状、中心色、外側色 */
}

/* 複数色を使ったグラデーション */
.box-multi {
  background: linear-gradient(45deg, #ff6b6b, #ffa25f, #5ce1e6);
  /* 角度、色1、色2、色3 */
}

/* 繰り返しグラデーション */
.box-repeating {
  background: repeating-linear-gradient(
    45deg,
    #f1c40f,
    #f1c40f 10px,
    #f39c12 10px,
    #f39c12 20px
  );
  /* パターン、色1、色1の終了位置、色2、色2の終了位置 */
}
to right
to bottom
radial
multi-color
繰り返し

↑ 実際の表示例（様々なグラデーションの適用）

今日のまとめ

  • 装飾効果関連のプロパティ：box-shadow, text-shadow などを使って、要素やテキストに影をつけて立体感を出すことができます。
  • グラデーション：linear-gradient や radial-gradient を使って、単色ではない多彩な背景を表現できます。
  • これらのプロパティを活用することで、より洗練されたUIデザインが実現できます。

📚 リファレンス

このレッスンで学んだCSSプロパティの詳細については、リファレンスページで確認できます。

✍️ 演習問題

ここでは学んだ内容を実際に使って、簡単な演習問題に挑戦してみましょう。エディタを使って実際にコードを書いてみてください。

右側のエディタにコードを入力して「実行」ボタンをクリックすると、結果をプレビューで確認できます。

演習1：影を使ってカードを立体的に見せよう

box-shadowでカードを立体的に見せ、text-shadowで見出しをはっきりさせます。

装飾前

カードのタイトル

カードの内容をここに書きます。影がないので平面的です。

装飾後

カードのタイトル

カードの内容をここに書きます。影をつけると立体的に見えます。

↑ 実際の表示例（左：装飾前、右：box-shadowとtext-shadowを適用後）

<style>
  .card {
    width: 300px;
    padding: 15px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    /* ここに影のスタイルを追加してください */
  }
  
  .card-title {
    color: #333;
    /* ここにテキスト影のスタイルを追加してください */
  }
</style>

<div class="card">
  <h3 class="card-title">カードのタイトル</h3>
  <p>カードの内容をここに書きます。影をつけると立体的に見えます。</p>
</div>

やってみよう！

  • box-shadowを使って、カードに右下2pxに半透明の影をつける
  • text-shadowを使って、タイトルテキストに薄い影をつけて読みやすくする
<style>
  .card {
    width: 300px;
    padding: 15px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 右下2pxに半透明の影 */
  }
  
  .card-title {
    color: #333;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); /* テキストに薄い影 */
  }
</style>

<div class="card">
  <h3 class="card-title">カードのタイトル</h3>
  <p>カードの内容をここに書きます。影をつけると立体的に見えます。</p>
</div>
解説

box-shadowプロパティの解説:

  • 2px 2px 5px rgba(0, 0, 0, 0.3) の意味：
    • 最初の値 2px：水平方向のオフセット（2px右方向）
    • 2番目の値 2px：垂直方向のオフセット（2px下方向）
    • 3番目の値 5px：ぼかしの半径（影のぼかし具合）
    • 4番目の値 rgba(0, 0, 0, 0.3)：影の色（黒色で30%の不透明度）
  • 水平・垂直方向のオフセットを同じ値（2px）にすることで、右下45度から光が当たっているような自然な影ができます。
  • 影の不透明度を0.3（30%）にすることで、はっきりとした立体感を表現できます。

text-shadowプロパティの解説:

  • 1px 1px 1px rgba(0, 0, 0, 0.1) の意味：
    • 最初の値 1px：水平方向のオフセット（1px右方向）
    • 2番目の値 1px：垂直方向のオフセット（1px下方向）
    • 3番目の値 1px：ぼかしの半径
    • 4番目の値 rgba(0, 0, 0, 0.1)：影の色（黒色で10%の不透明度）
  • テキストの影は控えめな設定（不透明度0.1）にしているため、テキストの可読性を損なわずに立体感を出しています。

デザイン上のポイント:

  • カードに影をつけることで、背景から浮き上がって見え、クリックやタップできる要素であることを視覚的に伝えられます。
  • テキストに薄い影をつけることで、テキストがはっきりと見えるようになり、カードデザインに高級感が出ます。
  • 影の効果は控えめに設定するのがポイントです。強すぎる影はデザインを重たく見せてしまいます。

演習2：さまざまなグラデーションを作成しよう

線形グラデーションと円形グラデーションを使って、異なる視覚効果を作り出しましょう。

線形グラデーション
linear-gradient(to right, #3498db, #8e44ad)
円形グラデーション
radial-gradient(circle, #f5f5f5, #3498db)
複数色グラデーション
linear-gradient(45deg, #ff6b6b, #ffa25f, #5ce1e6)

↑ 実際の表示例（様々なグラデーション効果）

<style>
  .gradient-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }
  
  .gradient-box {
    width: 200px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    text-align: center;
  }
  
  .linear-gradient {
    /* 線形（直線状）グラデーションを設定 */
  }
  
  .radial-gradient {
    /* 円形グラデーションを設定 */
  }
  
  .multi-color {
    /* 複数色を使ったグラデーションを設定 */
  }
</style>

<div class="gradient-container">
  <div class="gradient-box linear-gradient">線形グラデーション</div>
  <div class="gradient-box radial-gradient">円形グラデーション</div>
  <div class="gradient-box multi-color">複数色グラデーション</div>
</div>

やってみよう！

  • linear-gradientクラスには、左から右へのグラデーション（青から紫）を設定する
  • radial-gradientクラスには、中心から外側へのグラデーション（白から青）を設定する
  • multi-colorクラスには、3色以上を使った斜め45度のグラデーションを設定する

.linear-gradient {
  background: linear-gradient(to right, #3498db, #8e44ad);
  /* 左（青）から右（紫）へのグラデーション */
}

.radial-gradient {
  background: radial-gradient(circle, #f5f5f5, #3498db);
  /* 中心（白）から外側（青）へのグラデーション */
  color: #333; /* 背景が明るいため、テキストを暗い色に */
}

.multi-color {
  background: linear-gradient(45deg, #ff6b6b, #ffa25f, #5ce1e6);
  /* 45度の角度で、赤→オレンジ→水色のグラデーション */
}
解説

グラデーションプロパティの解説:

1. 線形グラデーション (linear-gradient)
  • linear-gradient(to right, #3498db, #8e44ad) の意味：
    • 第1引数 to right：グラデーションの方向（左から右へ）
    • 第2引数 #3498db：開始色（青）
    • 第3引数 #8e44ad：終了色（紫）
  • 方向は to top, to bottom, to left, to right または角度（45deg, 90deg など）で指定できます。
2. 円形グラデーション (radial-gradient)
  • radial-gradient(circle, #f5f5f5, #3498db) の意味：
    • 第1引数 circle：形状（円形）
    • 第2引数 #f5f5f5：中心の色（白）
    • 第3引数 #3498db：外側の色（青）
  • 形状は circle（円形）または ellipse（楕円形）で指定できます。
3. 複数色グラデーション
  • linear-gradient(45deg, #ff6b6b, #ffa25f, #5ce1e6) の意味：
    • 第1引数 45deg：グラデーションの角度（45度）
    • 第2引数以降：複数の色（赤 → オレンジ → 水色）
  • 3色以上を指定することで、より複雑で魅力的なグラデーションが作成できます。
  • 色の位置を細かく制御したい場合は、#ff6b6b 0%, #ffa25f 50%, #5ce1e6 100% のように指定することもできます。

デザイン上のポイント:

  • グラデーションは背景に奥行きや動きを与え、平面的なデザインに立体感をもたらします。
  • コントラストの高い色の組み合わせは視認性が高くなりますが、落ち着いた印象にしたい場合は類似色を使用しましょう。
  • 背景色が明るい場合（radial-gradientの例）は、テキストを暗い色にして読みやすくすることが重要です。

✅ 理解度チェック

クイズに正解すると、このレッスンは「完了済み」として記録されます。

1. box-shadowプロパティの値として正しいのはどれですか？

2. テキストに影をつけるためのCSSプロパティは？

3. 線形のグラデーションを設定するためのCSSプロパティは？

📘 次回予告

次回（レッスン7）ではCSSのちょっと便利な機能！擬似クラスと擬似要素をマスターしようについて学びます。ホバー効果やコンテンツの前後に要素を追加する方法など、より高度なCSSテクニックを習得しましょう。

« 前のレッスンへ戻る レッスン7へ進む »

インラインエディタ