【15-3】background関連のプロパティ(3/4 background-size)

前回に引き続き backgroundについて
今回は background-size について詳しく見てみましょう。

本日のINDEX
  1. background-sizeプロパティ
    1. background-sizeの値は1〜2個
    2. 画像を複数使った場合の background-size の指定は?
    3. キーワードでの指定
    4. %での指定
    5. 数値でpxやemなどの単位を付けて指定

backgroundについての記事は5回に分けています。

【15-1】background関連のプロパティ(1/4)
backgroundのプロパティと値の一覧/background-color/background-image/background-repeat/background-attachment
【15-2】background関連のプロパティ(2/4 background-position)
background-position
【15-3】background関連のプロパティ(3/4 background-size) ←今ココ
background-size
【15-4】background関連のプロパティ(4/4 clip と origin)
background-clip/background-origin
【15-5】backgroundのショートハンド まとめ
たくさんあるbackgroundのプロパティを一括でまとめられます

background-sizeプロパティ

background-size背景画像のサイズを指定します。
CSS3からキーワード「contain」「cover」が追加され、画像を背景領域にピッタリ収める自動サイズ調整が使えるようになりました。

background-size の値
auto デフォルト値。画像の縦横比を保つようにサイズを自動計算します。
contain 画像の縦横比を保ったまま、背景領域に収まる最大サイズに調整。画像全体を表示
画像が no-repeatなら画像で覆われない領域は背景色が出る。
(containは含有って意味。画像を切らずに全部含むってこと)
cover 画像の縦横比を保ったまま、背景領域に収まる最小サイズに調整。領域の幅か高さの小さいほうに画像の幅か高さを合わせて全体を覆うので、画像がトリミングされます。
(coverはカバー。画像で領域全部をカバーするってこと)

↑これは background-position: center の場合
% 画像に対してのパーセンテージで指定
数値 px や em などの単位をつけて画像のサイズを指定
値の継承 なし 適用できる要素 全部

background-sizeの値は1〜2個

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

キーワード「contain」「cover」以外の値で、値が2つのときは「画像の幅」「高さ」の順になります。

このとき 値を1個にすると、省略された2つめの値(=高さ)は「auto」に勝手に決まります。

これちょっといつもと違うよね! 値が1つだと2つとも同じ値なのがいつものパターンだけど、これは2コ目はautoなのね。
「background-size: 100% auto」なんて書かなくても「background-size: 100%」でイイということですね。覚えておかなきゃ。(まあ「100% auto」でもエラーにゃならんけどねw)

キーワード「contain」「cover」は、値は1個だけ書きます。このキーワードには幅と高さを別々に指定する概念は無いんで。

例えば「background-size: contain 100%」なんて指定すると、ブラウザはこの background-size の指定そのものを無視して、デフォルトの background-size: auto になります。

画像を複数使った場合の background-size の指定は?

画像を複数使った場合の background-sizeの指定は、それぞれの画像のサイズをカンマで区切って指定することができます。
順序はbackground-imageで指定したのと同じで、上になっている画像から指定します。

p{
   background-image:url(images/05.jpg),url(images/bg04.gif);
   background-size:auto,cover;}

今回のサンプルも、前回と同様、以下の2つの背景画像を使っています。
下になっているのはグリッドの画像(bg04.gif 280×160px)。グリッドは20px。

上に乗っているのはこの画像(05.jpg 260×140px)です。

では、サンプルを順に確認してみましょう。

キーワードでの指定

キーワード「auto」「contain」「cover」を試してみます。
background-position は指定していないので、デフォルト値の「0 0」。背景領域と画像の左上の角がピッタリあった状態です。

キーワードでの指定のサンプルです。
サイズ指定が1つ分だと、複数画像全部に同じ指定が効きます。

デフォルト(auto)

contain

cover

ここから↓2つの画像を別々にサイズ指定。「,」で区切っています。

auto,contain

contain,cover

<div id="smp1_1">
<p>デフォルト(auto)</p>
<p>contain</p>
<p>cover</p>
ここから↓2つの画像を別々にサイズ指定。「,」で区切っています。
<p>auto,contain</p>
<p>contain,cover</p>
</div>
div#smp1_1 {margin:0; padding:0;}
div#smp1_1 p {
	width:300px;
	height:200px;
	line-height:200px;
	text-align:center;
	font-weight:bold;
	color:white;
	margin:0 0 1em;
	background-color:#ddd;
	background-image:url(images/bg05.jpg),url(images/bg04.gif);
	background-repeat:no-repeat;}  /*画像の繰り返しは無しにしています*/
div#smp1_1 p:nth-child(1) {background-size:auto;}
div#smp1_1 p:nth-child(2) {background-size:contain;}
div#smp1_1 p:nth-child(3) {background-size:cover;}
div#smp1_1 p:nth-child(4) {background-size:auto,contain;}
div#smp1_1 p:nth-child(5) {background-size:contain,cover;}

