ページの上から下にグラデーションをかけたい
画像を作成しなくても、CSSでページ全体にグラデーションを設定することができます。サンプルでは、<body>に背景を適用してページ全体にグラデーションをかけています。CSSでグラデーションをかけるには、backgroundプロパティ、もしくはbackground-imageプロパティに「linear-gradient()」という値を適用します。値の設定方法には様々パターンがありますが、一番シンプルなのは「グラデーションの開始色」と「グラデーションの終了色」をカンマで区切って指定することです。このようにしておけば、上下に一直線のグラデーションをかけることができます。
※グラデーションは色ではなく画像として扱われます。そのため、background-colorプロパティではなく、background-imageプロパティを使います。
書式：上下に一直線のグラデーションをかける
background: linear-gradient(開始色,終了色);なお、ページ全体にグラデーションをかける際に注意しなければならないことがあります。それは、<html>要素に適用されるスタイルに「min-height:100%;」と書いておかなければならないことです。このスタイルを書いておかないとグラデーションが途切れることがあります。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプル</title>
<style>
html{
min-height: 100%;
}
body{
background: linear-gradient(#9ad4fc,#dcffb8);
}
.content{
margin: 64px auto 0 auto;
padding: 32px;
max-width: 800px;
border-radius:16px;
background: rgb(255, 255, 255,0.6);
}
</style>
</head>
<body>
<div class="content">
<h1> CAFE 森の街角</h1>
<h2>お誕生日・記念日プラン </h2>
<p>お祝い用のスペシャルデザートをご用意してサプライズ演出をいたします。</p>
<p>ホールケーキ 2000円 (4名様用~) <br>
スペシャルいちごパフェ 500円/お一人<br>
スペシャルデザート盛り合わせ 1500円(4名様用~) </p>
<p>前日までにご予約ください。 </p>
<h2>貸切パーティープラン </h2>
<p>カフェの暖かい雰囲気を生かしたアットホームなパーティーを演出いたします。 <br> お子様メニューにも対応いたしますので、お誕生会や、 卒園パーティーなどにもご利用いただ
けます。</p>
<p>25名様~ <br>
大人2500円・子供1500円~ </p>
<p>詳しくは、お気軽にご相談ください。 </p>
</div>
</body>
</html>