css「border-image」は「border」へ画像を入れるプロパティ(html,css)

サムネblog-css-border-image102

こんにちはtanakaです。

今回は、
cssプロパティ「border-image」の説明です。

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

画像blog-css-list01-01

「border-image」は、

1:元画像を9分割にする
2:9分割した元画像をそれぞれの「4つの辺」「4つの角」に配置する

この手順で画像を入れます。

しかし

「border-image」は、
分割の仕組みが非常に難しく作られています。

そのため

このプロパティを使うことはおすすめできません。

なので

ページへ画像を入れるときは、

1:htmlの<img>
2:css「background-image」

こちらの2つを使った方が良いでしょう。

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

文字化けします

<コピー、ペーストすると文字化けします>

このページのコードをコピー、ペーストすると
「ダブルクオーテーションなどの一部が文字化け」
して正常に機能しなくなります。

十分ご注意ください。

「border-image」使い方

「border-image」の使い方を説明します。

「border-image」は、
以下の手順で使います。

1:元画像を9つに分解
2:それぞれの「4つの辺」と「4つの角」へ当てはめる

これでは分かりにくいので画像を交えて説明します。

<「border-image」例>

「border-image」は、
以下の手順で使います。

1:元画像を9つに分解
2:それぞれの「4つの辺」と「4つの角」へ当てはめる

詳しく説明していきます。

<1:元画像を9つに分解>

まずは元画像を利用しやすくするため9分割にします。

画像blog-css-border-image41

< 2:それぞれの「4つの辺」と「4つの角」へ当てはめる>

9つに分割した画像を
それぞれの「4つの辺」と「4つの角」へ当てはめていきます。

画像blog-css-border-image43

これで完成です。

難解な「border-image」

「border-image」は、
非常に難解なため、おすすめできません。

なぜ「おすすめできない」のでしょうか?

それは

「border-image-sliceの分割ルール」が
とても難しいだからです。

「border-image-sliceの分割ルール」とは、
元画像を「4つの指定」で「9つに分割」するルールです。

そのルールが、
とても複雑にできています。

自分だけで作るのならいいのですが
コードを他の人に見せるとなると説明が必要になります。

なので

「border-image」は、
おすすめできません。

「border-image」3つの注意点

詳しい話を始める前に
「border-image」の注意点を説明します。

<「border-image」3つの注意点>

注意点は3つあります。

1:「border-image」「border-color」同時に使えない。
2:「border-style: solid」が必要。
3:「border-width」が必要。

「border-style: none」だと表示されなので注意してください。

「border-image」「border-color」同時に使えない。

「border-image」の使用中は「border-color」 が使えません。

つまり

1:「border-image」
2:「border-color」

どちらか一方しか使えません。

「border-style: solid」「border-width」が必要

「border-image」は、
ボックスモデル「border」プロパティの影響を受けます。

なので

1:「border-style: solid」
2:「border-width: ○○px」

この2つの設定が必要です。

border-style: solid; ←「none」だと表示されない
border-width: 32px; ←「border-image」は、おさまる場所が必要。

「border-image」のプロパティ

「border-image」プロパティ群の説明をします。

「border-image」のプロパティは、
それぞれ役目が分かれています。

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

「border-image」には「一括指定」もありますが
今回は省略します。

border-image-source(画像入力)

「border-image-source」は、
URLを指定して「元画像」を入力します。

border-image-source: url(img/number01.png);

border-image-slice(画像分割)

「border-image-slice」は、
元画像を9分割します。

px単位ですが、
値の後にはpxをつけず「数字のみで指定」します。

(pxをつけると、正常に動作しません)

border-image-slice: 100 250 250 250;

この「border-image-slice」は、
難解なので詳しく説明します。

「border-image-slice」4つの値の場所

「border-image-slice」値は4つです。

border-image-slice: 100 250 250 250; ←top、right、bottom、left

この4つの値は、
どこを示しているのでしょうか?

それは以下の通りです。

<「border-image-slice」4つの値>

「border-image-slice」の値は、

1:top
2:right
3:bottom
4:left

4カ所です。

border-image-slice: 32 32 32 32;

border-image-slice: top right bottom left;

詳しく説明します。

<1:top>

「top」は、
黄色い部分の「高さ」を指定します。

画像blog-css-border-image14

