CSS: 背景にグラデーション background: linear-gradient(...)
📝 使用用途
このテンプレートでは、CSSのbackground: linear-gradient()を使って、背景にグラデーションを追加する方法を紹介します。
📘 解説
上記のCSSコードでは、background: linear-gradient()を使用して、2色のグラデーションを作成しています。グラデーションの方向や色は自由に変更できます。
🔹 部分コード
背景にグラデーションが適用されています。
<div class="demo-area">
<p>背景にグラデーションが適用されています。</p>
</div>
<style>
.demo-area {
height: 200px;
text-align: center;
background: linear-gradient(to right, #ff7e5f, #feb47b);
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
</style>
💻 完全動作コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS: 背景にグラデーション background: linear-gradient(...)</title>
<link rel="stylesheet" href="/assets/css/template-common.css?v=1">
<style>
.demo-area {
height: 200px;
text-align: center;
background: linear-gradient(to right, #ff7e5f, #feb47b);
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
</style>
</head>
<body>
<div class="demo-area">
<p>背景にグラデーションが適用されています。</p>
</div>
</body>
</html>
🌈 グラデーションデザインの実践テクニック
linear-gradient()を使った背景グラデーションは、モダンなWebデザインにおいて視覚的な深みと動きを加える効果的な手法です。適切に使用することで、サイトの印象を大きく向上させることができます。
🎨 カラーコーディネーション
基本のオレンジ系グラデーション(#ff7e5f→#feb47b)だけでなく、to rightの方向をto bottomや45degに変更すると全く異なる印象に。同系色で落ち着いた雰囲気にしたり、補色でポップな印象を作ることも可能です。ツールを使ってCSS Gradient Generatorで好みのグラデーションを見つけるのもおすすめです。
✨ 高度なグラデーションテクニック
複数色のグラデーション(linear-gradient(to right, red, yellow, green))や、色の途中位置を指定(linear-gradient(to right, red 0%, yellow 50%, green 100%))するとより複雑な表現が可能。透過グラデーション(rgba(255,255,255,0))を使えば、画像の上に自然なオーバーレイも作成できます。
📱 レスポンシブ対応のポイント
モバイルデバイスでは縦方向(to bottom)のグラデーションが自然に見える場合が多いです。また、background-attachment: fixedを避けることで、スクロール時のパフォーマンス問題を防げます。ダークモード対応には@media (prefers-color-scheme: dark)でグラデーション色を調整しましょう。
グラデーションは強力なデザインツールですが、使いすぎるとかえってごちゃごちゃした印象になります。重要なセクションやヘッダーなど、ポイントを絞って効果的に使用することが大切です。また、テキストの可読性を損なわないよう、コントラストにも注意が必要です。