ほんっとにはじめての HTML5 と CSS3

これまで見てきた たくさんの background関連のプロパティを、一括でまとめるショートハンドプロパティ が background です。
今回は backgroundプロパティの値の書き方のルールをまとめます。

1. backgroundのショートハンドは値が1個でもOK
2. size は position と必ずセット。originはclipの前
3. 背景画像が複数なら 1画像ずつ「,」で区切って指定する
4. グラデーションと画像を一緒に使う
   1. グラデーションだって position や size の指定はできます
5. ショートハンドで書かなきゃいけないわけじゃない

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のショートハンドは値が1個でもOK

backgroundのショートハンドは値が1個だけでもOK。
指定されなかった値はすべてデフォルト値になります。
逆に言うと、デフォルト値以外にしたいのだけ書けばイイってことですね。

例えば、この↓指定なら。

body { background: url(images/bg.jpg) }

省略した値が全部デフォルト値で十分なら、この↑書き方でOK。
これはこの↓たくさんの指定のショートハンドということになります。

body {
      /*↓これしか指定していない*/
    background-image: url(images/bg.jpg);
      /*↓以下は全部デフォルト*/
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0 0;
    background-size: auto;
    background-clip: border-box;
    background-origin: padding-box;
    background-color: transparent}

ここで backgroundの全プロパティと値の一覧でデフォルト値を確認しておきましょう。

プロパティ	概要	値
background-color	背景の色	CSSの色指定（カラーネーム、RGB(16進数,10進数)、HSL）、 キーワード transparent(透明)、currentColor(文字色) デフォルトはtransparent
background-image	背景画像	url("画像のURL") で指定。デフォルトはnone
background-repeat	画像の繰り返しかた	repeat-x, repeat-y, repeat, no-repeat, space, round デフォルトはrepeat
background-attachment	スクロール時の背景画像の挙動	fixed, scroll, local　デフォルトはscroll
background-position	画像表示位置	数値（pxやemなどの単位を付けて）、%、 キーワード top, right, bottom, left, center デフォルトは 0 0
background-size	画像表示サイズ	数値（pxやemなどの単位を付けて）、%、 キーワード auto, contain, cover デフォルトはauto
background-clip	背景の範囲	キーワード border-box, padding-box, content-box デフォルトはborder-box
background-origin	画像配置の基準位置	キーワード border-box, padding-box, content-box デフォルトはpadding-box
background	ショートハンド プロパティ	値を半角スペースで区切ってまとめる。 sizeはpositionとセットで「position/size」という順番でスラッシュで区切って。originはclipの前。それ以外は順不同

size は position と必ずセット。originはclipの前

では、全プロパティを指定した場合のショートハンドの書き方です。

基本的に、今までやってきたショートハンドと同じく値を「半角スペース」で区切って書きます。 W3Cの構文は このようになっています。

<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>

|| は、値が1つは必要だけど省略可能で、書く順序は問わないって意味。
[ ] は、ひとまとまりという意味。ここでは sizeの前に「/」をつけて positionの後につけろと。
? は、省略可能で0回または1回出現するという意味。/size は無くてもイイってことです。
（CSSの構文記号について詳しくはこちら：値の定義構文 - CSS | MDN）

ということで、
size は position とセットで「/（スラッシュ）」を挟んで「position/size」と書く。だたし「/size」は無くてもOK。
sizeと position だけは、他のプロパティと違って「複数の値を半角スペース区切りで」指定できるので、このルールが無いとブラウザが理解不能になるから。

そして、size以外の値は順不同で、全部省略可能だけど1つは書いてね。という構文ですね。

もうひとつ、注意点。W3Cの構文の下部にこの注意書きがあります。

If one <box> value is present then it sets both ‘background-origin’ and ‘background-clip’ to that value. If two values are present, then the first sets ‘background-origin’ and the second ‘background-clip’.
（boxの値が1コだったら「background-origin」「background-clip」の値が同じ。boxの値が2コだったら、最初のが「background-origin」後のが「background-clip」）

origin と clip は、同じ3つのキーワード（border-box, padding-box, content-box）なので、こういうルールを作っとかないと、ブラウザがどっちがどっちか理解できないからですね。
ということで、originとclipを違う値にしたいなら、originが先、clipを後に書けと。

backgroundショートハンドの書き方まとめです。
●sizeはpositionとセットで position/size
　（/sizeは無くてもOK。size単独不可）
●originとclipが別々の値のときの書き順は origin clip（1コなら同じ値）
●それ以外は順不同。
●値は省略可能。1コは必要（省略されたらデフォルト値）

サンプルで確認しよう。
使用している画像はこちら（01.png）→
サンプルには上だけ白い半透明のボーダーをつけています（background-originの確認のため）

上のサンプルの HTMLです。

<div id="smp1">サンプル</div>

サンプルのCSSです（attachmentとclipはデフォルト値ですが省略せずに書きました）

