背景のサイズと適応範囲について
本日の教材動画はこちら
引き続き、背景指定のあれこれについて深く掘り下げて勉強していきます。今回は背景のサイズ指定についてと、背景の適応範囲について勉強していきましょう。
background-size で指定できる値について
background-sizeは文字通り背景の大きさを指定できるプロパティです。指定できる値は以下の5つです。
- auto → 自動的に大きさを調節（初期値）
- contain → 縦横比を保持したまま、背景領域に収まる最大サイズになるよう拡大縮小する
- cover → 縦横比は保持したまま、背景領域を完全に覆う最小サイズになるよう拡大縮小する
- 値指定 → 〇pxという形で、背景画像の幅、高さを直接指定する
- ％指定 → 〇％という形で、背景画像の幅、高さを直接指定する
値指定と％指定はなんとなくもうわかるかと思いますので、今回はcontainとcoverの表示についてみていきましょう。
まずいつも通り適当なページとCSSを用意します。
文字色を白、背景画像の指定、表示は繰り返し表示なしの中央表示。HTMLの高さ表示を100％で表示（指定しないと表示する背景画像のサイズ調節がうまくいかないようです）。あとはdivのマージンを少し設けています。
ちなみに背景画像の全体像はこんな感じです。
上記のソースとCSSで出来上がったページがこちらです。背景画像に何も指定をしていないので、原寸大で表示されており、そのせいで画像の一部分だけが見えている状態になっているのわかると思います。
cover の指定をしてみる
上記のbodyに background-size：cover； の指定を追加します。
すると上記のように、画像の縦横比はそのままに、背景領域（今回であればページいっぱい）に画像が拡大・縮小されたのがわかると思います。
ウィンドウサイズを変えても同じ表示です。「背景領域いっぱいに拡大・縮小」ですので、ウィンドウサイズが小さくなれば画像を縮小して全体を表示し、ウィンドウサイズが大きければ画像を拡大して全体を表示させます。
contain の指定をしてみる
では次に先ほどのcover部分をcontainに変えてみましょう。 background-size：contain； の指定にします。
縦横比を保持したまま「背景領域に収まるように表示」させる指定の為、画像サイズ＝ウィンドウサイズの場合は上記のように背景画像の全体がきれいに見れます。
「縦横比を保持したまま」背景画像をページに収めようとするため、ウィンドウサイズによっては上記のように横に余白ができます（わかりやすいように、ページ外に黄色の色をつけてみました）
逆に縦が余る場合はこのように縦側に余白ができます。ちょっと言葉で説明するのが難しいため、この辺りは動画を見るとわかりやすいです。
background-clip について
次に背景の適応範囲の指定についてみていきましょう。使うのはbackground-clipというプロパティで、使える値は以下の3つです。
- border-box → 背景をボーダーボックスに適応する（初期値）
- padding-box → 背景をパディングボックスに適応する
- content-box → 背景をコンテントボックスに適応する
実際に画像で見てみましょう。
ページソースはそのままで、外部CSSの指定を上記のように変えました。boxクラスの高さを400px、横幅はページの70％、内側の余白を10px、ボーダーをつけ、背景画像も指定しました。
上記の指定で出来上がったページがこちらです。背景画像に何も指定をかけていないので、box内に表示されている背景画像は原寸大となり見切れています。ではまずここに、背景画像が全部表示されるようsizeプロパティをまた指定してみましょう。
background-size：cover；をboxクラスに追加しました。するとどうでしょう、box全体に画像が収まるよう表示されましたね。ここで大事なのは上下のボーダー部分まで画像が表示されている点です（画像の縦横比とウィンドウサイズによっては横ボーダーに表示されます）。
これは何もしていない場合、初期値である「background-clip:border-box」が指定されていることになります。内容としてはご覧の様にボーダー範囲にまで適応するという意味です。
padding-box を指定してみる。
ではborder範囲ではなく、padding範囲を指定したらどうなるでしょうか？boxクラスに「background-clip:padding-box;」を追加します。
すると今まで「border範囲まで」あった背景が、「padding範囲まで」表示に切り替わったのがわかるかと思います。画像では少しわかりにくいですが、現在paddingエリアを10pxに指定しています。文字の上下左右にちょっと余白があるかと思いますがこの範囲ですね！現在そこまで背景画像が表示されているのがわかります。
content-box を指定してみる
では次はpadding範囲ではなく、content範囲に指定を変えたらどうなるでしょうか？boxクラスの指定を「background-clip:content-box;」に変更してみます。
すると今まで「paddingr範囲まで」あった背景が、「content範囲まで」の表示に切り替わったのがわかります。要は要素、コンテンツの中身の部分にのみ背景を適応しますよ～～という意味ですね！現在paddingエリアを10pxに指定していますので、そのさらに内側にのみ背景が表示されているのが分かるかと思います。
このように、いくつかのプロパティを組み合わせることによって、背景画像を好きな大きさ、好きな表示範囲で表示させることができるようになります。clipについては使いどころを考えなきゃいけなさそうですが、sizeについては背景画像の指定における基本設定な感じがするので、すぐ慣れそうですね！
【参考サイト】
background-size …… 背景画像のサイズを指定する
CSSのbackground-sizeで背景画像サイズを設定する方法を徹底解説!!
