border-image-slice - 枠線画像の切り取り範囲を調整する

投稿日:2016/02/22 / 更新日:2016/02/22

スタイルシートのborder-image-sliceは、枠線画像の切り取り範囲を指定するためのプロパティです。このプロパティの値を指定するには、画像がどのようにして枠線に描画されるのか、その仕組みを理解しておく必要があります。

サンプルコード

border-image-sliceを指定したサンプルコードです。border(枠線)や、border-image-source(枠線画像)を併せて指定しておく必要があります。

div {
	border: 40px solid #9ba5a8 ;
	border-image-source: url( "/border.png" ) ;

	border-image-slice: 40 ;
}

デモ

border-image-sliceプロパティに40を指定したデモです。横幅が120px、高さが120pxある枠線画像が、横幅40px、高さ40pxごとに切り取られて配置されているのを確認して下さい。

RUN
HTML
CSS
JavaScript

<div id="element"> <div id="content"></div> </div> <div id="infomation"> <div id="left"> <p><img src="/border.png" width="120" height="120" id="border"></p> <p>枠線画像<BR>border.png<BR>(120x120 px)</p> </div> <div id="right"> <p><div id="border-color"></div></p> <p>ボーダー<BR>(40px)</p> </div> </div>

#element { border: 40px solid #9ba5a8 ; border-image-source: url( "/border.png" ) ; border-image-slice: 40 ; } /* 下記は関係ありません */ body { margin: 8px 2px ; } #content { background: #fff ; min-height: 40px ; } #infomation { border-top: 1px solid #000 ; margin: 20px 0 0 ; padding: 20px 0 0 ; overflow: hidden ; } #infomation p { margin: 0 ; padding: 0 ; font-size: .8rem ; text-align: center ; } #left { float: left ; width: 50% ; } #right { float: right ; width: 50% ; } #border { width: 120px ; height: auto ; border: 1px solid #000 ; vertical-align: bottom ; } #border-color { width: 120px ; height: 120px ; background: #9ba5a8 ; border: 1px solid #000 ; margin: 0 auto ; }

値の指定

値は、基本的に「横幅」と「縦幅」、の2つの値を指定します。1つの値を指定した場合、その値が「横幅」「縦幅」の両方に適用されます。指定方法は主に下記の通りです。リンクをクリックすると、デモを確認できます。

項目	説明
inherit	親要素の値を引き継ぐ。例の場合、`div`要素の`border-image-slice`には、`body`に指定された値(`40`)が引き継がれる。
initial	プロパティの初期値が適用される。この場合、`100%`を指定したのと同じになる。
fill	`fill`のキーワードを値の後に加えると、上、右、下、左のエリアに画像が表示されるようになる。…という仕様だったが2016年2月現在、主要ブラウザでは`fill`を指定しなくても、`fill`を指定したのと同じ状態になっている。
percentage	画像のサイズに対するパーセンテージで指定する。例えば、幅が120pxの画像に対して`50%`を指定すれば、60pxを指定したのと同じ扱いになる。
number	`px`を示す数値でサイズを指定する。例えば、`40`を指定すれば40pxとなる。`px`など、単位を付けると機能しないので注意。

仕組み

border-image-sliceがどのように機能するのか。見本を見ながら理解していきましょう。枠線画像を表示するには、独自のルールが存在するので、そのルールを理解しないと値を自在に指定することはできません。

項目	説明
9つのエリア	ある要素に枠線画像を表示する時、その要素がどのような形をしていても、必ず「9つのエリア」に分解されます。「左上(1)」「上(2)」「右上(3)」「左(4)」「真ん中(5)」「右(6)」「右下(7)」「下(8)」「左下(9)」の9つです。これは全ての基本なのでまず意識するようにしましょう。
4つの優先エリア	9つのエリアのそれぞれに、枠線画像のエリアが分配されます。まず、優先的に分配されるのが「左上(1)」「右上(3)」「左下(7)」「右下(9)」の角4カ所です。この4つはとても権利が強いとイメージしておいて下さい。ここだけ分かりやすいように色を強調しておきますね。
左上の取り分	ここからは、各エリアに画像が分配されていきます。その分配の仕組みが肝です。前提として、今回は`border-image-slice`に`50 30`を指定したとしましょう。左上のエリアから見ていきましょう。左上には枠線画像の左上部分が割り振られます。画像の左上が起点となり、右方向に50px、下方向に30pxの部分が分配されます。
右上の取り分	続いて、右上を見てみましょう。右上には、画像の右上部分を起点として、左方向に50px、下方向に30pxの部分が分配されます。
左下の取り分	左下を見てみましょう。左下には、画像の左下部分を起点として、右方向に50px、上方向に30pxの部分が分配されます。
右下の取り分	最後に右下を見てみましょう。右下には、画像の右下部分を起点として、左方向に50px、上方向に30pxの部分が分配されます。
上の取り分	「右上」「左上」「左下」「右下」の4カ所に画像が分配された後、余りの部分が「上」「右」「左」「下」のエリアに分配されていきます。まずは上のエリアから見てみましょう。上のエリアは、「左上」「右上」に分配された部分の余りが割り振られます。余りがない場合、このエリアには画像が表示されません。
右の取り分	次に「右」のエリアの取り分を見てみましょう。「右上」と「右下」に分配後に残った部分が、右エリアに配置される画像となります。
下の取り分	次に「下」のエリアの取り分を見てみましょう。「左下」と「右下」に分配後、残った部分が下エリアに配置される画像となります。
左の取り分	最後に「左」のエリアの取り分を見てみます。「左上」と「左下」に分配後、残った部分が左エリアに配置される画像となります。このようにして、`border-image-slice`によってスライスされた画像が、9つの各エリアに配置される仕組みになっているんです。
枠線画像を描画	それでは、実際に枠線画像がどのように描画されるのかを確認してみましょう。どうでしょうか？このような法則で、各エリアの画像の取り分が決定されるというわけです。
枠線画像をフィットさせる	蛇足ですが、例に使用した枠線画像は、横幅40px、高さ40pxの画像が9個集まってできた、横幅120px、高さ120pxの画像です。この場合、枠線画像として綺麗に表示するには、`border-image-slice`に`40 40`を指定するのが正解ですね。何故そうなのか。仕組みを理解している人ならば、分かるはずです。

ブラウザのサポート

2016年7月現在の、ブラウザのサポート状況は次の通りです。

Chrome
●
15+
2011年10月
Firefox
●
15+
2012年8月
Safari
●
6+
2012年7月
Ie
●
11+
2013年10月
Edge
●
12+
2015年3月
Opera
●
15+
2013年7月
Safari(iOS)
●
6+
時期不明
Ie Mobile
●
11+
2014年7月
Chrome
●
47+
2015年12月
Android
●
4.4+
2014年6月
FF Mobile
●
44+
2016年1月
Opera Mobile
●
33+
2015年10月