div#smp1 {
	margin:0;
	padding:2em;
	height:4em;
	border-top: solid 25px rgba(255,255,255,.5);
	background:url(images/01.png) repeat-x scroll -20px 5px/40px 40px border-box border-box #ffd9d9;}

上のショートハンドの内訳は↓こうなってます。

	background-image:url(images/01.png);
	background-repeat:repeat-x;
	background-attachment:scroll; /*デフォルト*/
	background-position:-20px 5px; /*左を-20px、上を5pxずらしたところから開始*/
	background-size:40px 40px; /*原寸58×58pxですが、40×40pxに縮小してます*/
	background-origin:border-box; /*ボーダーの背景になるようにしています*/
	background-clip:border-box; /*デフォルト*/
	background-color:#ffd9d9;

背景画像が複数なら 1画像ずつ「,」で区切って指定する

background はレイヤー構造になるんでしたね。
画像を複数使えば、上から順に画像がレイヤー状になり、background-color だけは一番下のレイヤーになる。グラデーションも画像と同じようにレイヤーになるんでしたね。

W3Cの構文はこのように、ショートハンドでレイヤーの書き方を定義しています。

[ <bg-layer> , ]* <final-bg-layer>
Note that a color is permitted in <final-bg-layer>, but not in <bg-layer>.
（色は最後のレイヤーだけに。他のレイヤーには入らない）

* は、0回以上の出現と言う意味。[ ]は ひとまとまりという意味。
（CSSの構文記号について詳しくはこちら：値の定義構文 - CSS | MDN）
ということで、ショートハンドの指定は、レイヤーごとに「,（カンマ）」で区切って書き、最後のレイヤーだけ background-color を指定するってことですね。

サンプルで確認しよう。画像を3つ使っています。
左から、いちばん上（02.png）、真ん中（01.png）、いちばん下（03.gif）の画像です。

上のサンプルの HTMLです。（さっきとまったく同じ構成ですが）

<div id="smp2">サンプル</div>

CSSです。

div#smp2 {
	margin:0;
	padding:2em;
	height:4em;
	border-top: solid 25px rgba(255,255,255,.5);
	background:
	url(images/02.png) no-repeat right -5px top 5px/auto padding-box border-box,
	url(images/01.png) repeat-x -20px 5px/40px 40px border-box,
	url(images/03.gif) 0 0/15px border-box #ffd9d9}

上のショートハンドの内訳は、以下のものです。

	background-image:url(images/02.png),url(images/01.png),url(images/03.gif);
	background-repeat:no-repeat,repeat-x,repeat;
	background-attachment:scroll; /*3つともデフォルト*/
	background-position:right -5px top 5px,-20px 5px,0 0;
	background-size:auto,40px 40px,15px;
	background-origin:padding-box,border-box,border-box;
	background-clip:border-box; /*3つともデフォルト*/
	background-color:#ffd9d9

1番上（黄色い花）の画像の指定について。

図のように、background-origin: padding-box にしているので、position の基点が padding の範囲からになってます。

グラデーションと画像を一緒に使う

グラデーションは画像と同じように background-image で指定するんでしたね。
ですのでショートハンドでも、画像のURLの替わりにグラデーションの指定をするだけで、レイヤーを「 , 」で区切って指定するのはまったく同じ。

サンプルです。透明色のグラデーションを使えば、いろいろアイディアが広がりますね。

上のサンプルの HTMLです。（今回のHTMLはみんな同じ構成だけどね）

<div id="smp3">Forest tour</div>

CSSです。

div#smp3 {
	margin:0;
	padding:3em 0;
	color:#fff;
	text-align:center;
	font-size:300%;
	font-weight:bold;
	background:
	url(images/bg2.png) no-repeat center/contain,
	linear-gradient(to top, rgba(0, 80, 255, 0.5), rgba(0, 80, 255, 0)),
	url(images/bg1.jpg) no-repeat center/cover #fff}

1番上のレイヤーは、この↓ブラシの画像（9行目）。もともと透明度60％で作ったPNGです。

2番目のレイヤーに、ブルーの透明度50％から0％のグラデーションを下から上へ（10行目）。
いちばん下のレイヤーは森の画像（11行目）。

画像そのものを加工しなくても、上にCSSでグラデーションをかけられるのは便利ですね。

上のショートハンドの内訳。デフォルト値はショートハンドに書いていません。

	background-image:url(images/bg2.png),linear-gradient(to top, rgba(0, 80, 255, 0.5), rgba(0, 80, 255, 0)),url(images/bg1.jpg);
	background-repeat:no-repeat,repeat,no-repeat; /*真ん中のグラデだけデフォルト*/
	background-attachment:scroll; /*3つともデフォルト*/
	background-position:center,0 0,center; /*真ん中のグラデだけデフォルト*/
	background-size:contain,auto,cover; /*真ん中のグラデだけデフォルト*/
	background-origin:padding-box; /*3つともデフォルト*/
	background-clip:border-box; /*3つともデフォルト*/
	background-color:#fff