<2:right>

「right」は、
黄色い部分の「幅」を指定します。

画像blog-css-border-image15

<3:bottom>

「bottom」は、
黄色い部分の「高さ」を指定します。

画像blog-css-border-image16

<4:left>

「left」は、
黄色い部分の「幅」を指定します。

画像blog-css-border-image17

この4つの指定で「元画像を9分割」します。

4つの指定で9分割!?

ここで「あれ?」と思われた方もいるでしょう。

そうです

指定は「4つ」です。

たった「4つ」で、
画像を9分割しています。

一体どうやっているのでしょうか?

詳しく説明します。

<4つの指定で9分割? 合理的な指定法>

なぜ4つの指定で9分割できるのでしょうか?

それは「top」「right」「bottom」「left」の

重なり合うところ
重なり合わないところ

これらをうまく「足したり」「引いたり」すれば
9分割にすることが可能です。

それでは、
実際にその様子を見てみましょう。

<9分割の様子>

今から
「top」「right」「bottom」「left」を使って
「1〜9」の9分割にします。

1から順番にいきます。

<1の領域>

1の領域を作るには、
「top」「left」を使用します。

「top」「left」の領域が重なった所、
それが「1の領域」です。

画像blog-css-border-image18

<2の領域>

2の領域を作るには、
「top」「right」「left」を使用します。

「top」から「right」「left」の領域を除いた所、
それが「2の領域」です。

「2の領域」=「top」-「right」-「left」

画像blog-css-border-image19

<3の領域>

3の領域を作るには、
「top」「right」を使用します。

「top」「right」の領域が重なった所、
それが「3の領域」です。

画像blog-css-border-image20

<4の領域>

4の領域を作るには、
「left」「top」「bottom」を使用します。

「left」から「top」「bottom」の領域を除いた所、
それが「4の領域」です。

「4の領域」=「left」-「top」-「bottom」

画像blog-css-border-image21

<5の領域>

5の領域を作るには、
「top」「right」「bottom」「left」全てを使用します。

「top」「right」「bottom」「left」の領域の重ならなかった所、
それが「5の領域」です。

画像blog-css-border-image22

<6の領域>

6の領域を作るには、
「right」「top」「bottom」を使用します。

「right」から「top」「bottom」の領域を除いた所、
それが「6の領域」です。

「6の領域」=「right」-「top」-「bottom」

画像blog-css-border-image23

<7の領域>

7の領域を作るには、
「bottom」「left」を使用します。

「bottom」「left」の領域が重なった所、
それが「7の領域」です。

画像blog-css-border-image24

<8の領域>

8の領域を作るには、
を使用します。

「bottom」から「right」「left」の領域を除いた所、
それが「8の領域」です。

「8の領域」=「bottom」-「right」-「left」

画像blog-css-border-image25

<9の領域>

9の領域を作るには、
「right」「bottom」を使用します。

「right」「bottom」の領域が重なった所、
それが「9の領域」です。

画像blog-css-border-image26

<中央「5の領域」を使うには「fill」を使う>

「border-image」は、
囲み画像のプロパティです。

基本的に周辺部分だけ使います。

しかし

ごくまれに「5の領域」である中央を使うことがあるかもしれません。

そのときは「fill」を使います。

border-image-slice: 32 32 32 32 fill;

そうすると中央「5の領域」も使うことができます。

<「fill」あり>

画像blog-css-border-image28

<「fill」なし>

画像blog-css-border-image27

border-image-width(表示太さ)

「border-image-width」は、
表示の太さを決めるプロパティです。

切り取った画像を
どの位の太さで表示するかを決めます。

「border-image-width」の値は、
「top」「right」「bottom」「left」それぞれの辺になります。

特別な理由がない限り「border-image-slice」と同じ数値にします。

border-image-slice: 32 32 32 32;

border-image-width: 32px 32px 32px 32px; ←スライスと同じ値にする

「border-image-width」は、
大きい数値を入れると拡大され、

小さい数値を入れると縮小されます。

border-image-repeat(辺の表示方法)

「border-image-repeat」は、
それぞれの辺をどのように並べるか設定します。

「赤い部分」の並び方です。

画像blog-css-border-image29

「border-image-repeat」は、
4種類の並べ方があります。

