cssプロパティborder-imageについての説明

こんにちは tanaka です。

cssプロパティ
border-image の説明です。

border-imageは
borderへ
画像を入れるために使います。

画像blog-css-list01-01

border-imageは、
小さな元画像を
大きな囲み画像へ
変えることができます。

画像blog-css-border-image02

↓border-imageを使って展開↓

画像blog-css-border-image52

さらに
一枚の大きな囲み画像を
そのまま入れることもできます。

しかし、
画像の切り取りなど
あつかいがとても難しいため

場合によっては、
border-imageを使わずに

画像加工ソフトで
完成した囲み画像を用意し

htmlの<img>
cssのbackground-image
を使って入れた方が

わかりやすく
早くできます。

なので
このプロパティborder-imageは

こういったやり方もあるのか
程度で見ていってください。

border-imageは、
5つの個別指定と
一括指定があります。

1:border-image-source
2:border-image-slice
3:border-image-width
4:border-image-repeat
5:border-image-outset

6:border-image

一括指定は
わかりにくいため説明は省きます。

1:border-image-source
  画像を入れる

2:border-image-slice
  画像をパーツごとに切り離す

3:border-image-width
  画像を表示する太さを決める

4:border-image-repeat
  辺の表示方法を決める

5:border-image-outset
  完成した囲み画像を広げる

それでは、
詳しく説明していきます。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>

【関連記事】cssプロパティborderについての説明

スポンサーリンク

cssプロパティborder-imageの説明

border-imageとは

border-image は
borderへ
画像を入れるために使います。

そして
border-imageは、
小さな元画像を
大きな囲み画像へ
変えることができます。

画像blog-css-border-image02
画像blog-css-border-image52

さらに
一枚の大きな囲み画像を
そのまま入れることもできます。

画像blog-css-border-image44

しかし、
画像の切り取りなどが
とても難しいため

場合によっては、
border-imageを使わずに

画像加工ソフトで
完成した囲み画像を用意し

htmlの<img>
cssのbackground-image
を使って入れた方が

わかりやすく、
早くできます。

border-imageの種類

5つの個別指定と1つの一括指定

border-imageは、
5つの個別指定と
1つの一括指定が
あります。

一括指定の説明は省きます。

1:border-image-source = 画像入力
2:border-image-slice  = 画像分割
3:border-image-width  = 表示太さ
4:border-image-repeat = 辺の表示方法
5:border-image-outset = 枠を広げる

6:border-image(一括指定)

1:border-image-source

border-image-sourceは、
URLを指定し、
元画像を入れます。

(例)

border-image-source: url(img/blog-css-border-image0001.png);

2:border-image-slice

border-image-sliceは値にpxをつけない

border-image-sliceは、
元画像をパーツごとに切り離し
border-imageが扱えるようにします。

border-image-sliceの値は、
px単位です。

ですが、
値の後にpxはつけず、
数字のみで指定します。
(pxをつけると、正常に機能しません)

(例)

border-image-slice: 100 250 250 250;
指定は(top right bottom left)の4回

border-image-sliceの
指定は
top right bottom left
の4カ所です。

この
4カ所の指定で
パーツを9個に分けます。

画像blog-css-border-image02
border-image-sliceの具体的な指定場所

border-image-sliceは、
top right bottom left の
4カ所を指定します。

(例)

border-image-slice: 32 32 32 32;

それでは、
どのカ所が top で
どのカ所が right
なのでしょうか。

詳しくは、
黄色の所です。

画像blog-css-border-image14
画像blog-css-border-image15
画像blog-css-border-image16
画像blog-css-border-image17
中央を使う時は fill を指定

fillを指定すると、
中央の5番を使うことができます。

そもそも、
borderは
境界線のためにあるので

これを使うことは
あまりないでしょう。

(例)

border-image-slice: 32 32 32 32 fill;
画像blog-css-border-image28
なぜborder-image-sliceは、たった4回の指定で9等分にできるのか

余談)

なぜborder-image-sliceは、

top right bottom left
たった4回の指定で
9等分にできるのか。

これを考えた人は
超天才なのでしょう。

top right bottom leftの
重なり合うところ
重なり合わないところ

これらをうまく利用すれば

top right bottom leftの
たった4回の指定で
9等分にすることができます。

文字では分かりにくいので、
画像をご覧ください。

1番目(top + left)
画像blog-css-border-image18
2番目(top − left − right)
画像blog-css-border-image19
3番目(top + right)
画像blog-css-border-image20
4番目(right − top − bottom)
画像blog-css-border-image21
5番目(全てに選ばれなかった場所)
画像blog-css-border-image22
6番目(right − top − bottom)
画像blog-css-border-image23
7番目(bottom + left)
画像blog-css-border-image24
8番目(bottom − right − left)
画像blog-css-border-image25
9番目(bottom + right)
画像blog-css-border-image26

3:border-image-width

画像の表示の太さを決める

border-image-widthは、

border-image-sliceで
切り取った画像を

どの太さで表示するかを
決めます。

よほどの理由がない限り
border-image-sliceと
同じ数値にします。

border-image-sliceを基本に拡大縮小もできる

