ほんっとにはじめての HTML5 と CSS3

CSS3から border-imageプロパティ が登場し、ボックスのボーダーに画像を表示できるようになりました。

border-image は、上下左右4つの辺 、4つの角 、真ん中の部分の 計9個 に画像を分割して、ボーダー領域（borderプロパティで作られたボーダーの範囲） に自動で当てはめてくれます。

参考資料：CSS Backgrounds and Borders Module Level 3

ボーダーに画像を表示させる

まずはサンプルを見てください。

使用している画像は↓コレ。

上のサンプルの HTMLはこちら。

<div id="sample0">
<p>こんなかんじで、要素のボーダーに画像を適用できます。</p>
<p id="fill">ボーダー用画像の真ん中の部分を、要素の背景として活かすこともできます。</p>
</div>

CSSはこちら。

div#sample0 p{
	margin:0.5em 0 3em;
	padding:1em;
	border:solid 20px;
	border-image-source:url("images/img03.jpg"); /*ボーダー用の画像を指定*/
	border-image-slice:20;  /*画像のスライスを指定*/
	border-image-width:1;  /*ボーダーの幅を指定*/
	border-image-outset:0;  /*ボーダー領域からの拡張を指定*/
	border-image-repeat:stretch;}  /*画像のリピートのしかたを指定*/
div#sample0	p#fill {
	border-image-slice:20 fill;}  /*スライスで fill を加えると画像の真ん中がイキ*/

border-image のプロパティ

border-image で使用するプロパティ一覧です。

では、プロパティを1つずつ、サンプルで確認していきましょう。
以下のサンプルでは、この画像を使っています。

border-image-source で画像を指定

まず border-image-source で画像を指定します。sourceはソースね。元になる画像。
border-image-source: url ("画像のURL") というカタチでURLを指定します。

border-style でボーダーが指定されていて、border-widthの値があれば、border-image-source だけでもとりあえず画像が表示されます（スライスの値がまだデフォルトのままなので、画像全体が4つの角に表示されるだけですが）。

border-width の指定が無くても、 border-image-width で幅を指定すれば表示されます。詳細は border-image-width で。

サンプル1
border-image-source: url("images/img01.jpg") のみ指定
（4つの角に画像が100%で表示されています）

CSSはこちら。

p#sample1 {
	padding:1em;
	border:solid 30px;
	border-image-source:url("images/img01.jpg"); /*ボーダー用の画像*/
    }

border-image-slice でスライスする

次に border-image-slice で指定した画像を9つにスライスします。

スライスのしかたは、上から、右から、下から、左からの距離で指定します。
この4つの距離を指定すれば、自然に4つのコーナー、4つの辺、真ん中 の９パーツに分けられます。

デフォルト値は「100%」。画像全体がコーナーに表示されます。スライスを切っていないので、辺の部分は表示されません。（これが先ほどのサンプル１の状態だったわけですね）

border-style でボーダーが指定されていて、border-widthの値があれば、先ほどの border-image-source と、この border-image-slice でボーダーイメージを表示できます。

スライスと ボーダーの幅は同じじゃなくてもOK。
例えばレティーナ対応で画像サイズを2〜3倍にしても、ボーダーの幅に縮小して収めてくれます。

値は 1つ〜４つで、「半角スペース」で区切って指定します。
（fill も使えば最高5つの値を書くことになるね。全部「半角スペース」区切り）

値が1つの場合、上下左右全部同じ値でスライスしたってこと。
4つの辺がビヨ〜ンと伸びていますが、これは border-image-repeat の値が まだデフォルトの stretch だからです。他の値に変更可能。詳しくは記事後半で。

サンプル
border:solid 30px;
border-image-slice: 30

値が2つで上下、左右の値。

サンプル
border-style:solid;
border-width: 30px 15px;
（border-width↑ も連動させて30px 15pxにします）
border-image-slice: 30 15

値が3つで上、左右、下の値。

サンプル
border-style:solid;
border-width: 30px 15px 20px;
border-image-slice: 30 15 20

値が4つなら上、右、下、左の値。

サンプル
border-style:solid;
border-width: 30px 10px 20px 15px;
border-image-slice: 30 10 20 15

fill も使うと値が最高5つになります。

サンプル
border-style:solid;
border-width: 30px 10px 20px 15px;
border-image-slice: 30 10 20 15 fill

上記までのサンプルで使用した画像は 30px角でスライスすれば最適なように作っていますので、スライスの切り方をいろいろ変えるとヘンな表示になっちゃいますね。
数値にマッチした画像ならイイかんじに表示されます。（画像に合わせて数値を指定する、って言い方のほうが合ってますね）

