column

ITコラム

Little girl looking through a magnifying glass on dark background with pattern. close-up

プログラミングノウハウ

2017.04.24

CSS【 background 】5~background-size

背景に関するプロパティの中に、背景画像のサイズを変更する際に使用するbackground-sizeプロパティがあります。
今回は、background-sizeプロパティについてまとめたいと思います。

背景に関するプロパティについては、以下のページもご参照下さい。
CSS【 background 】1~背景プロパティの種類とbackground-color
CSS【 background 】2~background-imageでレイヤーやグラデーションも
CSS【 background 】3~background-repeat、background-attachment
CSS【 background 】4~background-position
CSS【 background 】5~background-size(本ページ)
CSS【 background 】6~background-clip、background-origin
CSS【 background 】7~背景に関するショートハンドプロパティ

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. background-sizeプロパティ

background-sizeプロパティは、背景画像のサイズを変更する際に使用します。

background-sizeプロパティで指定する値には、次のようなものがあります。

auto デフォルト値
画像の縦横比を維持したまま、サイズを自動計算する
contain 画像の縦横比を維持したまま、背景領域に収まる最大サイズに自動調整する
画像全体を表示するため、画像がno-repeatの場合は、画像で覆われない領域は背景色を表示する
cover 画像の縦横比を維持したまま、背景領域に収まる最小サイズに自動調整する
領域の幅か高さの小さいほうに画像の幅か高さを合わせて全体を覆うため、画像がトリミングされる
% 画像に対してのパーセンテージで指定
数値 pxやemなどの単位を付けて、画像のサイズを指定

 
background-sizeプロパティの値は、継承されません。
また、background-sizeプロパティは、全ての要素で使用できます。

containとcoverは、CSS3から追加されたキーワードです。これら使うと、画像が背景領域にちょうど収まるように指定することができます。

▲目次へ戻る

2. background-sizeプロパティの値の数

background-sizeプロパティは、1~2個の値を半角スペースで区切って指定します。

• containとcover以外の値で、値を2つ指定した場合は、画像の幅、高さの順の指定となります。

• containとcover以外の値で、値を1つ指定した場合は、2つ目の値(高さ)はautoとなります。

• containとcoverは、値は1つだけ(containならcontainだけ)指定します。
「background-size: contain 100%」のような指定をすると、ブラウザが指定の内容を認識できないため、デフォルト値のbackground-size: autoとなります。

▲目次へ戻る

3. キーワードで指定

background-sizeプロパティに、auto、contain、coverをそれぞれ指定してみます。

auto(デフォルト)

contain

cover

 
ソースは次の通りです。

<!-- CSSファイル -->
div#sample {margin:0; padding:0;}
div#sample p {
	width:350px;
	height:250px;
	font-weight:bold;
	background-color:#F9C;
	background-image:url(img/living.jpg);
	background-repeat:no-repeat;}
div#sample p:nth-child(1) {background-size:auto;}
div#sample p:nth-child(2) {background-size:contain;}
div#sample p:nth-child(3) {background-size:cover;}

<!-- HTMLファイル -->
<div id="sample">
<p>auto(デフォルト)</p>
<p>contain</p>
<p>coverlt;/p>
</div>

autoは原寸サイズです。background-sizeプロパティを指定しない場合は、デフォルト値のautoとなり、原寸サイズで表示されます。

coverは、レスポンシブレイアウトを考慮する際に最適な値です。

▲目次へ戻る

3. %で指定

%で値を指定する場合は、背景領域の幅や高さに対するパーセンテージで画像の幅や高さを指定します。

%の値は、幅、高さの順で、値を半角スペースで区切って指定します。
2つ目の値(高さ)を指定せず、値を1つだけ指定すると、高さはautoとなります。

100%

auto 100%

70% 100%

 
ソースは次の通りです。

<!-- CSSファイル -->
div#sample {margin:0; padding:0;}
div#sample p {
	width:350px;
	height:250px;
	font-weight:bold;
	background-color:#F9C;
	background-image:url(img/living.jpg);
	background-repeat:no-repeat;}
div#sample p:nth-child(1) {background-size:100%;}
div#sample p:nth-child(2) {background-size:auto 100%;}
div#sample p:nth-child(3) {background-size:70% 100%;}

<!-- HTMLファイル -->
<div id="sample">
<p>100%</p>
<p>auto 100%;</p>
<p>70% 100%;/p>
</div>

%で指定する場合は、背景領域や画像の縦横比によって画像の見え方が違ってきます。

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