border-image-widthは、

border-image-sliceより
大きな数値を入れると
画像は拡大されます。

border-image-widthは、

border-image-sliceより
小さな数値を入れると
画像は縮小されます。

ですが、
強引に拡大縮小するため
画像は荒くなります。

指定は、top right bottom left

指定は
top right bottom left
です。

例)

border-image-width: 32px 32px 32px 32px;
画像blog-css-border-image53
拡大しすぎると、画像は荒れる

border-image-widthへ、

border-image-sliceの
3倍の数値を入れると

↓画像が荒くなった。↓

画像blog-css-border-image54
border-image-widthは表示だけ、border-widthはボックスモデルの厚み

また、
border-image-widthと
border-widthは
別物です。

border-image-widthは、
表示だけで
ボックスモデルとしての
領域を持ちません。

なので

border-imageを使って
borderに画像を入れる時は

ボックスモデルの領域を持つ
border-widthの
設定も必要となります。

4:border-image-repeat

border-image-repeatは、辺の並び設定

border-image-repeatは、
辺の並びを設定します。

赤い部分の並び方です。

画像blog-css-border-image29
border-image-repeatの並びは4種類

border-image-repeatの
並びは4種類あります。

stretch引き伸ばしてでも1枚で入れる
repeat端数を無視して並べる
round端数が出たら
自身が拡大縮小する
space端数が出たら
あいだのスペースで
なんとかする
stretch

stretchは、
1枚を無理やり
ねじ込みます。

1枚の大きな画像を入れる時に
使います。

画像blog-css-border-image30
repeat

repeatは、
ただ並べていきます。

端数が出て
画像が欠けても気にしません。

画像blog-css-border-image31
round

roundは、
端数が出た時、
画像を
いい感じに拡大縮小します。

画像blog-css-border-image32
space

spaceは、
端数が出た時、
画像の形を保ったまま

間のスペースを
やりくりして
いい感じにしてくれます。

画像blog-css-border-image33
大幅に拡大するとroundとspaceの機能が逆転!?

余談)

border-image-widthで
画像を無理やり拡大した時、

round と space の
機能が逆転することがありました。

下の画像は)
border-image-widthで
3倍に拡大したroundの画像

画像blog-css-border-image54

下の画像は)
border-image-widthで
3倍に拡大したspaceの画像

画像blog-css-border-image55

なので、
round と space
表示を切り替えてみて

見た目がキレイな方を
選んでください。

5:border-image-outset

border-image-outsetは、外へ広げる

border-image-outsetは、
完成した囲み画像の
表示を広げるためにあります。

表示だけが広がり、
ボックスモデルの領域は
広がらないので

注意が必要です。

border-image-outsetのはみ出る様子
画像blog-css-border-image34

まず、
border-image-outsetではなく
border-widthだけを広げてみます。

画像blog-css-border-image35

次に
border-image-outsetで広げてみます。

画面から
はみ出ました。

画像blog-css-border-image36

注意)
border-imageの使用中
border-colorは使えません

上の例は、

あたかも
border-colorが
入っているように見せています。

ですが本当は、
border-image
border-color
の同時使用はできません。

cssプロパティborder-imageの具体例

小さい画像、大きい画像 2種類を作成

具体例では、
border-imageの使い方を
2種類紹介します。

1:小さい画像からの展開
2:大きな1枚の画像をそのまま使用

1:小さい画像からの展開

今からやること

今から小さな元画像を
大きな枠線へと展開していきます。

画像blog-css-border-image41

↓この形に展開↓

画像blog-css-border-image43

それでは
詳しくみていきましょう。

1 画像を用意する

96px × 96px の
画像を用意しました。

これを9等分して使うので
分割された1個の大きさは
32px × 32px
となります。

画像blog-css-border-image41
2 border-imageを表示するため border-style: solid; にする
border-style: solid;

border-imageを表示させるため
border-style: solid;
を入れます。

3 画像を入力する
border-image-source: url(img/blog-css-border-image0001.png);

border-image-sourceを
使って画像を入れます。

画像blog-css-border-image41
4 border-image-sliceを使って画像を分割
border-image-slice: 32 32 32 32;

(注意)値にpxをつけると
正常に動作しなくなります。

border-image-sliceを
使って画像を9個に分割します。

画像blog-css-border-image42
5 border-image-widthを使って太さを決めます。
border-image-width: 32px 32px 32px 32px;

border-image-widthで
表示する太さを決めます。

特に拡大縮小しないのであれば
border-image-sliceで
入れた数値と同じにします。

6 border-widthを使って、表示する厚みを決めます。
border-width: 32px;

border-widthを使って
border-image-widthを入れる
厚みを作ります。

7 border-image-repeatを使って、辺の表示方法を決めます。
border-image-repeat: round;

border-image-repeatを使って、
辺の表示方法を決めます。

今回のような
小さい画像を展開する場合は、

round と space
の選択肢が考えられます。

両方ためして、
見栄えが良い方を
使ってください。

おすすめは round です。

8 完成

これで完成です。

画像blog-css-border-image43

2:大きな1枚の画像をそのまま使用

今からやること