縦横サイズとも auto だと原寸ですね。(いちばん最初の「デフォルト(auto)」)
background-sizeを書かなければ、デフォルト(auto)の、この原寸になってるってことですね。

cover は、レスポンシブレイアウトの背景画像に使うと、とても便利です。
以前の記事でサンプルを作っていますので、こちらもご覧ください。
(まだ紹介していない backgroundのショートハンドを使っていますが)
記事本編:【7-2】CSS3の新しい単位 vw, vh, vmin, vimax について
サンプル: vhを使ったレスポンシブレイアウト

ちなみに、サンプルで「p:nth-child(2)」というセレクタを使っていますが、これは「2番目のp要素」をセレクタにする という意味の擬似クラスです。
詳しくは【3】id とか classって何?(セレクタの「種類」を知っておこう)をご覧ください。

%での指定

背景領域の幅や高さに対するパーセンテージで、画像の幅や高さを決めます。

%の値は、半角スペース空きの2つの値で「幅、高さ」の順で別々に指定できます。
2つめの値(=高さ)を省略すればそれは勝手に auto になります。

%での指定のサンプルです。
background-position は指定していないので、デフォルト値の「0 0」。背景領域と画像の左上の角がピッタリあった状態です。
サイズ指定が1つ分だと、複数画像全部に同じ指定が効きます。

100%

auto 100%

70% 100%

ここから↓2つの画像を別々にサイズ指定。「,」で区切っています。

80%,200% 100%

auto 70%,100%

div#smp1_2 {margin:0; padding:0;}
div#smp1_2 p {
	width:300px;
	height:200px;
	line-height:200px;
	text-align:center;
	font-weight:bold;
	color:white;
	margin:0 0 1em;
	background-color:#ddd;
	background-image:url(images/bg05.jpg),url(images/bg04.gif);
	background-repeat:no-repeat;}  /*画像の繰り返しは無しにしています*/
div#smp1_2 p:nth-child(1) {background-size:100%;}
div#smp1_2 p:nth-child(2) {background-size:auto 100%;}
div#smp1_2 p:nth-child(3) {background-size:70% 100%;}
div#smp1_2 p:nth-child(4) {background-size:80%,200% 100%;}
div#smp1_2 p:nth-child(5) {background-size:auto 70%,100%;}

このサンプルは、背景領域も背景画像も横長のシルエットなので、background-size:100%(100% autoってことね)は contain と同じになり、background-size:auto 100%cover と同じになりますね。背景領域や画像の縦横比によって違ってきますけどね。

数値でpxやemなどの単位を付けて指定

pxやemなどの単位を付けた数値で、細かくサイズを指定することもできます。
数値でも、半角スペース空きの2つの値で、幅と高さを別々に指定できます。
2つめの値(=高さ)を省略すれば勝手に auto になります。

数値での指定のサンプルです。
このサンプルでは、下になる画像をこちら(24x24px)に変えて、この画像だけリピートさせています。
background-position は指定していないので、デフォルト値の「0 0」。背景領域と画像の左上の角がピッタリあった状態です。

サイズ指定が1つ分だと、複数画像全部に同じ指定が効きます。

5em

150px 100px

ここから↓2つの画像を別々にサイズ指定。

auto 10em,12px

auto 70%,1em 2em

300px,20px

div#smp1_3 {margin:0; padding:0;}
div#smp1_3 p {
	width:300px;
	height:200px;
	line-height:200px;
	text-align:center;
	font-weight:bold;
	color:white;
	margin:0 0 1em;
	background-color:#ddd;
	background-image:url(images/bg05.jpg),url(images/bg04.gif);
	background-repeat:no-repeat,repeat;} /*上の画像は繰り返し無し、下は繰り返し*/
div#smp1_3 p:nth-child(1) {background-size:5em;}
div#smp1_3 p:nth-child(2) {background-size:150px 100px;}
div#smp1_3 p:nth-child(3) {background-size:auto 10em,12px;}
div#smp1_3 p:nth-child(4) {background-size:auto 70%,1em 2em;}
div#smp1_3 p:nth-child(5) {background-size:300px,20px;}

このサンプルのように、複数の画像の元のサイズの差が大きい場合は、別々にサイズ指定するのは必須ですね。

グラデーションを background-size で小さくしてタイリングすると、このように水玉や縞模様のパターンを作ることができます。

作り方は、[18-5] 水玉、ボーダー、チェック柄を作ろう(background-size)をご覧ください。

次回予告

次回は background-clipbackground-origin について。
background-clipは、色や画像をどこまで塗る(貼る)かの範囲を決めるもの。
background-originは、画像をどこから始めるかの基点を決めるプロパティです。
要素に border や padding がある場合、それをどこまで背景範囲に含めるか、背景の基点をどこから始めるか、などを細かく指定できます。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.