Lesson 03 border-imageを利用したネスト不要の画像フレーム - Webデザイン表現&技法の新・スタンダード・CSS3&HTML5編

Webデザイン 表現&技法の 新・スタンダード

Lesson 3

border-imageを利用した ネスト不要の画像フレーム

	制作・文			山田敬美
＞	To Use			CSS
＞	Browser			Firefox 3over | Safari 4over

四隅に画像を使うようなボックスを縦横可変にするには、何重にも入れ子にしたdivに分割した画像を1つずつ指定する必要があった。しかしborder-imageを使えば、これを1つのdivと画像でつくることができる。

border-imageの用途は幅広い。画像ボタンに使えば、テキストの長さに合わせてボタンを伸縮させることができる。また、縦横のサイズが一定でない画像に額縁をつけることも簡単にできるようになる。アイデア次第でおもしろい使い方ができる、 さまざまな可能性を秘めたプロパティだ。CSSでの指定をはじめる前に、borderに使う画像を9分割して計算しておこう。borderになる部分の上下左右の四辺のサイズ（px）が必要になる【1-1】。サンプルではすべて同じ値だが、4辺それぞれ違う値を指定することも可能だ。


【1-1】水色は固定となり、黄色が繰り返される（または引き伸ばされる）部分。グレーはボックスの背景になる

border-image には個別のプロパティ【2-1】が用意されているが、それらを個別に実装しているブラウザは2010年11月時点では存在しないため、border-imageショートハンドにまとめて指定する必要がある【2-2】【2-3】。MozillaとWebkit のブラウザ向けに、ベンダープレフィックスの指定が必要だ（Operaは不要）。


【2-1】


【2-2】div要素は一つだけでよい


【2-3】border-imageショートハンドにまとめて指定する

border-imageに使う画像のパス（borderimage-source）を指定し、先ほど計算した4辺のスライスサイズ（border-imageslice）を指定する。サンプルではすべて同じサイズのため記述を1つにまとめているが、4辺を上右下左の順で別々に指定でき る。数値のみを記述すればよく、pxの記述は不要（ブラウザがpxとして処理する）。なお、%でも指定可能だ【3-1】。


【3-1】pxをつけるとブラウザで正しく表示されなくなるので注意

次に、/で区切ってborderの太さ（borderimage-width）を指定する。指定しない場合は元の画像サイズとは関係なく、数px程度の細いborderになってしまう。autoと指定すればborder-image-sliceで指定した値と同じになる仕様だが、2010年11月時点では実装しているブラウザが存在しないため、pxで指定するのがよいだろう。なお、同じ指定をborder-widthで代替することも可能だ。Operaでは上下左右4つの指定をまとめて記述するとborderimageが表示されなくなるため、ベンダープレフィックスがつかないものには、4つの値をすべて記述するとよい【4-1】。


【4-1】Opera対策で一番上のborder-image-widthは省略せずに記述する。仕様書にはそのほかに、%や単位なしでの指定方法の記述があるが、ブラウザの実装が不完全のためまだ利用できない

最後はborderの繰り返し方法の指定だ（border-image-repeat）。値はstretch/repeat/round/spaceの4種類あるが、spaceはどのブラウザも実装していない。初期値は「strech」で、画像が引き伸ばされる。「repeat」は画像の繰り返しだが、ボックスのサイズがborder-image-sliceの倍数でないときに画像が切れてしまうため、サイズを固定できない場合は注意しよう。「round」はrepeatと同じく繰り返しだが、ボックスのサイズに関係なく、繰り返す画像が切れないように、ブラウザが自動でサイズ調整してくれる便利な指定方法だ。た だし、2010年11月時点ではwebkitが対応しておらず、「repeart」と同じ表示になってしまう【5-1】【5-2】【5-3】。


【5-1】上下の辺、左右の辺をそれぞれ個別に指定できる。1つにまとめて記述することもできる


【5-2】Firefoxでの表示。上下にroundを指定したため、黄色い丸が切れないように自動的にサイズ調整されている


【5-3】Safariでの表示。roundを指定しているが対応していないため、repeatと同じく画像が切れてしまう

画像が表示されない場合や、borderimage未対応のブラウザ（InternetExplorer など） を考慮して、borderimageを指定する場合は、同時にborderとbackground-colorも指定するとよい【6-1】。デザインは変わってしまうが、その部分が区別されたエリアであることは伝えることができる【6-2】【6-3】。対応ブラウザでは、borderの指定はborderimageの指定で上書きされるため影響は ない。なお、background-imageとは違い、border-imageは印刷時にもきちんと表示されるので特別に印刷対応をする必要はない。


【6-1】


【6-2】対応ブラウザでの表示。border-imageの指定が有効になっている


【6-3】未対応ブラウザでの表示。backgroundとborderの指定が有効