ywork2020.com

Title

要素の境界線に画像を使用する

目次 (INDEX)

border-image-sourceとは

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

目次に戻る

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

このプロパティは要素の境界線に画像を利用する場合に、その使われる画像を指定します。

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

目次に戻る

構文

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

セレクター{border-image-source: image関数;}

目次に戻る

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

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

サンプルで使用している要素はdivです。 このプロパティとは境界線に画像のソースを指定するために使いますので、全ての要素に使用することができます。 しかし table 要素内の要素に関してはCSSの border-collapse プロパティの値がcollapseの場合、境界線が壊れている状態なので border-image-sourceは効果が視認できません。

初期値: none

初期値のnoneキーワードは要素の境界線に画像を指定しません。 この場合には border-style で定義されたものが境界線として表示されます。

div要素
線の太さ: medium
線のスタイル: solid
線の色: currentColor

div{border-image-source: none;}

目次に戻る

基本: url関数で画像を指定する

このプロパティに画像を指定することで境界線領域に画像を使用することができます。 ここでは他の画像ファイルを読み込むためのurl関数を使用しています。

div要素
線の太さ: medium
線のスタイル: solid
線の色: currentColor

div{border-image-source: url(画像のURL);}

目次に戻る

関数: image関数で画像を作成する

このプロパティには直接の画像ファイルを指定する以外にも、画像を作成するために用いるimage関数を使用することができます。 ここでは linear-gradient 関数を使用してグラデーション画像を作成してみました。

div要素
線の太さ: medium
線のスタイル: solid
線の色: currentColor

div{
	border-image-source: linear-gradient(to bottom right, red, blue);
	border-image-width: 10px;
	border-image-slice: 1;
}

目次に戻る

応用: 二つの関数で画像を作成する

このサンプルではrepeating-linear-gradient関数の引数にrgba関数で透過色を指定してみました。 このように background-image プロパティと類似した利用方法で画像をボーダー領域に指定することができます。

div要素
線の太さ: medium
線のスタイル: solid
線の色: currentColor

div{
	border-image-source: repeating-linear-gradient(180deg, rgba(255,0,0,0.5), rgba(255,255,0,0.5) 30px);
	border-image-width: 10px;
	border-image-slice: 1;
	background-clip: content-box;
}

目次に戻る

グローバル値

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

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

目次に戻る

補足説明

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

目次に戻る

まとめ

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

border-image-source: none;

border-image-source: url(../images/border.png); border-image-width: 100%; border-image-slice: 80%;

border-image-source: linear-gradient(to bottom right, red, blue); border-image-width: 10px; border-image-slice: 1;"

サンプル: ブロック要素

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

目次に戻る