CSS3で追加されたborder-imageプロパティを使うと、ボックスのボーダーに画像を表示することができます。
ボーダーに画像を取り入れると、自由でユニークな枠線を作ることができます。
今回は、border-imageプロパティについてまとめたいと思います。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
目次
画像ボーダーを作る際には、次のプロパティを使用します。
| border-image-source | 使用する画像ファイルのURLを指定 |
|---|---|
| border-image-slice | 画像の使用範囲を指定 |
| border-image-width | 画像ボーダーの幅を指定 |
| border-image-outset | 画像ボーダーの領域を外側に広げる |
| border-image-repeat | ボーダー画像の繰り返し方法を指定 |
| border-image | 画像ボーダーのショートハンドプロパティ |
これから次の画像を使って、画像ボーダーを作ってみたいと思います。
サイズは、縦90px、横90pxです。
border-image-sourceプロパティは、次のような書き方で表示する画像ファイルのURLを指定します。
border-image-source: "画像のURL";
border-image-sourceプロパティの値は、次の通りです。
| none | 画像がない場合（デフォルト値） |
|---|---|
| 画像のURL | url (“画像のURL”) 相対パス、絶対パス、どちらでも指定可能 |
border-image-sourceプロパティの値は、継承されません。
また、border-image-sourceプロパティは、全ての要素で使用できます。
border-styleプロパティでボーダーの指定があって、border-widthプロパティに値が指定されている場合は、border-image-sourceプロパティの指定のみで、ボーダーとして次のように表示されます。
border-image-sourceのみを指定すると、
4つの角に指定した画像が表示されます。
ソースは次の通りです。
<!-- CSSファイル -->
p#sample {
padding:1em;
border:solid 30px;
border-image-source:url("img/img01.jpg");}
<!-- HTMLファイル -->
<p id="sample">
border-image-sourceのみを指定すると、<br>
4つの角に指定した画像が表示されます。
</p>
border-image-sliceプロパティで、画像を9つにスライスしてみます。
スライスは、次のようなイメージです。
この画像（縦90px、横90px）の上下左右の外側から30pxずつスライスしています。
スライスは、上の外側からの長さ、右の外側からの長さ、下の外側からの長さ、左の外側からの長さで指定します。
この4つの長さを指定すると、コーナーが4つ、辺にあたる領域が4つ、真ん中、の9つの領域に分けられます。
border-image-sliceプロパティのデフォルト値は100%ですので、画像全体がコーナーに表示されます。
border-styleプロパティでボーダーの指定があって、border-widthプロパティに値が指定されている場合は、先ほどのborder-image-sourceプロパティと、この border-image-sliceプロパティを指定することで、画像ボーダーらしくなります。
スライスとボーダーの幅は同じである必要はありません。
ボーダーの幅に応じて伸縮されます。
border-image-sliceプロパティの値は、次の通りです。
| パーセント | 画像の幅や高さに対しての%で指定（デフォルト値は100%） |
|---|---|
| 数値 | ピクセルの数値 単位なしで指定 |
| fill | 画像の中央部分をボックスの背景として表示するための指定 単独で指定することはできず、%や数値の値の後に半角スペースで区切って指定する |
border-image-sourceプロパティの値は、継承されません。
また、border-image-sourceプロパティは、全ての要素で使用できます。
値は1～4つで、半角スペースで区切って指定します。
先ほど、スライスのイメージとして表示したものが、このタイプです。
この画像（縦90px、横90px）の上下左右の外側から30pxずつスライス
border-image-slice:30;
ソースは次の通りです。
<!-- CSSファイル -->
p#sample {
padding:1em;
border:solid 30px;
border-image-source:url("img/img01.jpg");
border-image-slice:30;}
<!-- HTMLファイル -->
<p id="sample">
<img src="img/img00.jpg" />
この画像（縦90px、横90px）の上下左右の外側から30pxずつでスライス
</p>
この画像（縦90px、横90px）の上下の外側から30px、左右の外側から15pxでスライス
border-image-slice:30 15;
この画像（縦90px、横90px）の上の外側から30px、左右の外側から15px、下の外側から20pxでスライス
border-image-slice:30 15 20;
この画像（縦90px、横90px）の上の外側から30px、右の外側から10px、下の外側から20px、左の外側から15pxでスライス
border-image-slice:30 10 20 15;
上の例（値4つを指定）にfillを追加指定すると、次のような表示になります。
この画像（縦90px、横90px）の上30px、右10px、下20px、左15pxでスライス後、fillを追加指定
border-image-slice:30 10 20 15 fill;
border-image-repeatプロパティは、ボーダーの辺にあたる領域の繰り返し方法を指定します。
border-image-repeatプロパティの値は次の4つで、2つまで指定できます。
値を1つ指定した場合は、上下左右全て同じ値となり、値を2つ指定した場合は、上下（値1）、左右（値2）の値となります。
| stretch | 画像の繰り返しなし（デフォルト値） 領域に合わせて、横の辺は横向きに、縦の辺は縦向きに引き伸ばされる |
|---|---|
| repeat | 画像を繰り返して表示 |
| round | 画像を繰り返して表示し、領域に合うように、サイズ調整される |
| space | 画像を繰り返して表示し、領域に合うように、スペース調整される |
border-image-sourceプロパティの値は、継承されません。
また、border-image-sourceプロパティは、全ての要素で使用できます。
repeatは、辺の中心からリピートがスタートします。
この画像（縦90px、横90px）の上下左右の外側から30pxずつスライスしてリピート
border-image-repeat: repeat
ソースは次の通りです。
<!-- CSSファイル -->
p#sample {
padding:1em;
border-style:solid;
border-width:30px;
border-image-source:url("img/img01.jpg");
border-image-slice:30;
border-image-width:1;
border-image-outset:0;
border-image-repeat:repeat;}
<!-- HTMLファイル -->
<p id="sample">
border-image-repeat: <b>repeat</b>
</p>
roundは、横方向と縦方向に拡大縮小して、ボーダーのサイズに合わせてくれます。
この画像（縦90px、横90px）の上下左右の外側から30pxずつスライスしてリピート
border-image-repeat: round
space は、余白が入って調整されます。
この画像（縦90px、横90px）の上下左右の外側から30pxずつスライスしてリピート
border-image-repeat: space
INTERNOUS,inc. All rights reserved.
