【HTML&CSS】background-sizeの使い方をわかりやすく説明

こんにちは、@AWAKOJIです。

今日も、薬剤師をしながらプログラミングの勉強をしています。

今回の記事は、background-sizeについてです。

できるだけわかりやすく説明したつもりなのでよかったらぜひご覧ください。

background-sizeとは?

background-sizeはCSSで使用するプロパティです。

このプロパティを使用することで、背景画像の大きさを調整できるようになります。

CSSの書き方は以下の通りです。

そのため、background-sizeを利用するときは、以下のようになるわけです。

background-sizeに指定できる値

では、background-sizeに指定できる値は以下の通りです。

  • auto(初期値)
  • cover
  • contain
  • 数値

初期値というのは、background-sizeの値を指定しないと自動でautoの挙動になるという意味です。

それぞれの挙動を実際に見ていきましょう。

この画像をサンプルとして使ってみます。

この画像サイズは、幅×高さが300px×200pxになっています。

auto(初期値)

autoを指定するともともとの画像の大きさで表示されます。

コードを書いて挙動を見てみます。

div classで300px(width)×200px(height)の枠を作っています。

そしてその周囲に10pxの太さで黒色(#333)の境界線(border)を実線(solid)で書いています。

背景画像はbackground-imageプロパティを使います。

最後に、background-sizeの値をautoに指定しています。

結果、表示されたのは以下の通りです。


黒色の実線に隙間なく表示されたことがわかります。
autoでもともとの画像サイズが表示されているためです。

表示枠が狭いと?

ちなみに、表示枠が狭いとどうなるか気になったのでやってみました。

200px(width)×100px(height)と狭くしています。

結果、ブラウザに表示されたのは以下の通りです。

表示枠のサイズを画像サイズは変わらず、はみ出た部分は表示されていません。

表示の起点が左上であることも確認できますね。

話がそれたので、次はcoverを指定してみます。

cover

coverを指定すると、縦横比を保ったまま表示枠全体が埋まります。

まさに『覆われる』(cover)というわけです。

コードを書いてみましょう。

div classで300px(width)×300px(height)の正方形の枠を作っています。

そしてその周囲に10pxの太さで黒色(#333)の境界線(border)を実線(solid)で書いています。

背景画像はbackground-imageプロパティを使います。

最後に、background-sizeの値をcoverに指定しています。

結果、表示されたのは以下の通りです。

表示枠全体を覆うために画像が少し大きくなったことがわかります。

また、表示基準点が左上であるため画像の右側が表示されていないことがわかります。

画像の縦横比はかわっていません。(縦:横=2:3)

縦横比を維持しながら、表示枠全体をうめようとすると、画像の一部が削られてしまうということです。

background-repeatを指定しつつbackground-sizeを指定するとどうなる?

background-repeatでrepeatを指定してbackground-sizeをcover指定するとどうなるのか気になったのでやってみました。

まず、background-sizeは指定していません。

background-repeatプロパティをrepeat指定しています。

600px×400pxの枠に繰り返し表示されるはずです。


予想通り、4つの画像が繰り返し表示されました。

このCSSコードにbackground-sizeを追加で書いてみます。

さぁ、いったいどのような表示になるでしょうか?

画像は繰り返し表示されず1つの画像で表示枠全体が埋まりました。

つまり、background-repeatよりbackground-sizeが優先されるということですね。

※CSSはあとに書かれた方が優先されるからかと思いましたが、background-repeatを最後に書いても表示は変わりませんでした。

次は、containを見ていきます。

contain

containを指定すると、縦横比を保ったまま画像全体が最大の大きさで表示されます。

表示枠が画像全体を『含める』(contain)するというわけです。

コードを書いて確認してみます。

div classで400px(width)×400px(height)の正方形の枠を作っています。

そしてその周囲に10pxの太さで黒色(#333)の境界線(border)を実線(solid)で書いています。

背景画像はbackground-imageプロパティを使います。

最後に、background-sizeの値をcontainに指定しています。

結果、表示されたのは以下の通りです。

縦横比を維持しつつ、画像の全体が最大の大きさで表示されています。

このときの画像の基準点も左上です。

気付いた点はそれだけではないですね。

下に画像が繰り返し表示されています。

これは、background-repeatプロパティのrepeat(初期値)が機能しているためです。

繰り返し表示が嫌ならno-repeatを指定しましょう。

次は、数値を指定してみましょう。

数値

background-sizeプロパティの値を数値にすれば、縦と横のサイズを自分の好きなように決めることができます。

縦と横、それぞれ好きな数値を指定するため縦横比は維持されないことになります。

div classで400px(width)×400px(height)の正方形の枠を作っています。

そしてその周囲に10pxの太さで黒色(#333)の境界線(border)を実線(solid)で書いています。

背景画像はbackground-imageプロパティを使います。

画像が繰り返し表示されるとわかりにくいので、background-repeatプロパティをno-repeatとして繰り返し表示されないようにしています。

最後に、background-sizeの値をcontainに指定しています。

結果、表示されたのは以下の通りです。

もともと300px×200pxの画像が縦横比を変えて、200px×300pxの画像になりました。

上記の例では数値の単位をpxとしました。

px以外にも、pt、cm、mm、emなどの単位も使えます。

また%も使えます。

%は、表示枠の%の大きさで表示するかを指定します。

元の画像サイズの何%で表示するかではないので注意しましょう。

ブラウザ表示は以下の通りです。

表示枠は400px×400pxです。

値は80%、50%です。

横:400px×0.8=320px、縦:400px×0.5=200pxという計算によって320px×200pxの背景画像となっています。

ちなみに、縦か横どちらかを数値で指定して、もう一方をautoにすると、縦横比が維持された状態で表示されます。

縦を300pxに指定して、横をautoにしました。

ブラウザ表示は以下の通りです。

縦横比が維持された状態で画像が表示されています。

もともとの画像は横:縦=3:2であるため、この画像の横は450pxです。

表示枠は400px四方なので50px分はみ出しています。

表示の基準点は左上であるので右側がはみ出して表示されていません。

まとめ

background-sizeプロパティで学んだことをまとめます。

  • background-sizeは背景画像の大きさを調整するプロパティである
  • 値はauto(初期値)、cover、contain、数値の4種類。
  • autoはもとの画像の大きさで表示
  • coverは縦横比を維持したまま表示領域がすべて覆われる
  • containは縦横比を維持したまま最大の大きさで画像全体が表示される
  • 数値は縦横比を維持せずに表示が可能

【無料体験・全額返金】圧倒的に効率的なプログラミングスクール

独学でプログラミングを勉強するのは大変じゃないですか?

  • ググるのが面倒
  • エラーの対応に1日消費
  • 重要なコードがわからない

お金はかからないものの、かなり効率が悪いです。

『Time is Money』
時間を節約し、効率的に勉強したいならプログラミングスクールを圧倒的におすすめします。
スクールに通って短期間で集中的に成長しちゃいましょう。

代表的なスクールは以下の2つ。

  • TechAcademy
    web系、アプリ系いずれもOK
    完全オンラインでプログラミングを学習したい方
  • テックキャンプ
    web系、アプリ系いずれもOK
    教室またはオンラインで学習したい方

この2つには以下のような特典もあります。

TechAcademy

  • 1週間の無料体験
  • 1コース申し込むと、もう1コースプレゼント

テックアカデミー

  • 1週間以内に申告あれば全額返金
  • 転職できなかったら全額返金

かなりお得です。

確かにどのスクールも本格的にやれば20~30万くらいかかります。
でも、スキルを身に付けて案件を受注してしまえばすぐに回収できる金額です。

目安の報酬をまとめておくと、

  • ランサーズ:1件10万くらい
  • 中小企業:1件30万くらい
  • 大手企業:桁違い

こんな感じです。
1ヶ月で回収できる料金をケチって、独学をつづけるのはセンスが悪いです。

この無料キャンペーンや全額返金制度はいつまで続くかわかりません。
なので、とりあえず試してみるのが良いかと思います。

TechAcademy:無料で1週間体験
テックキャンプ:全額返金制度

テックキャンプに関しては無料でカウンセリングを受けることができます。
プロのカウンセラーが個別に悩み聞いてくれるので、まずは話をしてみてもいいですね。
(下のバナーから詳細を見れます。)
受講料の割引もあるのでお得です。