11:16パーマリンクCSSであれこれやっていたら、まず間違いなく使うであろう背景関連のプロパティ。CSS3ではこれまでより多くの指定ができるようになります。それらの新しいプロパティや値はいったいどういうものなのか、調べてみました。参考にしたのは以下の2つです。32011年2月15日版の仕様の日本語訳です。プロパティと値の説明はこちらを参考にしました。背景は複数のレイヤーを持つことができ、レイヤーの数はbackground-imageに指定されたカンマ区切りの値の数によって決められます。noneの指定も一つのレイヤーを生成します。背景レイヤーの重なり方ですが、初めに指定したものから手前に来ますので、注意してください。greenの4つの画像と背景色をCSSを指定してみます。1これは以下のように表示されます。border-imageにより指定された画像はこれらの背景画像より手前のレイヤーとなります。複数指定の場合、他の背景プロパティで値が多すぎる場合、余剰分は使用されません。逆に指定が足りない場合、レイヤー数と同じになるまで、そのプロパティの値が繰り返して使用されます。先ほどのデモのボックスを大きくしてbackground-positionとbackground-repeatを追加してみました。2これは以下のように表示されます。centerが無視され、background-repeatで省略された4つ目の指定に最初の指定repeat-xが適用されています。background-colorご存知の通り、背景色を指定するプロパティです。先ほどのデモページでも分かるように、背景色は全ての背景画像の後ろに配置されます。デフォルトはtransparentです。背景色はbackground-clipの値によって範囲が変わります。複数背景の場合は、一番奥(最後の指定)によって範囲が変更されます。背景色は緑色の部分となります。DEMOこれは以下のように表示されます。background-image背景画像を指定するためのプロパティです。前述の通り、カンマ区切りにより複数の値を指定し、レイヤーを作ることができます。デフォルト値はnoneです。背景にCSSグラデーションを指定する際も、このbackground-imageプロパティに指定します。flagmentsによる画像切り抜き表示などといった、これから提供される予定の機能もいくつかあります。background-repeat背景画像の繰り返しを指定するプロパティです。(垂直方向);のように指定します。repeatと同等となります。各プロパティ値は以下のようになります。repeatbackground-clipで指定される背景描画領域全てを覆うように繰り返されます。繰り返す方向は前述のように指定できます。no-repeat繰り返し表示を行いません。spacebackground-originで指定される背景配置領域全てを覆うように繰り返されます。繰り返された画像が収まりきらない場合、repeatのように切り取られず、画像と画像の間には空白が入ります。最初と最後の画像は背景配置領域の端に接します。背景描画領域が背景配置領域よりも大きい場合は、背景画像は背景描画領域を覆うまで繰り返されます。background-positionは無視されますが、画像を2つ配置するスペースがない場合、画像は1つだけ配置され、background-positionがその方向を決定します。roundbackground-originで指定される背景配置領域全てを覆うように繰り返されます。繰り返された画像が整数倍で収まりきらない場合、整数倍で収まるように拡大縮小されて表示されます。背景描画領域が背景配置領域よりも大きい場合は、背景画像は背景描画領域を覆うまで繰り返されます。デフォルトはrepeatです。repeatとno-repeatについてはお馴染みでしょうが、spaceとroundが分かりづらいと思いますので、簡単なデモを作りました。その指定とデモページは以下。Operaでご覧ください。背景画像は30×30の赤い円の画像です。DEMOこれは以下のように表示されます。11.50でのものです。repeatの指定は円が隙間なく5個半ずつ、spaceは円がスペースを持って5個ずつ、roundは拡大された円が隙間なく5個ずつ並んでいるのが分かると思います。background-attachment背景画像がどのようにスクロールするかを指定するプロパティです。デフォルトのscrollと固定されるfixedはお馴染みだと思います。指定できる値は以下の3つです。fixed背景はビューポート(可視領域)に固定されます。ビューポートのないメディアにおいては、fixedが指定された背景はページボックスに固定され、全てのページに複製されます。media」を参照)scroll背景は要素に固定され、要素の中身がスクロールしたとしても一緒にスクロールすることはありません。local背景は要素の中身に固定されます。その要素にスクロール機能がある場合、要素の中身がスクロールすると背景も一緒にスクロールします。これはボーダーの背景(border-image)にも適用されます。デフォルトはscrollです。これは動かしてみないと何言ってんだかよく分からないので(自分はそうでした)、デモをお試しください。6以外のブラウザの最新版なら対応しているはずです。CSSは以下のようになっています。DEMOどういうことか分かります......よね?上手く言葉で説明できないので、納得するまで動かしてみたりしてください。Free.Stocker」よりお借りしました。ありがとうございます。background-position背景画像を配置する位置を指定するものです。位置は画像がbackground-sizeなどによって拡大縮小された後に適用されます。centerと数値で指定します。基本的には背景配置領域の左上からの位置を指定します。パーセント指定とそれ以外の単位での指定は意味が異なりますので注意してください。左から0%の距離、上から0%の距離に、画像の左から0%の距離、上から0%の位置が合うように配置されます。50%なら、背景配置領域の左から50%上から50%の位置に、画像の左端から50%上端から50%の位置が合うように配置されるということです。背景配置領域の上から画像の左上まで20pxの位置に配置されます。どこの端からの距離なのかを指定することもできます。20px;これは背景配置領域の下から10px右から20pxの位置に、画像の右下が合うように配置されます。デモページで違いをご確認ください。9+またはOperaで全て見ることができます。Firefoxは13からです。DEMOこれは以下のように表示されます。11.50でのものです。background-clip背景描画領域を指定するためのプロパティです。指定できる値は以下の3つ。border-boxボーダーの範囲まで。padding-boxボーダーの内側まで。content-boxコンテンツ、つまりパディングの内側まで。デフォルトはborder-boxです。以下のデモページをご覧ください。DEMO対応しているブラウザなら、次のように表示されます。background-origin背景配置領域を指定するためのプロパティです。指定できる値はbackground-clipと同じく以下の3つ。border-boxボーダーの範囲まで。padding-boxボーダーの内側まで。content-boxコンテンツ、つまりパディングの内側まで。デフォルトはpadding-boxです。以下のデモページをご覧ください。1対応しているブラウザなら、次のように表示されます。background-repeatがrepeatである場合はどうなるでしょうか。background-clipで指定される背景描画領域を覆うように繰り返されます。background-clipを指定していない場合は、background-originの値が何であれ、border-boxの範囲に画像が繰り返されます。background-repeatの値がspaceまたはroundである場合ではどうでしょうか。background-repeatのセクションに「背景描画領域が背景配置領域よりも大きい場合は、背景画像は背景描画領域を覆うまで繰り返されます」とあります。それならbackground-clipの値でspaceの画像の隙間やroundの拡大縮小度が決まるのかというとそうではありません。これは繰り返しで覆われる範囲にすぎません。先ほどのデモの背景画像を40×40の円の画像に変更し、background-repeatをspaceに変更してみました。2これは次のように表示されます。スクリーンショットはOperaです。確かに背景描画領域のデフォルトであるborder-boxの範囲で繰り返しが行われていますが、違いは明らかです。画像と画像の間にあるスペースはbackground-originで指定した背景配置領域によって決められています。次の疑問はbackground-originによる背景配置領域がbackground-clipによる背景描画領域より大きい場合はどうなるのか、ということです。content-boxを加えてみます。3Operaでは次のようになります。繰り返しの基準はbackground-originによって決定されていますが、背景描画領域がそれより狭いので、切り抜かれて表示されています。background-size背景画像の大きさを変更することができます。contain画像が背景配置領域内に収まる最大サイズになるように、アスペクト比を保ちながら拡大縮小します。cover画像が背景配置領域内を完全に覆う最小サイズになるように、アスペクト比を保ちながら拡大縮小します。高さ]pxやmmなどの長さを指定する単位の場合、その指定されたサイズに拡大縮小します。高さのように指定しますが、値を1つしか指定しなかった場合、省略された部分にはautoが適用されます。対してのパーセンテージが適用されます。auto幅と高さのどちらか一方にのみ指定されている場合、画像の内在寸法比を利用して算出されます。それができない場合は内在寸法が用いられ、それも駄目な場合は100%として扱われます。幅と高さの両方に指定されている場合、画像が内在寸法を持っているならば、それが利用されます。ない場合はcontainとして扱われます。デフォルトはautoです。デモページとその指定は以下をご覧ください。各ブラウザの最新版で確認できます。背景画像は200×400の赤い菱形です。20%;}ブラウザが対応しているのなら、下のように表示されます。backgroundショートハンドプロパティ背景周りを一括指定するためのプロパティです。次のように指定します。color省略された値は各プロパティのデフォルト値が使用されます。background-originとbackground-clipの箇所は指定が1つのみの場合、background-originとbackground-clipの両方の値になるので注意してください。背景が複数レイヤーからなっている場合は、カンマ区切りで指定します。この場合、background-colorの値は、最後のレイヤーにのみ指定することができます。#000;}最後に最後まで読んでくださってありがとうございます。この記事は自分が理解できるように書きましたが、説明は完全ではありませんし、解釈が誤っている可能性もあります。これらの仕様は変更されるかもしれません。この記事を読んで「もう十分理解した」と思うのではなく、ちゃんと仕様を読んでおくことをお勧めします。Requestを送るIssueを作成するTwitterでメンションする記事を共有TwitterFacebookPocketはてなブックマークLINEコンテンツホームブログこのサイトについて。