1:stretch(切り取った元画像1枚で埋める)
2:repeat(端数を無視して並べる)
3:round(端数が出たら拡大縮小する)
4:space(端数が出たらあいだのスペースでなんとかする)

それぞれ
詳しく説明します。

<1:stretch>

「stretch」は、
切り取った元画像を引き伸ばしてでも1枚で埋めます。

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

画像blog-css-border-image30
border-image-repeat: stretch;

<2:repeat>

「repeat」は、
切り取った元画像を端数無視で並べます。

画像が欠けてもそのままです。

画像blog-css-border-image31
border-image-repeat: repeat;

<3:round>

「round」は、
切り取った元画像に端数が出たら「拡大縮小して」並べます。

画像blog-css-border-image32
border-image-repeat: round;

< 4:space>

「space」は、
切り取った元画像に端数が出たら「あいだのスペースでなんとかして」並べます。

画像blog-css-border-image33
border-image-repeat: space;

border-image-outset(枠を広げる)

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

そもそも

表示を広げること自体あまりないので

「border-image-outset」は、
使うことが少ないプロパティです。

border-image-outset: 32px 32px 32px 32px; ←上右下左

<「border-image-outset」と「border-width」

ここで「2つの広げる」を比較してみます。

1:「border-width」を大きくしたとき
2:「border-image-outset」を使ったとき

この2つ見比べてみます。

広げる前の画像はこれです。

緑色の部分は「border」の領域とします。

画像blog-css-border-image34

<1:「border-width」を大きくしたとき>

「border-width」の領域をおきくしてみます。

どうなるでしょうか?

画像blog-css-border-image35

結果は、
「border-image」はそのままに
「border-width」の領域だけが広がっています。

<2:「border-image-outset」を使ったとき>

次は、
上の状態へ「border-image-outset」を使って表示を広げてみます。

どうなるでしょうか?

画像blog-css-border-image36

結果は、
「border-width」の領域外へ
「border-image」が広がっています。

さらに

左側は、
画面の外へ出てしまいました。

このことから

「border-image-outset」は、
ただ表示を広げる機能だということが分かります。

「border-image」使ってみよう!

それでは、
実際に「border-image」を使って何か作ってみましょう。

作るものは2つです。

1:小さい画像を大きく展開
2:大きな1枚の画像をそのまま利用する

それでは、
作っていきましょう。

小さい画像を大きく展開

1つ目は、
「小さい画像」から「大きい画像」へ展開するものを作っていきます。

用意した「小さい画像」はこちらです。

画像blog-css-border-image41

そして

下のような「大きい画像」へ展開します。

画像blog-css-border-image43

作成手順

作成手順は以下の通りです。

1:画像を用意
2:「border-style: solid」にする
3:画像を入力
4:画像を分割
5:太さを決める
6:厚みを決める
7:表示方法を決める
8:完成

上から順番に説明します。

<1:画像を用意>

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

画像blog-css-border-image41

この画像を9分割の「32px × 32px」にして使います。

<2:「border-style: solid」にする>

border-imageを表示するため
「border-style: solid」にします。

border-imageは、
「border-style: none」だと表示されません。

border-style: solid;

<3:画像を入力>

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

画像blog-css-border-image41
border-image-source: url(img/image01.png);

<4:画像を分割>

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

画像blog-css-border-image42
border-image-slice: 32 32 32 32;

(注意)単位はpxですが、値の後ろにpxをつけると正常に動作しなくなります。

<5:太さを決める>

「border-image-width」を使って表示する太さを決めます。

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

border-image-width: 32px 32px 32px 32px;

<6:厚みを決める>

「border-width」を使って厚みを作ります。

border-width: 32px;

<7:表示方法を決める>

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

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

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

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

おすすめは「round」です。

border-image-repeat: round;

<8:完成>

完成です。

画像blog-css-border-image43

大きな1枚の画像をそのまま利用する

2つ目は、
「1枚の大きな画像」を「そのまま」展開します。

用意した「画像」はこちらです。

画像blog-css-border-image44

せっかくですので中に文字を入れてみます。

完成は、以下のようになります、

画像blog-css-border-image51

大きな1枚の画像をどうやって入れる?

大きな1枚の画像をどうやって入れるのでしょうか?

それは

大きな1枚の画像を入れるには、
「画像の寸法」と「入れる場所の寸法」を同じにします。

