こんにちは、秋葉です。
プレゼン用のスライドを作っているときに気がつかなかったんですが、各ブラウザの対応度にちょっとした注意が必要だったのでお伝えします。
border-imageプロパティとは、文字通り、画像によってボーダー（枠線）を表示するためのものです。四角い画像の4隅の角のサイズだけ固定して、伸びるところは画像をストレッチさせたり、リピートさせたりすることが可能です。
中のテキストなどの量によって変わるボックスのサイズにもちゃんと対応してくれるんですね。今までは角丸ボックスのために、上と下と真ん中の3枚の画像を用意しないといけなかったのですが、これからは1枚の画像だけでいいんですね、便利です（こういった表現をするには、複数背景画像を指定するbackground-imageプロパティでも可能です）。
ただし、使い方に慣れていないと、頭の中でイメージした通りに表示してくれなかったり、ブラウザによって正しく動作しなかったりします。
プレゼン用のスライドを作っているときに気がつかなかったんですが、各ブラウザの対応度にちょっとした注意が必要だったのでお伝えします。
border-imageプロパティとは、文字通り、画像によってボーダー（枠線）を表示するためのものです。四角い画像の4隅の角のサイズだけ固定して、伸びるところは画像をストレッチさせたり、リピートさせたりすることが可能です。
中のテキストなどの量によって変わるボックスのサイズにもちゃんと対応してくれるんですね。今までは角丸ボックスのために、上と下と真ん中の3枚の画像を用意しないといけなかったのですが、これからは1枚の画像だけでいいんですね、便利です（こういった表現をするには、複数背景画像を指定するbackground-imageプロパティでも可能です）。
ただし、使い方に慣れていないと、頭の中でイメージした通りに表示してくれなかったり、ブラウザによって正しく動作しなかったりします。
まずは書き方のルールから。
border-image関連のプロパティは、個別のプロパティに分けて書く方法とショートハンドの方法があります。
【個別のプロパティとその記述例】
● border-image-source: url(demo.png);
（使用する画像を指定します）
● border-image-slice: 10 20 10 15;
（画像をスライスする領域の大きさを指定します。上記は上、右、下、左の順番）
● border-image-width: 10px 20px 10px 15px;
（画像の幅を指定できます。上記は上、右、下、左の順番）
● border-image-outset: 10px 15px;
（ボックス領域からはみ出させる距離を指定できます。上記は上下、左右の順番）
● border-image-repeat: stretch;
（伸縮するボーダー領域にある画像をストレッチするか繰り返すか、などが指定できます、上記はストレッチ）
【ショートハンドの記述例】
● border-image: url(demo.png) 60 60 60 60 / 60px 30px 10px 30px repeat;
（60の単位ナシがborder-image-sliceと同意で60px 30px 10px 30pxがborder-image-widthと同意、伸縮領域の画像は繰り返す）
【上記で注意するべき点】
●個別のプロパティには現在ほとんどのブラウザが対応していない
現時点では、最初に紹介しました「個別のプロパティとその記述例」はIE9、Firefox4、Safari、Chrome、Operaがサポートしていません。使うなら、2番目に紹介した「ショートハンドの記述例」を適用させることになります。
●各ショートハンドの情報は「/」で区切って書く
border-imageに関連するプロパティの中で、数値を持っている同じようなプロパティは、以下の順序で「/」区切りで書くのが原則です。
1. border-image-slice
2. border-image-width
3. border-image-outset
●各ブラウザがborder-image-outsetに対応していない
現時点ではほとんどのブラウザが3番目に記述するべきborder-image-outsetに対応していません。「ショートハンドの記述例」で、border-image-outsetの部分を省略しているのはそのためです。
なお、border-image-outsetによってはみ出した画像は、要素の領域外とみなされることになり、例えばクリック対象にはならないように策定されているようです。
●Operaにてborder-image-sliceは4箇所指定でないと動作しない
各ブラウザ用にベンダープレフィックスが必要です。ここでOperaだけborder-image-sliceの解釈が違うので、比較してみましょう。
【一般のブラウザの指定】
-webkit-border-image:url(img/bg.jpg) 45 40 / 45px 40px repeat;
-moz-border-image:url(img/bg.jpg) 45 40 / 45px 40px repeat;
【上記をOperaで指定する場合】
-o-border-image:url(img/bg.jpg) 45 40 45 40 / 45px 40px 45px 40px repeat;
ここでは、border-image-sliceとborder-image-widthの各指定が、「上下45px、左右40px」とサイズを指定していますが、この部分がOperaだけ違っています。「上、右、下、左」と4辺を個別に指定しないと全く動作せず、どうやら画像すら表示されないようです、注意しましょう。
●border-image-sliceに単位はつけない
もうお気づきでしょうが、border-image-sliceにpxなど単位はついていません。
これはビットマップ画像だけではなく、SVGフォーマットの画像にも対応させるためという理由があるからだそうです。
●border-image-repeatには値が4つ
・stretch（画像がストレッチして伸縮する）
・repeat（画像が繰り返される）
・round（画像が繰り返されるが、領域内でスライスサイズに割り切られず、余る場合、画像をストレッチしながら繰り返す）
・space（画像が繰り返されるが、領域内でスライスサイズに割り切られず、余る場合、画像同士の間隔を開けて調整して収める）
border-image関連は結構ハマるので、今回は絞って記事にしてみました。
それでは今日はこのへんで。
今週はほとんど仕事で東京にいます、また再来週！
【あきば・ひでき】
hidetaro7@gmail.com
< http://www.akibahideki.com/blog/
>
テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。
HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign...多種スキルを持つ。Web標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。