border-style: solid;
border-width: 30px 15px 17px;
border-image-slice: 30 15 17

このサンプルで使用している画像はコレです。

CSSはこちら。

p#sample1 {
	padding:1em;
	border-style:solid;  /*border-styleでボーダーを指定（無いと画像が表示されません）*/
	border-width:30px 15px 17px; /*ボーダーの太さを指定（コレが無いとデフォのmediumに）*/
	border-image-source:url("images/img06.jpg"); /*ボーダー用の画像を指定*/
    border-image-slice:30 15 17; /*ボーダー用画像のスライスを指定*/
    }

border-image-slice の fill が便利！

border-image-sliceで、画像の「4つのコーナー」「4つの辺」は適材適所に表示されて、残りの「中央部分」は使用されないのがデフォルト仕様です。

しかし、border-image-sliceの値の後に「半角スペース」で区切って fill を指定すると、画像の中央部分も要素の背景として表示することができます。これは使えますね。

border-style: solid;
border-width: 30px 15px 17px;
border-image-slice: 30 15 17 fill

CSSはこちら。

p#sample {
	padding:1em;
	border-style:solid;
    border-width:30px 15px 17px;
	border-image-source:url("images/img06.jpg");
    border-image-slice:30 15 17 fill; /*画像のスライスにfillを指定*/
    }

スライスがデフォルトの border-image-slice: 100% だった場合、ここに fill を追加しても中央部分は表示されません。スライスを切ってないから画像の中央部分が無いわけで。（辺も無い）

border: solid 30px;
border-image-slice: 100% fill

border-image-width で幅を変更できる

ここ↑までで、どうもborder-image の幅は、border-width と同じになるようです。

これは、border-image-width のデフォルト値が「1」だから。
「1」は「border-width の1倍（等倍）」という意味。やはり borderプロパティでの幅の指定と深く関わっているんですね。

ただ、border-image-width では、borderを指定せずに、pxやemや%で指定したり、border-image-sliceと同じ値にしたりもできます。
（できるけど、やはり borderプロパティで幅を指定したほうがイイわ。まあサンプルをみてください）

こちらも、先ほどのスライスと同じように、1〜4つの値で指定できます。
値が1つの場合、上下左右全部同じ値。
値が2つの場合、上下、左右の値ということ。
値が3つの場合、上、左右、下の値ということ。
値が4つの場合、上、右、下、左の値ということ。

p#sample {
	padding:1em;
	/*border-styleやborder-widthは指定していません*/
	border-image-source:url("images/img06.jpg"); /*画像のURLを指定*/
    border-image-slice:30 15 17; /*画像のスライスを指定*/
    border-image-width:30px 15px 17px; /*画像の太さをpxで指定*/
    }

p#sample {
	padding:1em;
	border-style:solid;  /*border-styleが無いとダメ*/
	border-width:30px 15px 17px;  /*border-widthを基準にするので無いとダメ*/
	border-image-source:url("images/img06.jpg"); /*画像のURLを指定*/
    border-image-slice:30 15 17; /*画像のスライスを指定*/
    border-image-width:0.5; /*画像の太さをborder-widthを基準に指定*/
    }

p#sample {
	padding:1em;
	/*border指定無し*/
	border-image-source:url("images/img06.jpg"); /*画像のURLを指定*/
    border-image-slice:30 15 17; /*画像のスライスを指定*/
    border-image-width:auto; /*画像の太さをautoに指定*/
    }

border-image-width のサンプルをいろいろ作っていて思ったこと。
コレいらない（笑）
ボーダー領域が無いと非常に扱いづらいので結局 borderを指定する。それならこの border-image-width は不要かと（デフォが１なので）。（ここまで読んでいただいてコレではアレですが。笑）
太さを変える必要があるときだけ、このプロパティで倍数（単位無し）指定すれば良いと思います。

border-image-outset で外側に広げられる

border-image-outset は、ボーダー領域の外側にボーダーイメージを広げることができます。
デフォルト値は「0」です。

こちらも、先ほどのスライスと同じように、1〜4つの値で指定できます。
値が1つの場合、上下左右全部同じ値。
値が2つの場合、上下、左右の値ということ。
値が3つの場合、上、左右、下の値ということ。
値が4つの場合、上、右、下、左の値ということ。

border-image-repeat でボーダーの繰り返しかたを指定

border-image-repeat は、ボーダーの「辺」の部分の繰り返しかたを指定します。

値は4つのキーワードだけ。
そして、このプロパティは1〜2つまでのキーワードで指定します。
値が1つの場合、上下左右全部同じ値。
値が2つの場合、上下、左右の値ということ。