グラデーションの指定に関しては、こちらをご覧ください。
[13-3] サイト背景にCSS3で線形グラデーションをつけよう
[18-4] CSS3で、円形（放射）グラデーションを作ろう (radial-gradient)

グラデーションだって position や size の指定はできます

先ほどのサンプルのグラデーション部分に position は bottom、size は 30% 30% と指定してみます。

サンプルのCSSです。

div#smp3_2 {
	（略）
	background:
	url(images/bg2.png) no-repeat center/contain,
	linear-gradient(to top, rgba(0, 80, 255, 0.5), rgba(0, 80, 255, 0)) bottom/30% 30%,
	url(images/bg1.jpg) no-repeat center/cover #fff}

上下の30％は効いてて左右は100％のままに見えますが、これは background-repeat がデフォルトの repeat のままだから。

background-repeat を no-repeat にすれば、background-size が指定どおりになっているのがわかります。
background-position も 「bottom（値が1つなので bottom center）」になってますね。
（値が1個だけなら、省略された2つめの値は「center」になるんでしたね。覚えてる？）

サンプルのCSSです。

div#smp3_3 {
	（略）
	background:
	url(images/bg2.png) no-repeat center/contain,
	linear-gradient(to top, rgba(0, 80, 255, 0.5), rgba(0, 80, 255, 0)) no-repeat bottom/30% 30%,
	url(images/bg1.jpg) no-repeat center/cover #fff}

サイズを 100% 30% にしてみました。落ち着く〜。

サンプルのCSSです。

div#smp3_4 {
	（略）
	background:
	url(images/bg2.png) no-repeat center/contain,
	linear-gradient(to top, rgba(0, 80, 255, 0.5), rgba(0, 80, 255, 0)) no-repeat bottom/100% 30%,
	url(images/bg1.jpg) no-repeat center/cover #fff}

このように単に全面にグラデーションさせてから、他プロパティでサイズや位置などを変えるほうが、グラデーションの構文の中であれこれ指定するよりも扱いやすいですね。

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

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

ショートハンドで書かなきゃいけないわけじゃない

5回にわたって見てきた background関連のプロパティは今回で終わりです。
ややこしい！っすね背景。いっぱい覚えるルールがあって。

backgroundのショートハンドですが、無理にショートハンドにまとめて自分が分かりにくくなるよりは、ショートハンドと各プロパティの組み合わせで書いてもOKだと思います。文書的にはスッキリしなくても、効率がいいですから。
しかも、今回紹介した backgroundのショートハンドは CSS3からの新しい仕様ですので、古いブラウザで効かないモノもあるので要注意です。
例えば Safari5.1（レアだけど。笑）は、ショートハンドをヤメてバラして書いてあげるだけで反応します。

例えば、こう↓書いてもエラーじゃないし、この書き方じゃないと反応しないオールドブラウザもあります。（CSS2でのショートハンドと各プロパティの組み合わせ）

div {
  background: url(images/bg.jpg) no-repeat #000; /*CSS2でのショートハンド*/
  background-size: cover; /*以降、ショートハンドの後にバラして書く*/
  background-position: center -50px}

「-size」や「-position」をバラして書くときは、ショートハンドの後に書くこと。ショートハンドより前に書くと、モダンブラウザでは後から書いたショートハンドで上書きされるからデフォ値になるので要注意ですよ。

ちなみに、上のソースはショートハンドだとこんなかんじ

div {
  background: url(images/bg.jpg) no-repeat #000 center -50px/cover}

次回予告

さて次回は、ボックスモデルのプロパティの中でも、けっこう基本で大事な「幅」や「高さ」を指定する widthプロパティと heightプロパティについて。
また、幅や高さの「最小値」を指定できる min-widthプロパティ、min-heightプロパティ。「最大値」の max-widthプロパティ、max-heightプロパティ も使ってみます。

関連記事

• 【17-3-1】display:table でテーブルじゃない要素をテーブルっぽく
• 【17-2-2】リスト関連の要素のためのCSSプロパティ
• 【17-2-1】display:list-itemでリスト関連じゃない要素をリストっぽく
• 【17-1】displayプロパティでボックスの表示形式を自由に変えよう
• （ちょっとメモ）スマホで background-attachment: fixedが効かない場合の対処法
• 【16-2】下限の min-width, min-height 上限の max-width, max-height
• 【16-1】幅の width、高さの heightプロパティ
• 【15-5】backgroundのショートハンド まとめ
• 【15-4】background関連のプロパティ（4/4　clip と origin）
• 【15-3】background関連のプロパティ（3/4　background-size）
• 【15-2】background関連のプロパティ（2/4　background-position）
• 【15-1】background関連のプロパティ（1/4）
• 【14】borderとよく似た outlineはレイアウトを崩さない
• 【13-2】border-imageと border-imageのショートハンド
• 【13-1】borderと borderのショートハンド