HTML 入門
スタイルシートでデザインを作ろう
背景色や背景画像を設定する
次にページや要素の背景色を変更したり，背景画像を設定する方法を確認します．
まず，ページ全体の背景色を設定するには <body> 要素に背景色のスタイリングを行うことになります．CSS ファイルに次のようにして色を設定すると良いでしょう．（HTMLのサンプルを見る ／ CSSのサンプルを見る）
style.css（抜粋）
body {
background-color: chocolate;
}
次にページの背景色を横方向のグラデーションにしてみます．たとえば CSS で次のようなスタイリングを定義します．具体的には，グラデーションの方向を90度回転させることで横方向にしています．左から 5% までの領域は rgb(192, 192, 192) のグレーです．左から 95% 以降の右側の領域は rgb(255, 255, 255) の白になります．その間の 5% から 95% の領域がグラデーションになっています．
（HTMLのサンプルを見る ／ CSSのサンプルを見る）
style.css（抜粋）
body {
background:linear-gradient(
90deg,
rgb(192, 192, 192) 5%,
rgb(255, 255, 255) 95%
);
}
同じように div 要素にもグラデーションを適用します．まず共通クラスとなる .box クラスのスタイリングを行います．
style.css（抜粋）
.box {
width: 95%;
height: 48px;
margin: 16px auto;
}
.box1 クラスは上の背景と同じグラデーションを設定します．グレーから白に横方向のグラデーションになっています．
index.html（抜粋）
<div class="box box1"></div>
style.css（抜粋）
.box1 {
background:linear-gradient(
90deg,
rgb(192, 192, 192) 5%,
rgb(255, 255, 255) 95%
);
}
ブラウザでの表示結果
.box2 は黄色から青へのグラデーションです．基準となる点が 15% と 85% へ変更してる点にも注目してください．
index.html（抜粋）
<div class="box box2"></div>
style.css（抜粋）
.box2 {
background:linear-gradient(
90deg,
#ffff00 15%,
#0000ff 85%
);
}
ブラウザでの表示結果
.box3 は基準となる点を 30% と 70% へ変更しました．
index.html（抜粋）
<div class="box box3"></div>
style.css（抜粋）
.box3 {
background:linear-gradient(
90deg,
#ffff00 30%,
#0000ff 70%
);
}
ブラウザでの表示結果
.box4 は高さを変更して向きを 180 度に変更しています．すると縦方向のグラデーションになりました．
index.html（抜粋）
<div class="box box4"></div>
style.css（抜粋）
.box4 {
background:linear-gradient(
180deg,
#ffff00 5%,
#0000ff 95%
);
height: 100px;
}
ブラウザでの表示結果
.box5 色の指定方法を rgba() にしました．もちろんこのような指定方法も利用できます．
index.html（抜粋）
<div class="box box5"></div>
style.css（抜粋）
.box5 {
background:linear-gradient(
90deg,
rgba(192, 192, 192, 1) 5%,
rgba(255, 255, 255, 1) 95%
);
}
ブラウザでの表示結果
最後に画像を配置します．親要素のサイズと画像サイズが等しい場合は簡単ですが，そうでない場合は色々と調整が必要です．ここでは高さを 160px にして幅は親要素の 100% です．このとき，background-size: cover; を指定すると画像サイズが自動で調整されます．ただし，画像の左上が基準点になるので，想定とは異なる結果になるかもしれません．ブラウザの横幅を変更したときに画像がどのように拡大縮小されるか確認してください．
index.html（抜粋）
<div class="box6"></div>
style.css（抜粋）
.box6 {
height:160px;
background-image: url(eye-00.jpg);
background-size: cover; /* サイズの自動調整 */
}
ブラウザでの表示結果
次は background-position: center; によって基準点を中心に変更しています．ブラウザの横幅を変更したときに画像がどのように拡大縮小されるか確認してください．少し改善されましたが，ブラウザの横幅を広げたときに画像のもう少し下側を表示したいように感じられます．
index.html（抜粋）
<div class="box7"></div>
style.css（抜粋）
.box7 {
height:160px;
background-image: url(eye-00.jpg);
background-size: cover; /* サイズの自動調整 */
background-position: center; /* サイズ調整の基準点を中心に */
}
ブラウザでの表示結果
さらに background-position: center 75%; によって基準点を左右方向では中心に，上下方向では上から75%地点に変更しています．ブラウザの横幅を変更したときに画像がどのように拡大縮小されるか確認してください．今度はブラウザの幅を広げたときの構図が良くなったように感じられます．なお，background-position の詳細はこちらから確認してください
index.html（抜粋）
<div class="box8"></div>
style.css（抜粋）
.box8 {
height:160px;
background-image: url(eye-00.jpg);
background-size: cover; /* サイズの自動調整 */
background-position: center 75%; /* 基準点を左右中央，上から75%地点に */
}
ブラウザでの表示結果