「画像の大きさ」 = 「入れる場所の大きさ」

あとは適切にカットすれば、
キレイにおさまります。

作成手順

作成手順は以下の通りです。

1:画像を用意
2:「box-sizing: border-box」にする
3:width、heightを入れる
4:「border-style: solid」にする
5:画像を入力
6:画像を分割
7:太さを決める
8:表示方法を決める
9:contentの大きさを決める
10:完成

上から順番に説明します。

<1:画像を用意する>

画像を用意しました。

画像blog-css-border-image44

寸法は、以下の通りです。

width: 800px;
height: 647px;

<2:box-sizing: border-boxにする>

計算しやすくするため
「box-sizing: border-box」にします。

なぜ「box-sizing: border-box」が計算しやすいのでしょうか?

それは

「border」へ画像を入れるからです。

ということはつまり

画像の寸法 = 「border」の寸法

画像の幅、高さ = width、height

になります。

画像blog-css-list01-01
box-sizing: border-box;

<3:width、heightを入れる>

width、heightを入れます。

画像blog-css-border-image44

画像の寸法が

width: 800px;
height: 647px;

でした。

なので

画像を入れる場所も

width: 800px;
height: 647px;

になります。

<4:「border-style: solid」にする>

border-imageを表示するため
「border-style: solid」にします。

border-imageは、
「border-style: none」だと表示されません。

border-style: solid;

<5:画像を入力>

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

画像blog-css-border-image44
border-image-source: url(img/image002.png);

<6:画像を分割>

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

border-image-slice: 100 250 220 250;

(注意)単位はpxですが、数値の後にpxをつけると正常に動作しません。

ここが一番難しい所です。

今から元画像をカットしていくのですが
必要な部分だけカットしていきます。

カットする部分は「top」「right」「bottom」「left」の4ヶ所です。

border-image-slice: 100 250 220 250; ←「top」「right」「bottom」「left」

それでは、
どの部分が「top」「right」「bottom」「left」なのでしょうか?

それは以下の通りです。

<top>

「top」です。
切り取る大きさは「100px」です。

画像blog-css-border-image45
border-image-slice: 100 250 220 250;

<right>

「right」です。
切り取る大きさは「250px」です。

画像blog-css-border-image46
border-image-slice: 100 250 220 250;

<bottom>

「bottom」です。
切り取る大きさは「220px」です。

画像blog-css-border-image47
border-image-slice: 100 250 220 250;

<left>

「left」です。
切り取る大きさは「250px」です。

画像blog-css-border-image48
border-image-slice: 100 250 220 250;

<7:太さを決める>

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

「border-image-slice」と同じ数値にします。

border-image-width: 100px 250px 220px 250px;

<8:辺の表示方法を決める>

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

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

border-image-repeat: stretch;

<9:contentの大きさを決める>

文字を入れる「content」の幅、高さを決めます。

画像blog-css-border-image50

内側の黒い部分が「content」です。

「content」は、
直接数値を入れるのではなく
「border-width」を調節して決めます。

つまり

黒い部分から見て外側の「border-width」の大きさを決めることによって
「content」が決まります。

background-clip: content-box;
background-color: black;
border-width: 120px 180px 220px 180px;
color: white;

<10:完成>

color:black;
background-color: white;

中の文字を見えるように「文字は黒」「背景は白」にします。

画像blog-css-border-image51

完成です。

「border-image」まとめ

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

画像blog-css-list01-01

「border-image」は、
以下の手順で画像を入れます。

1:元画像を9分割にする
2:9分割した元画像をそれぞれの「4つの辺」「4つの角」に配置する

しかし

「border-image」は、
非常に難しいため使うことはおすすめしません。

画像を入れるときは、

1:htmlの<img>
2:css「background-image」

こちらの2つを使った方が良いでしょう。

<「border-image」5つのプロパティ>

「border-image」には、
5つのプロパティと一括設定があります。

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

「border-image」の一括設定は省略しています。

<「border-image」3つの注意点>

使う上での注意点は、3つあります。

1:「border-image」「border-color」同時に使えない。
2:「border-style: solid」が必要。
3:「border-width」が必要。

「border-style: none」だと表示されなので注意してください。

以上、
css「border-image」は「border」へ画像を入れるプロパティ(html,css)
の話でした。

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

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