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

Posted on

border-image プロパティは装飾の幅を広げてくれそう。使うにあたっていろいろ調べたので、サンプルなどを用意して整理しておくことにした。

まずは現在の草案(版)を読んで、関連プロパティや、設定できる値など、仕様の概要を簡単に整理したものを箇条書きにしてみる。

  • 要素の 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

気になったのは 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, Safari3.1, Chrome1.0 以降の環境で使えるらしい。これらのブラウザは、版の草案を仕様として実装しているようなので。現在の草案と主な違いを挙げてみた。

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

どんな風に書くのか、例を用意してみる。どの値を書くのかはプロパティ名で。実際に使う場合は Firefox の場合は -moz- と、Safari, Chrome の場合は -webkit- などといったベンダープレフィックスをプロパティの先頭に付ける。

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

値を設定した例。

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

しばらくは border-width の値だけ別にプロパティで設定してもよいと思う。

-o-border-image: url(border-image.png) 2 5 2 13 repeat stretch;
-moz-border-image: url(border-image.png) 2 5 2 13 repeat stretch;
-webkit-border-image: url(border-image.png) 2 5 2 13 repeat stretch;
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;
-o-border-image: url(border-image.png) 2 5 2 13 / 2px 5px 2px 13px repeat stretch;
-moz-border-image: url(border-image.png) 2 5 2 13 / 2px 5px 2px 13px repeat stretch;
-webkit-border-image: url(border-image.png) 2 5 2 13 / 2px 5px 2px 13px repeat stretch;
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 プロパティを使って文字を透かせたりしてみた。

使ってみて、シンプルに柔軟なデザインを実現できることを実感できた。IE はまだ対応していないけれど、スマートフォン用コンテンツだとわりと使えそう。