【15-5】backgroundのショートハンド まとめ

最終更新日:2017年09月23日  (初回投稿日:2016年02月04日)

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

本日のINDEX
  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。
sizeposition だけは、他のプロパティと違って「複数の値を半角スペース区切りで」指定できるので、このルールが無いとブラウザが理解不能になるから。

そして、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の確認のため)

サンプル
<div id="smp1">サンプル</div>
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)の画像です。

サンプル
<div id="smp2">サンプル</div>
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の替わりにグラデーションの指定をするだけで、レイヤーを「 , 」で区切って指定するのはまったく同じ。

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

Forest tour
<div id="smp3">Forest tour</div>
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% と指定してみます。

Forest tour
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」になるんでしたね。覚えてる?)

Forest tour
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% にしてみました。落ち着く〜。

Forest tour
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(レアだけど。笑)は、ショートハンドをヤメてバラして書いてあげるだけで反応します。

例えば、こう↓書いてもエラーじゃないし、この書き方じゃないと反応しないオールドブラウザもあります。

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プロパティ も使ってみます。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
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.