ywork2020.com

Title

要素の境界線に画像を表示する

目次 (INDEX)

border-imageとは

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

目次に戻る

border-imageプロパティの概要

このプロパティは指定要素の境界線に画像を描画します。

描画される画像は初期設定のままだとボーダーボックスより内側に描かれます。 これによりパディングボックスやコンテンツボックスにまで画像が描かれることもあり、内包コンテンツを圧迫する可能性がありますので border-widthpadding の調整も必要な場合があります。

また、 outset とを調整することで上記の問題を解決できますが、その場合、 margin の調整が必要になるかもしれません。

このプロパティは下記の個別プロパティの設定を一括で設定するための総合プロパティです。

目次に戻る

構文

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

セレクター{border-image: source値 slice値/width値/outset値 repeat値;}

上記の構文を個別プロパティで指定すると次のような構文になります。

セレクター{
	border-image-source: url(URL);
	border-image-slice: 設定値;
	border-image-width: 設定値;
	border-image-outset: 設定値;
	border-image-repeat: 設定値;
}

目次に戻る

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

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

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

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

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

初期値: none 100%/1/0 stretch;

初期値の none 100%/1/0 stretch は次に示す個別プロパティの初期値を列挙したものです。

  • border-image-source: none;
  • border-image-slice: 100%;
  • border-image-width: 1;
  • border-image-outset: 0;
  • border-image-repeat: stretch;

この初期値では border-image-source の指定値がnoneになっているので境界線に画像は使われません。

div要素
div要素

div{border-image: none 100%/1/0 stretch;}
構文{border-image: source値 slice値/width値/outset値 repeat値;}

目次に戻る

実践: 初期値に任意のsource値を指定する

初期値のsource値の部分に画像をURLを指定してみます。 他の値は初期値のままです。

結果を見ると境界線に画像が描かれているようには見えません。 実際には描かれているのですが、この状態ではユーザーはボーダーイメージを目視できないでしょう。

なぜこのような結果となるかは、サンプルコードを見ていただきたいのですが、これはborder-widthの値が1pxであり、 border-image-widthの値が1であるためです。

div要素
div要素

div{
	border-width: 1px;
	border-image: url(画像のURL) 100%/1/0 stretch;
}
構文{border-image: source値 slice値/width値/outset値 repeat値;}

border-image-widthの値は境界線の画像の幅を指定することができるのですが、 この値を実数で指定した場合は border-width の値 × border-image-width の値で乗算(掛け算)された値が border-image-widthの指定値となります。

このサンプルでいうならば、1px × 1 = 1pxとなるので境界線画像の幅は1pxで表示されているわけです。 詳細については border-image-width のページを参照してください。 次のセクションでは、この値を指定して目視できるように画像を表示してみたいと思います。

目次に戻る

実践: 境界線画像の幅を指定する

前セクションでは境界線画像を目視することは困難でした。 ここでは境界線画像の幅を適切な値として調整するために width値にautoキーワードを使用してみます。

width値にautoを指定するということは 個別プロパティのborder-image-width にautoを指定していることと同じです。

autoキーワードを使うとslice値と同じ値をwidth値として使用します。 このサンプルの場合のwidth値は結果として100%ということになり、ソース画像の100%の幅である60pxということになります。

slice値とは個別プロパティの border-image-slice で指定する値のことです。

div要素
div要素

div{
	border-width: 1px;
	border-image: url(画像のURL) 100%/auto/0 stretch;
}
構文{border-image: source値 slice値/width値/outset値 repeat値;}

サンプルの結果を見るとソース画像は丸ごと要素の四隅に表示されています。 これでは境界線の画像としては不向きではないでしょうか。 次のセクションではソース画像を分割した境界線画像の部品として利用してみます。

目次に戻る

実践: ソース画像を分割して境界線画像の部品として利用する

前セクションでは境界線画像を利用しているというよりは 四隅に画像を配置したような結果となり、ボーダーを形成できていませんでした。 ここではソース画像を分割した境界線画像の部品として利用してみます。 設定するのはslice値の部分です。

slice値とは個別プロパティの border-image-slice で指定する値のことです。

このサンプルのソース画像の幅は60pxです。

ボーダーイメージのサンプル画像 ボーダーイメージのサンプル画像(番号付き)
これを9つの画像部品として均等に分割するためには幅を3等分した値を指定します。 具体的な値で言えば、「20」または「33.3%~33.4%」という値になります。

このソース画像を均等に分割したものとして説明すると画像に描かれている1~9の数字は次のような使われ方をします。

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

9番の画像を利用する場合はslice値の記述の後に半角スペースを入れてfillキーワードを指定します。

div要素
div要素
div要素

div{
	border-width: 1px;
	border-image: url(画像のURL) 20/auto/0 stretch;
}
div{
	border-width: 1px;
	border-image: url(画像のURL) 20 fill/auto/0 stretch;
}
構文{border-image: source値 slice値/width値/outset値 repeat値;}

目次に戻る

実践: 四辺と中央の画像部品を繰り返し表示に変える

前セクションで使用したサンプルでは四辺の画像は部品を引き伸ばして表示していました。 ここでは、repeat値を指定して、そのサンプルの四辺を繰り返し画像に変えてみます。

repeat値とは個別プロパティの border-image-repeat で指定する値のことです。

div要素
div要素

div{
	border-width: 1px;
	border-image: url(画像のURL) 20 fill/auto/0 round;
}
構文{border-image: source値 slice値/width値/outset値 repeat値;}

目次に戻る

実践: 境界線画像を要素の外側にオフセットする

境界線に使われた画像は実際の境界線に沿って内側(padding側)に描画されます。 outset値を変更することで外側(margin側)にオフセットして描画させることができます。 この場合要素の幅は拡張されたように見えます。

outset値とは個別プロパティの border-image-outset で指定する値のことです。この設定には負の数を指定することはできません。

div要素
div要素

div{
	background-color: orange;
	border-width: 1px;
	border-image: url(画像のURL) 20/auto/10px round;
}
構文{border-image: source値 slice値/width値/outset値 repeat値;}

目次に戻る

補足説明

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

目次に戻る

まとめ

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

border-image: none 100%/1/0 stretch;

border-image: url(../images/border-image-n.png) 100%/1/0 stretch;

border-image: url(../images/border-image-n.png) 100%/auto/0 stretch;

border-image: url(../images/border-image-n.png) 33.4%/auto/0 stretch;

border-image: url(../images/border-image-n.png) 33.4% fill/auto/0 stretch;

border-image: url(../images/border-image-n.png) 33.4% fill/auto/0 round;

border-image: url(../images/border-image-n.png) 33.4% fill/auto/10px round;

サンプル: ブロック要素


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

目次に戻る