1枚の大きな画像を
そのまま入れます。

せっかくですので、
中に文字も入れてみましょう。

画像blog-css-border-image51
小さい画像と、1枚の大きい画像の違い

小さい画像を展開する
やり方と

1枚の大きな画像を入れる
やり方との違いは

小さい画像の展開は
2 4 6 8
辺をたくさん並べていました。

画像blog-css-border-image43

しかし、
大きい画像は
辺をたくさん並べたりせずに、
辺を1つにします。

画像blog-css-border-image51
画像 入れる場所が、同じ大きさなら全てのパーツはピッタリおさまる

難しく聞こえるかも
しれませんが

画像と
置く場所を
同じ大きさにすれば

入れる物
入れる器
が、同じ大きさとなるため

どのように
分割しても
画像をぴったり入れることができます。

それでは
詳しくみていきましょう。

1 画像を用意する

width: 800px;
height: 647px;
の、画像を用意しました。

画像blog-css-border-image44

これを
上手に切り取って使います。

2 box-sizing: border-box; を入れてボックスモデルをborder-boxにします。
box-sizing: border-box;

borderへ画像を入れるため
 画像の大きさ = border領域
にします。

画像blog-css-list01-01

これにより、
画像 = border領域
と、そろえることができます。

3 width、heightを入れる
width: 800px;
height: 647px;

画像の大きさと同じ数値を
width、heightへ入れます。

今現在
box-sizing: border-box; が
入っています。

なので、
width height は、
borderの幅、高さになります。

画像blog-css-list01-01

画像(800×647)= border(800×647)
今このような状態になっています

なので、
たとえ画像を切り刻んでも

borderへは
パズルを組み立てるみたいに
きれいに収まります。

4 border-imageを表示するため border-style: solid; にする
border-style: solid;

border-imageを表示させるため
border-style: solid;
を入れます。

5 画像を入力する
border-image-source: url(img/blog-css-border-image0005.png);

border-image-sourceを
使って画像を入れます。

画像blog-css-border-image44
6 border-image-sliceを使って画像を分割
border-image-slice: 100 250 220 250;

(注意)単位のpxをつけると
正常に動作しなくなります。

border-image-sliceを使って、
画像を分割します。

border-image-slice: 100 250 220 250;

100 = top
250 = right
220 = bottom
250 = left
この順番で分割されます。

画像が入っている所を
上手に切り取ります。

top = 100

画像blog-css-border-image45

right = 250

画像blog-css-border-image46

bottom = 220

画像blog-css-border-image47

left = 250

画像blog-css-border-image48
7 border-image-widthを使って表示の太さを決めます。
border-image-width: 100px 250px 220px 250px;

border-image-widthで
表示する太さを決めます。

border-image-sliceで
入れた数値と同じにします。

8 border-image-repeatを使って、辺の表示方法を決めます。
border-image-repeat: stretch;

border-image-repeatを使って、
辺の表示方法を決めます。

辺は1つしかないので
stretch
を使います。

9 文字を入れるcontentの大きさを決める
background-clip: content-box;
background-color: black;
border-width: 120px 180px 220px 180px;
color: white;

文字を入れるcontentの幅、高さを
border-widthで調節して決めます。

分かりやすくするため
 ・content = 黒
 ・文字  = 白
にしました。

そして、
box-sizing: border-box;
のため

width height を変えると
contentの大きさではなく
borderの大きさが変わります。

画像blog-css-list01-01

なので、
contentの大きさは
直接数値を入れて
決めることができません。

ですので、
border-widthを使って
外側からcontentを
圧縮することにより

contentの大きさを調節します。

画像blog-css-border-image50
10 完成
background-color: white;
color:black;

中の文字を
見えるようにして、

完成です。

画像blog-css-border-image51

まとめ

border-image

border-imageは
borderへ
画像を入れるために使う。

border-imageはあつかいが難しい

border-imageは
あつかいが難しいため
無理してこれを使わずとも、

画像加工ソフトなどで
完成した囲み画像を用意し

htmlの<img>
cssのbackground-image
を使って入れた方が早い。

border-image5つの個別指定+一括指定

border-imageは、
5つの個別指定と
1つの一括指定がある。

1:border-image-source 画像入力
2:border-image-slice  画像分割
3:border-image-width  画像の太さ
4:border-image-repeat 辺の表示方法
5:border-image-outset 枠を広げる

6:border-image 一括指定

border-imageは、小さな画像を大きな囲み画像へ

border-imageは、
小さな画像を元に
大きな囲み画像に変えることができる。

画像blog-css-border-image41

↓大きい画像へ展開↓

画像blog-css-border-image43
border-imageは、大きな1枚の画像を入れられる

border-imageは、
大きな1枚の画像を
入れることができる。

画像blog-css-border-image51

ただし、
box-sizing: border-box;
を入れて

画像の幅、高さと
width、heightとを
同じにする必要がある。

border-image使用中、border-colorは表示されない

border-imageを使っているときは
border-colorは表示されない。

【関連記事】css プロパティ一覧(ボックスモデル、文字、画像)

以上、
border-image
の話でした。

ありがとうございました。

タイトルとURLをコピーしました