デフォルトの stretch です。border-image-repeat を指定しなければコレ。

border-image-repeat: stretch

repeat ではこんなかんじ。辺の中心からリピートがスタートするようです。
要素の幅や高さが画像のスライスとピッタリ合っていなければ、おかしなところで切れたりします。

border-image-repeat: repeat

round です。横方向・縦方向に拡大縮小してピッタリ収めてくれます。

border-image-repeat: round

space ではこんなかんじ。
余白が入って調整するはずですが、Chrome と Opera では repeat と同じプレビュー、Firefox では stretch と同じプレビューになってしまいます。（2015年12月記）これ、いつか対応するんでしょうね。

border-image-repeat: space

値2つを試してみます。上下を round、左右の辺を stretch で指定。

値2つをテスト。
border-image-repeat: round stretch

border-image のショートハンド

上記の5つのプロパティは、border-image ショートハンドプロパティでまとめて書くことができます。

書き方は、
border-image-sourceの値（半角スペース）border-image-sliceの値 / border-image-widthの値 / border-image-outsetの値（半角スペース）border-image-repeatの値
と決まっています。

サンプルです。
先ほどの border-image-repeat の値が2つのヤツを、ショートハンドプロパティで。
border-width を先ほどの半分の15pxにしています。（スライスとボーダーの幅は同じじゃなくてもOK。自動で当てはめてくれます）

p#sample6-1 {
	padding:1em;
	border-style:solid;
	border-width:15px;  /*ボーダーの幅を15pxに。この領域内に画像を収めてくれます*/
	border-image:url("images/img01.jpg") 30/1/0 round stretch}

このサンプルでは、border-image-width:1 、border-image-outset:0 はデフォルト値ですので、
ショートハンドの「/1/0」は無くてもOK。
このソース↓でも表示は同じになります。

	border-image:url("images/img01.jpg") 30 round stretch

一目でわかる！便利なシミュレーションサイト

border-image のシミュレーションサイトを2つご紹介します。
文章での説明だとけっこう難解ですが、シミュレーションすれば一目瞭然！です。

border-image-generator
自分で作った画像を「Browse...」でチョイスしてシミュレーションできます。
下部のプレビューで確認して、ソースをコピペできるので便利です。

Web Creative Park CSSリファレンス サンプル
to-R(トゥーアル) さんが運営するリファレンスサイトの中のシミュレーションページです。
ソースを編集して「HTMLを反映する>>」ボタンを押すと、右側にプレビューを表示できます。
こちらは画像は選べませんが、 border-image-outset の挙動を確認できます。

対応ブラウザとベンダープレフィックス

border-image は、IEは11から、Chrome15、Safari 5.1、Firefox 15から対応だそうです。
iOS 3.2からの Safariはベンダープレフィックス付きで対応、6から完全対応。
Androidは2.1からベンダープレフィックス付きで対応、4.4から完全対応とのこと。

古めのモバイルにも表示させるなら、
ベンダープレフィックス「-webkit-」を付けます。

こんなかんじで。

    -webkit-border-image:url("images/img01.jpg") 30 round stretch;
    border-image:url("images/img01.jpg") 30 round stretch;

次回予告

今回は border-image のプロパティを全部詰め込んだので、長かったですね。

次回は、borderとよく似た outlineプロパティとそのショートハンドについて。
outlineは、borderと同じように要素の外枠を表示します。
が、border と違ってボーダー領域ができないのが特徴。自分の太さで回りに影響を与えない、1つ上のレイヤーに浮いているような存在です。
レイアウト用というよりも、フォームの部品等に使ってユーザにアクティブになっていることを教えたりする、ユーザビリティのためのプロパティですね。

関連記事

• 【16-1】幅の width、高さの heightプロパティ
• 【15-5】backgroundのショートハンド まとめ
• 【15-4】background関連のプロパティ（4/4　clip と origin）
• 【15-3】background関連のプロパティ（3/4　background-size）
• 【15-2】background関連のプロパティ（2/4　background-position）
• 【15-1】background関連のプロパティ（1/4）
• 【14】borderとよく似た outlineはレイアウトを崩さない
• 【13-2】border-imageと border-imageのショートハンド
• 【13-1】borderと borderのショートハンド
• 【12】paddingと paddingのショートハンド
• 【11-4】marginの相殺（margin collapsing）
• 【11-3】はみ出て便利♪ ネガティブ・マージン（Negative Margin）
• 【11-2】marginの auto という値の「？」を解決しておこう
• 【11-1】marginと marginのショートハンド
• 【10】ボックスモデル（margin, padding, border を使いこなそう）

Tweet

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)