EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

CSSグラデーションとシャドウ

グラデーション

グラデーションは色の間のスムーズな遷移を作成します。CSSは2つの主要なグラデーション関数を提供します。

linear-gradient

直線グラデーションを作成：

サンプル

HTML 
<style>
.gradient-1 {
  background: linear-gradient(to right, #3498db, #2ecc71);
  height: 80px;
  margin-bottom: 10px;
}
.gradient-2 {
  background: linear-gradient(135deg, #e74c3c, #f39c12, #2ecc71);
  height: 80px;
}
</style>
<div class="gradient-1">左から右へのグラデーション</div>
<div class="gradient-2">斜めの多色グラデーション</div>
▶ 試してみよう

radial-gradient

円形/楕円形のグラデーションを作成：

サンプル

HTML 
<style>
.radial {
  background: radial-gradient(circle, #3498db, #2c3e50);
  height: 150px;
  border-radius: 50%;
}
</style>
<div class="radial">放射グラデーションの円</div>
▶ 試してみよう

シャドウ

box-shadow

要素にシャドウエフェクトを追加：

サンプル

HTML 
<style>
.card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 20px;
  background: white;
  border-radius: 8px;
}
.card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
</style>
<div class="card">シャドウ付きカード</div>
▶ 試してみよう

text-shadow

テキストにシャドウを追加：

サンプル

HTML 
<style>
h1 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
</style>
<h1>シャドウ付き見出し</h1>
▶ 試してみよう

❓ よくある質問

Q グラデーション作成にツールはありますか？
A おすすめ：cssgradient.ioとwebgradients.com——ドラッグ＆ドロップのグラデーションジェネレーターです。コードを直接コピーできます。他のグラデーションスキームを研究すると、角度や色の停止点の直感が養われます。
Q box-shadowは複数のシャドウを持てますか？
A はい、カンマで区切ります：`box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 8px 32px rgba(0,0,0,0.08);`で二重シャドウ効果が作成されます。シャドウは宣言順にスタックされ、先に記述したものが上に表示されます。
Q text-shadowとbox-shadowの違いは何ですか？
A `text-shadow`はテキストのみに作用し、スプレッドパラメータはなく、insetをサポートしません。`box-shadow`は要素のボックス全体に作用し、スプレッドがあり、insetをサポートします。構文は似ていますが、機能が異なります。

📖 まとめ

📝 演習

  1. グラデーションボタンを作成してください——左から右への色の遷移で、ホバー時に方向が変化。
  2. 「フローティングカード」を作成してください——デフォルトでは微妙なシャドウ、ホバー時により深いシャドウ + 浮き上がり。
  3. repeating-linear-gradientを使用してストライプ背景パターンを作成してください。
  4. PNGアイコンやテキストにtext-shadowまたはdrop-shadowのグローエフェクトを追加してください。
100%