ywork2020.com

Title

要素の境界線に使用する画像の分割を調整する

目次 (INDEX)

border-image-sliceとは

ここで説明するborder-image-slice とは次の語句からなるCSSのプロパティです。
border
読み: ボーダー
意味: 境界、境界線、国境、縁
image
読み: イメージ
意味: 画像、映像
slice
読み: スライス
意味: 薄切り

目次に戻る

border-image-sliceプロパティの概要

このプロパティは要素の境界線に画像を使用した場合に、境界線の四隅と四辺と中央に配置する画像部品としての分割を調整します。

境界線に使われる元の画像は border-image-source によって指定され、 このプロパティで下記の画像の番号で示している領域に分割された画像部品として使われます。
ボーダーイメージのサンプル画像
この番号で示した領域は次のように扱われます。

  • 1番-4番の領域は境界線の四隅を形成します。
  • 5番-8番の領域は境界線の四辺を形成します。
  • 9番は境界線の内側の領域を背景画像のように形成します。

border-image-sliceは個別プロパティであり、一括指定プロパティのborder-imageのグループです。 同種の個別プロパティとの設定の組み合わせによっては、色々な画像をボーダー領域に利用することができます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{border-image-slice: 四辺の値;}
セレクター{border-image-slice: 上下辺の値 左右辺の値;}
セレクター{border-image-slice: 上辺の値 左右辺の値 下辺の値;}
セレクター{border-image-slice: 上辺の値 右辺の値 下辺の値 左辺の値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルに使う要素はdiv要素です。この要素の境界線に次に表示している画像を使ってボーダーイメージを適用していきます。

ボーダーイメージのサンプル画像 ボーダーイメージのサンプル画像(番号付き)

この画像は透過処理をおこなったpng形式のファイルです。画像サイズは60pxの正方形であり、20pxの正方形を九つ配置しています。

このプロパティを使うと画像を九つの領域に分割することになり、その分割された画像を四隅と四辺と中央に配置してボーダーの画像として利用します。

初期値: 100%

初期値の100%はボーダー画像に使用する元の画像を100%間隔で分割します。 つまり、100%間隔で分割するということは分割されないということになります。

この場合、スライスした画像は境界線の四隅の部品として扱われます。

border-image-slice:
100%;
border-image-slice:
60;

div{
	border-width: 1px;
	border-image-source: url(./border-image.png);
	border-image-width: auto;
	border-image-repeat: round;
	border-image-slice: 100%;
}

目次に戻る

サンプル: 画像を均等に分割して利用する

元の画像を均等に九つ領域に分割するためにはパーセンテージ値で 33.3% から 33.4% の値を指定する方法か、 元の画像サイズを3当分した値を実数値で指定する方法があります。実数値で指定する場合にはラスター画像はピクセル値で、ベクター画像は座標値で指定することになりますが、 どちらの画像も指定値には単位を付けないでください。

番号付きの画像で説明すると、画像を九つに分割した領域の1番から4番は四隅に配置され、5番から8番は四辺に配置され、 9番はバックグラウンド領域に配置されることになります。なお、バックグラウンド領域に関しては次のセクションで説明しています。 また、四辺領域の画像の取り扱いについては、 border-image-repeat プロパティで指定することになります。

border-image-slice:
33.4%;
border-image-slice:
20;
ボーダーイメージのサンプル画像(番号付き)

div{
	border-width: 1px;
	border-image-source: url(./border-image.png);
	border-image-width: auto;
	border-image-repeat: round;
	border-image-slice: 33.4%;
}

目次に戻る

キーワード値: fill

fillキーワードは、中央の領域を背景画像の様に表示します。

番号付きの画像で説明すると中央の領域とは画像を九つに分割した9番目の画像を背景画像のように扱うことになります。

border-image-slice:
33.4%;
border-image-slice:
20;

border-image-slice:
33.4% fill;
border-image-slice:
20 fill;
ボーダーイメージのサンプル画像(番号付き)

div{
	border-width: 1px;
	border-image-source: url(./border-image.png);
	border-image-width: auto;
	border-image-repeat: round;
	border-image-slice: 33.4% fill;
}

目次に戻る

サンプル: 上下辺を元画像サイズの50%以上の値で指定する

上下辺の値を元の画像サイズの50%以上の値で設定すると、画像は指定した値の幅で上下に分割されます。 サンプルではパーセンテージ値と実数値を使った例を並べて表示しています。 実数値を使って分割を指定する場合、ラスター画像はピクセル値で、ベクター画像は座標値で指定することになりますが、 どちらの画像も指定値には単位を付けないでください。

border-image-slice:
33.4% 33.4%;
border-image-slice:
20 20;

border-image-slice:
50% 33.4%;
border-image-slice:
30 20;
ボーダーイメージのサンプル画像(番号付き)

border-image-slice:
100% 33.4%;
border-image-slice:
60 20;

div{
	border-width: 1px;
	border-image-source: url(./border-image.png);
	border-image-width: auto;
	border-image-repeat: round;
	border-image-slice: 50% 33.4%;
}

目次に戻る

サンプル: 左右辺を元画像サイズの50%以上の値で指定する

左右辺の値を元の画像サイズの50%以上の値で設定すると、画像は指定した値の幅で左右に分割されます。 サンプルではパーセンテージ値と実数値を使った例を並べて表示しています。 実数値を使って分割を指定する場合、ラスター画像はピクセル値で、ベクター画像は座標値で指定することになりますが、 どちらの画像も指定値には単位を付けないでください。

border-image-slice:
33.4% 33.4%;
border-image-slice:
20 20;

border-image-slice:
33.4% 50%;
border-image-slice:
20 30;
ボーダーイメージのサンプル画像(番号付き)

border-image-slice:
33.4% 100%;
border-image-slice:
20 60;

div{
	border-width: 1px;
	border-image-source: url(./border-image.png);
	border-image-width: auto;
	border-image-repeat: round;
	border-image-slice: 33.4% 50%;
}

目次に戻る

サンプル: 上下辺を元画像サイズの50%以下の値で指定する

上下辺の値を元の画像サイズの50%以下の値で設定すると、画像は指定した値の幅で上下に分割されます。 また、左右辺はborder-image-repeatで指定したキーワードにより辺の画像が調整されます。 サンプルではパーセンテージ値と実数値を使った例を並べて表示しています。 実数値を使って分割を指定する場合、ラスター画像はピクセル値で、ベクター画像は座標値で指定することになりますが、 どちらの画像も指定値には単位を付けないでください。

border-image-slice:
33.4% 33.4%;
border-image-slice:
20 20;

border-image-slice:
20% 33.4%;
border-image-slice:
12 20;
ボーダーイメージのサンプル画像(番号付き)

border-image-slice:
10% 33.4%;
border-image-slice:
6 20;

div{
	border-width: 1px;
	border-image-source: url(./border-image.png);
	border-image-width: auto;
	border-image-repeat: round;
	border-image-slice: 20% 33.4%;
}

目次に戻る

サンプル: 左右辺を元画像サイズの50%以下の値で指定する

左右辺の値を元の画像サイズの50%以下の値で設定すると、画像は指定した値の幅で左右に分割されます。 また、上下辺はborder-image-repeatで指定したキーワードにより辺の画像が調整されます。 サンプルではパーセンテージ値と実数値を使った例を並べて表示しています。 実数値を使って分割を指定する場合、ラスター画像はピクセル値で、ベクター画像は座標値で指定することになりますが、 どちらの画像も指定値には単位を付けないでください。

border-image-slice:
33.4% 33.4%;
border-image-slice:
20 20;

border-image-slice:
33.4% 20%;
border-image-slice:
20 12;
ボーダーイメージのサンプル画像(番号付き)

border-image-slice:
33.4% 10%;
border-image-slice:
20 6;

div{
	border-width: 1px;
	border-image-source: url(./border-image.png);
	border-image-width: auto;
	border-image-repeat: round;
	border-image-slice: 33.4% 20%;
}

目次に戻る

応用: calc関数の利用

calc関数 を使うとCSSのコード上で計算をさせることができます。

この関数を利用することでプロパティの指定値を用意に導きだすことが可能です。 また、関数の引数に 変数 を使うことで更に便利な使い方もできるでしょう。

border-image-slice:
calc(var(--imageSize) / 3);

:root{
	--imageSize: 60;
}
div{
	border-width: 1px;
	border-image-source: url(./border-image.png);
	border-image-width: auto;
	border-image-repeat: round;
	border-image-slice: calc(var(--imageSize) / 3);
}

目次に戻る

グローバル値

border-image-sliceプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

  • inheritは親要素の値の継承を促します。
  • initialは値を初期値の100%に戻します。
  • unsetは継承の初期値に戻します。
    ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
セレクター{border-image-slice: グローバル値;}

目次に戻る

補足説明

  • すべての要素に適用可能。ただし、table要素の場合border-collapseがcollapseのときはテーブル要素内部には不適用
  • 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

border-image-slice: 100%;

border-image-slice: 33.4%;

border-image-slice: 33.4% fill;

border-image-slice: 100% 33.4%;

border-image-slice: 33.4% 100%;

border-image-slice: 10% 33.4%;

border-image-slice: 33.4% 10%;

サンプル: ブロック要素

サンプル: インライン要素

目次に戻る