border-image を利用したボックスデザイン
- Entry Date
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 を使う方法はとても役立ちました。ボタンの画像を作成するときにガイドを使ってスライスする位置をイメージしました。
実際の動作やソースはデモページで確認できます。用意した画像なども含め、自由に使っていただいてかまいません。
セロハンテープに文字
テキストの長さなどで幅の変るボックスのデザインにもいろいろとバリエーションを増やせそうです。Pixelmator で描いたセロハンテープの画像を border-image-source として使って、見出しを装飾する例も作ってみました。
さらに transform プロパティも合わせて使って傾けたり、opacity プロパティを使って文字を透かせたりしてみました。
位置の設定は position プロパティを使いました。
使ってみて、シンプルに柔軟なデザインを実現できることを実感しました。まだサポートしているブラウザは少ないですが iPhone 用のページなどでは積極的に使ってみようと思います。