border-image-sliceとは?設定の仕方を実例を出しながらわかりやすく解説!

今回はボーダー画像の使用範囲を設定するborder-image-sliceのお話。

どうやって設定するの?
設定方法にはどんな種類があるの?

このような疑問に答えながら、border-image-sliceについて解説していきます。
border-image-sliceはややこしい、わかりにくいという声が多いので初心者向けにわかりやすく実例を踏まえながら解説していきます。

この記事を最後まで読めばborder-image-sliceが理解でき、使いこなせるようになるはずです。

border-image-sliceとは?

border-image-sliceの読み方

border-image-sliceは、【ボーダー・イメージ・スライス】と読みます。

ボーダーは【枠線】、イメージは【画像】、スライスは【薄く切る】を意味します。
日本語でも「ハムをスライスする」のようにスライスという言葉を使うかと思いますが、border-image-sliceは枠線画像の使用範囲を指定する際に使用するプロパティです。

border-image-sliceは使用範囲を指定します

border-image-sliceは枠線画像の使用範囲を指定する際に使用するプロパティです。

具体的にどういうこと?

いまいちピンとこない人も多いと思うの画像も見ながらわかりやすく説明します。

ボーダーに使用する画像は、次の9つの領域に区切られます。

border-image-sliceは四隅からそれぞ内側にどれくらい表示するかを指定します。

補足
真ん中部分は初期値では捨てられて空白となりますが、【fill】を指定すると背景の上に表示できます。

border-image-sliceで指定できる値

border-image-sliceでは次の値を指定できます。

説明
数値+% ボーダーに使用する画像の幅(width)と高さ(hight)に対する、水平方向と垂直方向のオフセット量のパーセンテージを指定します
fill fillを指定すると、真ん中部分も画像のボーダーで埋められます
(初期値では、真ん中部分は捨てられて空白となります)

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox 完全対応
nternet Explorer 完全対応
Opera 完全対応
Safari 完全対応
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome 完全対応
Android版Firefox 完全対応
Android 版 Opera 完全対応
iOS版Safari 完全対応
Samsung Internet 完全対応

完全対応なので安心して使用できます。

border-imageのポイント3つ

border-image-sliceの設定に入る前に、border-imageについて簡単に復習しましょう。

border-imageを使用する際には次の3つのポイントを抑えておきましょう。

  1. border-imageを設定する前にboderを指定する
  2. border-imageのプロパティはまとめて指定もできる
  3. border-imageで指定しなかったプロパティには初期値が入る

border-imageを設定する前にboderを指定する

まずは、border-imageを指定する前にborderを指定する必要があります。

設定の方法

枠線の太さ、枠線の種類、枠線の色を半角スペースで区切って指定します。

border-imageのプロパティはまとめて指定もできる

border-imageのプロパティは今回説明しているborder-image-sliceを含め、全部で5つあります。
それぞれ指定することもできますが次のようにまとめて指定することもできます。

border-imageを指定するときの順番

  1. sourceプロパティ【画像の場所を指定】
  2. sliceプロパティ【画像の分割方法を指定】
  3. widthプロパティ【画像の幅を指定】
  4. outsetプロパティ【画像のはみ出し方を指定】
  5. repeatプロパティ【繰り返しの仕方を指定】
重要ポイント
数値を指定するプロパティ同士の間は【/ (半角スラッシュ)】で区切る必要があります。

border-imageで指定しなかったプロパティには初期値が入る

全てのプロパティを入れる必要はありません。
最低限画像の場所は指定し、他のプロパティは必要であれば設定すれすればOKです。

border-image-sliceの基本的な使い方

では実際にborder-image-sliceの値を入れて実例を見ながら設定してみましょう。
今回はこちらの画像を使用します。

共通のコード

html

css

実装結果

何も設定していないとこの状況です。

解説

画像の高さを50pxに縮小(今回のボーダーの設定が50pxのため)。
横幅も50pxに切り抜いた画像を四隅に配置。

数値+%

実装結果

解説

■縦のボーダーを作る

①画像の横幅30%で切り抜きます。
②30%で切り抜いた画像を50pxに縮小。
③縦のボーダーが完成です。

■横のボーダーを作る

①画像の高さを30%で切り抜きます。
②30%で切り抜いた画像を50pxに縮小。
③横のボーダーが完成です。

縦と横に配置します。
この時に交わる四隅は縦が上になります。

補足

このように設定するとすべての辺を30%に!という意味になりますが、上と下の線で幅を変えたり、4辺すべての幅を変えることも可能です。

/* 上下 | 左右 */

/* 上 | 左右 | 下 */

/* 上 | 右 | 下 | 左 */

この設定方法はpaddingやmarginを設定するのと同じで、上から順に時計回りに設定していきます。

fill

fillを設定するとこのように真ん中の部分にも背景が入ります。

実装結果

まとめ

いかがだったでしょうか。
今回は枠線に画像を設定するborder-imageの中のborder-image-sliceで枠線画像の使用範囲を設定の仕方を解説しました。

最初は慣れずに難しく感じるかと思いますが、border-imageを使いこなせるようになると、複雑なcssを使わなくても簡単におしゃれな囲み枠を作成できるようになるのでオススメです。

この記事が少しでも参考になれば幸いです。