血統の森: Home > web実験小屋 > CSS3ウェブブラウザ実装メモ > CSS3 ボーダーと背景、ボックス

xreaの広告です。

hosting by xrea.com


CSS3 ボーダーと背景、ボックス

邦訳の作成日:2010-04-06

邦訳の更新日:2011-10-27

はじめに

この記事では、W3CのCSS3 Backgrounds and Borders仕様における新しいプロパティを使用したいくつかの例を紹介します。これらの見栄え例を閲覧するためにOpera 11かそれ以降の使用を推奨します。

対応状況

○=対応、△=接頭辞付きで対応、▲=バグあり、×=非対応。Opera11はすべて対応。

プロパティIE 9Fx 7Safari 5.1Webkit-SVN
background-clip
background-origin
Multiple background images
background-attachment×
background短縮記法(※1)----
box-shadow
box-decoration-break(※1)----
border-radius
-o-border-image×

background-clip

私たちが紹介する最初のCSS3プロパティはbackground-clipです。このプロパティは背景の画像を境界線にまで拡げるかどうかを決定するために使われます。

デフォルトでborder-boxpadding-boxの2つのオプションがあります。border-boxを使用した場合、背景画像は境界線まで拡がるので、図1のように境界線の手前に現れます。もう一つのオプションであるpadding-boxは背景画像を境界線まで伸ばさないことを意味します。画像は図2のように単にpaddingの境界まで現れます。

background-clip: border-box;

図1: background-clip: border-box;

background-clip: padding-box;

図2: background-clip: padding-box;

基本的に、padding-boxは背景画像を境界線にとどめる一方で、padding-boxは背景画像をpaddingボックスにとどめます。もしブラウザがこのCSS3プロパティをサポートしないならば、どのようにブラウザで見えるかbackground-clipbackground-originのスクリーンショットで見ることができます。

background-origin

background-originプロパティはどのようにあるボックスにおける背景のbackground-positionをどのように算出するかを決定するために使われます。

背景画像を置くときに、background-originは開始点を指示できるようにします。デフォルトのpadding-boxは背景画像をpaddingの外側の境界(境界線の内側の縁)に対して置きます。一方で、border-boxは背景画像を境界線の外側の縁に対して置きます。当然のことながら、値content-boxもあります。これは、背景画像を内容の外側の境界(paddingの内側の境界)に対して置きます。

たとえば、10px左上から置かれる背景画像は、次のようにbackground-originの異なる値を使うことによって置くことができるでしょう。

background-origin: border-box;

図3: background-origin: border-box;

background-origin: padding-box;

図4: background-origin: padding-box;

background-clip: padding-box; background-origin: border-box;

図5: background-clip: padding-box; background-origin: border-box;

background-clip: padding-box; background-origin: padding-box;

図6: background-clip: padding-box; background-origin: padding-box;

もしブラウザがこのプロパティをまだサポートしていないならば、background-clipbackground-originのスクリーンショットで確認することができます。

Daniel DavisによるCSS3background-clipbackground-originもうひとつの例と説明があります。

background-clipと同様に、古いGeckoはまだbackground-origin自体をサポートしていません。-moz-background-origin-webkit-background-originと記述する必要があります。Geckoはまた古いプロパティ値-box接尾辞なしのものを用います。Geckoはpadding-boxの代わりにpaddingを用いるのです。

Multiple background images

CSS3は1つの要素に多重の背景を可能にします。これはmultiple background imagesで定義されます。background-imageもしくは短縮backgroundプロパティを使用することでその効果を実現することができます。

例1

最初の例では、3つの背景画像をまとめてbackgroundプロパティを用いて1つにする方法を説明します。

dried rose + rose + field and sky scenery

図7:3つの個々の背景画像

お互いの重なりは、背景画像の順番によって定義されます。W3C仕様がいうように

The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on. The background color, if present, is painted below all of the other layers. Note that the border-image properties can also define a background image, which, if present, is painted on top of the background created by the background properties.

複合背景画像の例。結果は図8のようになります。

図8:複合背景画像を使用した連結した背景画像のスクリーンショット

background:
  url(rose.png) no-repeat 150px -20px,
  url(driedrose.png) no-repeat,
  url(fieldsky.jpg) no-repeat;

例2

もう一つの方法として、複合画像と一緒に背景を作るためにbackground-imageプロパティを使うことができます。

