border-image を利用したボックスデザイン

iPhone Templete Set を作ったときに、Safari という限られた環境にだけ対応すればよいのだからということで、Webkit で使える CSS3 の新しいプロパティをいろいろ使ってみました。なかでも境界の装飾に画像を設定できる border-image プロパティは装飾の幅を広げてくれそう。使うにあたっていろいろ調べたので、サンプルなどを用意して整理しておきます。

まずは現在の草案 (2009年10月15日版)を読んで簡単に整理。

要素の border-style と background-image の代りに使う画像を設定する。画像は四辺それぞれには必要なくて、ひとつだけ用意すればよい (border-image-source)
画像の四辺それぞれから内側にスライスする位置を設定、画像は四つの辺、四つの角、中央の9つに分ける。中央は背景画像のように使われる (border-image-slice)
四つの辺の高さを設定する (border-image-width)
border-image の外辺までの領域を border image area と呼ぶ。特に設定のない場合はボーダー辺までで、それを基準に外へ広げることもできる (border-image-outset)
画像の繰り返し方法を設定できる (border-image-repeat)
ショートハンドプロパティは border-image

最初に読んだのは2008年9月10日版の草案だったので、いろいろ変っていました。まとめる前にもういちど見てよかった。

いくつか気になった点を挙げてみると、まず border-image-slice に設定する number 値は pixel 単位となるということ。他にもこうゆうプロパティってあったかなあ。

border-image-slice で設定したスライス位置までの画像を表示する幅を四辺それぞれ設定するのは border-width で設定した枠線の太さではなくて、border-image-width というプロパティで別に設定できるようになるんですね。この border-image-width には auto という値を設定できて、その場合は border-image-slice と同じ値に設定される。デザインにもよるだろうけれど、結局同じ値を設定することもあると思うので便利そう。

それから border-image-width に関してはもうひとつあって、値に number 値を設定した場合、それは border-width の倍数を表わします。

実際に使ってみましょう

border-image は、When can I use... というサイトで調べてみたところ、Firefox3.5 (Gecko), Safari3.1, Chrome1.0 (Webkit) 以降の環境で使えるようです。

実装は2009年9月10日版の草案を仕様としているようです。現在の草案と主な違いを挙げてみます。

個別の border-image-* プロパティは使えないので、border-image ショートハンドプロパティで設定する
border-image-outset の設定はできない
border-image-width の設定はできないので border-width で設定する

どんな風に書くのか、例を用意してみました。どの値を書くのかはプロパティ名を使って表わしています。実際に使う場合は Gecko (Firefox) の場合は -moz- と、Webkit (Safari, Chrome) の場合は -webkit- をプロパティの先頭に付けます。

-moz-border-image: border-image-source border-image-slice / border-width border-image-repeat;

値を設定した例です。

-moz-border-image: url(border-image.png) 2 5 2 13; / 2px 5px 2px 13px repeat stretch；

border-width の値だけ別にプロパティで設定してもよいと思います。

-moz-border-image: url(border-image.png) 2 5 2 13 repeat stretch;
border-width: 2px 5px 2px 13px;

さみしい表示になってしまうけれど、border-image の使えない環境では枠線だけの装飾にしておくこともできます。border を border-image より前に書いているのは、後に書くと border-image をサポートしているブラウザで、border-width の値を上書きしてしまうからです。非サポートブラウザでは太さ3pxの黒い枠線で装飾されます。

border: 3px solid black;
-moz-border-image: url(border-image.png) 2 5 2 13 / 2px 5px 2px 13px repeat stretch;

簡単なサンプルを作ってみました。Firefox, Safari, Chrome の最新版で確認しています。

iPhone の UI にある戻るボタン

iPhone Template Set を作成した時に使った、ひとつ前のページに戻るボタンの装飾です。ボタンのコンテンツの長さはテンプレートを作成する時に予測できないので、border-image を使う方法はとても役立ちました。ボタンの画像を作成するときにガイドを使ってスライスする位置をイメージしました。