ywork2020.com

Title

要素の四辺に使われる境界線画像の取り扱い方法

目次 (INDEX)

border-image-repeatとは

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

目次に戻る

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

このプロパティは要素の境界線に画像を使用した場合に、四辺に描かれる画像の取り扱いについて指定することができます。

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

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

このプロパティでは、5番から8番の画像部品を四辺に描く場合のパターンを指定することになります。

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

目次に戻る

構文

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

セレクター{border-image-repeat: 四辺値}
セレクター{border-image-repeat: 水平辺値 垂直辺値}

目次に戻る

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

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

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

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

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

初期値: stretch

初期値のstretchキーワードは、 border-image-slice で部品化された5,6,7,8番の画像を四辺に引き伸ばして境界線画像として設定します。

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

div要素
div要素

div{
	border-width: 1px;
	border-image-source: url(画像のURL);
	border-image-width: auto;
	border-image-slice: 33.4%;
	border-image-repeat: stretch;
}

目次に戻る

キーワード値: repeat

repeatキーワードは、 border-image-slice で部品化された5,6,7,8番の画像を四辺に繰り返して表示することで境界線画像とします。 画像部品の寸法が合わない場合は領域の一部が切り取られることがあります。

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

div要素
div要素

div{
	border-width: 1px;
	border-image-source: url(画像のURL);
	border-image-width: auto;
	border-image-slice: 33.4%;
	border-image-repeat: repeat;
}

目次に戻る

キーワード値: round

roundキーワードは、 border-image-slice で部品化された5,6,7,8番の画像を四辺に繰り返して表示すると同時に画像部品の寸法を調整するために、 領域を引き伸ばして境界線画像とします。

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

div要素
div要素

div{
	border-width: 1px;
	border-image-source: url(画像のURL);
	border-image-width: auto;
	border-image-slice: 33.4%;
	border-image-repeat: round;
}

目次に戻る

キーワード値: space

spaceキーワードは、 border-image-slice で部品化された5,6,7,8番の画像を四辺に繰り返して表示すると同時に画像部品の寸法を調整するために、 領域に空白を挟み込みながら境界線画像とします。

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

div要素
div要素

div{
	border-width: 1px;
	border-image-source: url(画像のURL);
	border-image-width: auto;
	border-image-slice: 30%;
	border-image-repeat: space;
}

目次に戻る

応用: 水平辺と垂直辺と別の値で指定する

このプロパティではキーワード値を水平辺と垂直辺に別々で指定することが可能です。 サンプルでは水平辺にroundキーワード、垂直辺にstretchキーワードを与えてみました。

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

div要素
div要素

div{
	border-width: 1px;
	border-image-source: url(画像のURL);
	border-image-width: auto;
	border-image-slice: 33.4%;
	border-image-repeat: round stretch;
}

目次に戻る

グローバル値

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

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

目次に戻る

補足説明

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

目次に戻る

まとめ

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

border-image-repeat: stretch;

border-image-repeat: repeat;

border-image-repeat: round;

border-image-repeat: space;

border-image-repeat: stretch round;

border-image-repeat: round stretch;

サンプル: ブロック要素

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

目次に戻る