この2つ目の例では、background-imageのみを用いるスライドドア技術でどのようにして作るかをお見せします。今回は外部のネストされたブロック要素を必要としません。background-repeatbackground-positionとを一緒に、Patrick Lauke作成した複合背景画像によって作られたスライドドアボタンをお見せします。

図9: 複合背景画像を用いたスライドドア技術のスクリーンショット

background-image: url(left.png), url(right.png), url(main.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left top, right top, left top;

background-attachment

background-attachmentは背景画像がページの残りとともに固定かスクロールかを決定します。どのように背景画像が表示域に加えられるかによって定義するときに起こります。背景画像は表示域にfixedで固定するか、その要素に沿ってscrollでスクロールする、もしくlocalによってそのコンテンツとともに表示することができます。

Vadim Makeevによるbackground-attachmentのデモを参照ください。表示域をスクロールさせたとき、およびフルスクリーンのときにfixedscrolllocalがどのような影響を与えるかをデモンストレートしたものです。

図10:background-attachmentの例のスクリーンショット

background-attachmentのためのlocal値はW3Cの CSS3 border and background 仕様における新しいものです。この記事が書かれた時には、Firefoxの公式リリースではまだサポートされていません。

更新されたbackground短縮記法

Opera 11をはじめとして、background短縮記法で新しいCSS3 backgroundプロパティを記述することができます。これはbackground-sizebackground-clipbackground-originを含みます。

新しいbackground 短縮記法を使う際に注意すべきことがいくつかあります。 1つのbox valueに対して、background-clipbackground-originの両方を設定するよう記述される場合です。2つを設定する場合は最初にoriginを記述し、次にclipを記述します。background-positionbackground-sizeの両方が 長さと百分率の値を受け入れるときに、最初のbackground-size値の前方にスラッシュ(/)が必要です。 最後に、 multiple background imageが設定される場合、最後の画像のみbackground-colorが設定されます。

次のデモではCSSボックスモデルを説明するための3つの画像をbackground短縮記法を用います。たとえそれらの値がデフォルトと同じでも、どのようにしてそれらが定義しうるのかを表示するためにすべての値が指定されています。borderボックス、paddingボックス、contentボックスそれぞれを画像に置くために、各画像は異なるbackground-originを持っています。

図11: さまざまなCSS3プロパティを含む、background短縮記法を使って作成されたボックスモデル例のスクリーンショット

background短縮記法のデモを参照してください。

background短縮記法は次のように使われます:

background: url("content.svgz") no-repeat left top / 200px 70px scroll content-box content-box,
	    url("padding.svgz") no-repeat left top / 240px 110px scroll padding-box padding-box,
	    url("border.svgz") no-repeat left top / 280px 150px scroll border-box border-box white;

box-shadow

ボックスシャドウは要素に影の効果をもたらすことを可能にします。このプロパティはいくつかの値を必要とします。

加えて、color(影の色)、spread(拡がり)、offset(補正値)を与えることができます。いくつかのサンプルを見てみましょう。

box-shadow: 10px 10px 20px #000;
box-shadow: 10px 10px 1px #000;
/* ぼやけ度合いをちょうど1にセット */
box-shadow: 10px 10px 20px #FE2E2E;
border-radius: 20px;
/* ピンクとborder-radiusを施したもの */
box-shadow: 20px 20px 10px 10px;
/* 拡がりを10ピクセルにして影を大きくしたもの */
box-shadow: -10px -10px 20px inset;
/* はめ込み値を作成して、内側に影を施したもの */

正確なbox-shadowの記述について確かめたい場合は、CSS3 box-shadow screenshotsと例 を参照してください。

もしあなたが紅茶にアクセントをつけることが好みならば、box-shadowtransforms, transitionsRGBa、query selector、:lang()を加えるでしょう。Vadim MakeevによるCSS3box-shadow効果のストリーミングがあります。

図11:box-shadowと他のCSS3効果を使ったティーカップ(スクリーンショット)

box-decoration-break

CSSでコンテンツを配置するとき、ボックスは複数の方法で2つ以上の素片に分割されることがあります。印刷物のようなページ番号のあるメディアでは、ある要素がもう1つのページにフローするときにはページボックスに、Multi-column layoutを使用時において1つのカラムから次のカラムにフローするとき、インライン要素でのインラインボックスが1つの線から次の線へフローするときに線ボックスに、それぞれ分割されます。

box-decoration-breakプロパティはそれらのボックスがどのように振る舞うのかを定義することを可能にします。slice値はデフォルト値で、あなたがプロパティを特定しないかサポートされないかのように振る舞います。 border-radiusbox-shadowborderpaddingなどのプロパティはボックスが分割する場所では適用されません。ボックスの端は直線でしょう。特別な装飾がなかったかのようにボックスを素片にきれいに切り、そして次の線かページまたはカラムとなるポジションに素片を置きます。図13のbox-decoration-break: slice適用した、インラインブロックの視覚デモンストレーションを参照してください。

図 13: box-decoration-break: sliceをインライン要素に適用したスクリーンショット。これはデフォルトの振る舞いです。

clone値はpaddingborderborder-radius-o-border-imagebox-shadowのそれぞれの箱に独立して適用します。これはボックスが線の最初と最後のような分割される場所で、borderborder-radiusなどが描かれることを意味します。その結果、各ボックスがボックスそのもの要素であるかのように見えます。もし背景画像が適用されno-repeatに設定されるなら、それぞれの箱のために一度描かれるでしょう。図14でのbox-decoration-break: cloneが適用されたインラインブロックの視覚デモンストレーションを参照してください。

図 14: インライン要素にbox-decoration-break: cloneを適用したスクリーンショット。線の最初と最後でどのようにborder-radiusbox-shadowが適用されたか注意してください。

box-decoration-break デモの動作を見るためにOpera 10.60以上でチェックしてください。

border-radius

待望のborder-radiusがやってきました!以下の要領で要素において丸い角を作ることができます。

border-radiusは省略表現です:

いくつかの例にあたってみましょう。

4つの丸い角
border-radius: 25px;
2つの丸い角
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
半径40ピクセルの下側の角と、半径10ピクセルの上側の角による、4つの丸い角
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
半径120ピクセルの1つの角
border-bottom-right-radius: 120px;
半径20ピクセルの2つの角と、半径120ピクセルの2つの角による、4つの丸い角
border-radius: 120px 20px;
x軸沿って120ピクセルの半径とy軸沿って20ピクセルの半径の丸い角
border-radius: 120px / 20px;
背景画像と丸い角
background: url(japanese_tile.jpg);
border-radius: 30px;

ブラウザがborder-radiusを正確にサポートするかどうかチェックするために、元のborder-radiusの例border-radiusのスクリーンショットを比較することができます。Patrick LaukeとVadim Makeevによるborder-radius生成器border-radiusコードを生成する手助けとなるでしょう。

-o-border-image

-oborder-imageプロパティを使うことで、要素の境界線の機能を果たす画像を用いることができます。画像はstretchrepeatroundを指定することができます。

Border Image
-o-border-image: url(molecule.png) 50 repeat;
Border Image
-o-border-image: url(molecule.png) 50 stretch;

stretchrepeat値はほぼ読んで字の通りです。round値は画像を繰り返します。しかし、画像の各部自身のみを表示することなしに、要素の幅に合うよう画像を圧縮するのです。どのように効果が働くのかの考え方を得るために、Vadim MakeevのCSS3 border-imageのアニメーション・ショーケースを参照して下さい。 スクリーンショットを以下に示します。

図15:-o-border-image: stretchのスクリーンショット

図16:-o-border-image: repeatのスクリーンショット

Opera 11.50はborder-image-o-接頭辞を必要とします。CSS3 Backgrounds and Bordersモジュールはかなり安定している一方で、border-image仕様はOperaが実装してから(いくつかの個々のborder-imageプロパティの短縮記法になったものを含みます)大幅に変更されています。そういうものとして、実装が新しいスペックと一致するまで、Operaはベンダー接頭辞を導入しました。文章作成時に接頭辞がなくてはサポートされません。 WebKitとGeckoもまた現在接頭辞を必要とします。

おわりに

私たちはこれらの新しいCSS3の実装を、この文章を読んでトライすることで皆さんが楽しむことを希望します。実装をOpera 11(とそれ以降)や標準を意識したウェブブラウザで実行してください。

Credit goes to Daniel Davis and Patrick Lauke for their wonderful demos and David Storey for his suggestions and ideas, and updating this article for the new features found in Opera 11.


著作権表示

原文の著作権表示
Copyright © 2011 Opera Software ASA. All rights reserved.
Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported license.
邦訳の著作権表示
Copyright © 2010,2011 血統の森. All rights reserved.
表示-非営利-継承 3.0 Unported

仕様書とリファレンス

CSS Backgrounds and Borders Module Level 3 (2011-02-15 CR)
http://www.w3.org/TR/2011/CR-css3-background-20110215/