【13-2】border-imageと border-imageのショートハンド

最終更新日:2017年09月23日  (初回投稿日:2015年12月07日)

CSS3から border-image プロパティが登場し、ボックスのボーダーに画像を表示できるようになりました。

border-image は、上下左右4つの4つの真ん中の部分 計9個 に画像を分割して、ボーダー領域borderプロパティで作られたボーダーの範囲) に自動で当てはめてくれます。

本日のINDEX
  1. ボーダーに画像を表示させる
  2. border-image のプロパティ
    1. border-image-source で画像を指定
    2. border-image-slice でスライスする
    3. border-image-width で幅を変更できる
    4. border-image-outset で外側に広げられる
    5. border-image-repeat でボーダーの繰り返しかたを指定
  3. border-image のショートハンド
  4. 一目でわかる!便利なシミュレーションサイト
  5. 対応ブラウザとベンダープレフィックス

参考資料:CSS Backgrounds and Borders Module Level 3

ボーダーに画像を表示させる

まずはサンプルを見てください。

こんなかんじで、要素のボーダーに画像を適用できます。

ボーダー用画像の真ん中の部分を、要素の背景として活かすこともできます。

使用している画像は↓コレ。

<div id="sample0">
<p>こんなかんじで、要素のボーダーに画像を適用できます。</p>
<p id="fill">ボーダー用画像の真ん中の部分を、要素の背景として活かすこともできます。</p>
</div>
div#sample0 p{
	margin:0.5em 0 3em;
	padding:1em;
	border:solid 20px;
	border-image-source:url("images/img03.jpg"); /*ボーダー用の画像を指定*/
	border-image-slice:20;  /*画像のスライスを指定*/
	border-image-width:1;  /*ボーダーの幅を指定*/
	border-image-outset:0;  /*ボーダー領域からの拡張を指定*/
	border-image-repeat:stretch;}  /*画像のリピートのしかたを指定*/
div#sample0	p#fill {
	border-image-slice:20 fill;}  /*スライスで fill を加えると画像の真ん中がイキ*/

border-image のプロパティ

border-image で使用するプロパティ一覧です。

線に画像を使用
するための
プロパティ
border-image-source 使用する画像ファイルのURLを指定
border-image-slice 画像のスライス(分割位置)を指定
border-image-width ボーダー画像の幅を指定
これを指定しなければborder-widthと同じになる
border-image-outset イメージエリアを外側に広げる
border-image-repeat ボーダー画像の繰り返しかたを指定
border-image まとめて書くためのショートハンドプロパティ

では、プロパティを1つずつ、サンプルで確認していきましょう。
以下のサンプルでは、この画像を使っています。

border-image-source で画像を指定

まず border-image-source で画像を指定します。sourceはソースね。元になる画像。
border-image-source: url ("画像のURL") というカタチでURLを指定します。

border-image-source の値
none デフォルト値。画像無し
画像のURL url ("画像のURL") 相対パス・絶対パスどちらでもOK
値の継承 なし 適用できる要素 全部
(ただしテーブル内の要素で border-collapseプロパティの値が collapseのモノはダメ)

border-style でボーダーが指定されていて、border-widthの値があればborder-image-source だけでもとりあえず画像が表示されます(スライスの値がまだデフォルトのままなので、画像全体が4つの角に表示されるだけですが)。

border-width の指定が無くても、 border-image-width で幅を指定すれば表示されます。詳細は border-image-width で。

サンプル1
border-image-source: url("images/img01.jpg") のみ指定
(4つの角に画像が100%で表示されています)

p#sample1 {
	padding:1em;
	border:solid 30px;
	border-image-source:url("images/img01.jpg"); /*ボーダー用の画像*/
    }

border-image-slice でスライスする

次に border-image-slice で指定した画像を9つにスライスします。

スライスのしかたは、上から、右から、下から、左からの距離で指定します。
この4つの距離を指定すれば、自然に4つのコーナー、4つの辺、真ん中 の9パーツに分けられます。

デフォルト値は「100%」。画像全体がコーナーに表示されます。スライスを切っていないので、辺の部分は表示されません。(これが先ほどのサンプル1の状態だったわけですね)

border-style でボーダーが指定されていて、border-widthの値があれば、先ほどの border-image-source と、この border-image-slice でボーダーイメージを表示できます。

スライスと ボーダーの幅は同じじゃなくてもOK
例えばレティーナ対応で画像サイズを2〜3倍にしても、ボーダーの幅に縮小して収めてくれます。

border-image-slice の値
パーセント 画像の幅や高さに対しての %で指定。デフォルトは100%
数値 ピクセルの数値。単位無しで指定
fill これはちょっと特別な値。画像の中央部分をボックスの背景として表示できます。
単独ではなく、%や数値の値の後に「半角スペース」で区切って使います。
値の継承 なし 適用できる要素 全部
(ただしテーブル内の要素で border-collapseプロパティの値が collapseのモノはダメ)

値は 1つ〜4つで、「半角スペース」で区切って指定します。
fill も使えば最高5つの値を書くことになるね。全部「半角スペース」区切り)

値が1つの場合、上下左右全部同じ値でスライスしたってこと。
4つの辺がビヨ〜ンと伸びていますが、これは border-image-repeat の値が まだデフォルトの stretch だからです。他の値に変更可能。詳しくは記事後半で。

サンプル
border:solid 30px;
border-image-slice: 30

値が2つ上下、左右の値。

サンプル
border-style:solid;
border-width: 30px 15px;
(border-width↑ も連動させて30px 15pxにします)
border-image-slice: 30 15

値が3つ上、左右、下の値。

サンプル
border-style:solid;
border-width: 30px 15px 20px;
border-image-slice: 30 15 20

値が4つなら上、右、下、左の値。

サンプル
border-style:solid;
border-width: 30px 10px 20px 15px;
border-image-slice: 30 10 20 15

fill も使うと値が最高5つになります。

サンプル
border-style:solid;
border-width: 30px 10px 20px 15px;
border-image-slice: 30 10 20 15 fill

上記までのサンプルで使用した画像は 30px角でスライスすれば最適なように作っていますので、スライスの切り方をいろいろ変えるとヘンな表示になっちゃいますね。
数値にマッチした画像ならイイかんじに表示されます。(画像に合わせて数値を指定する、って言い方のほうが合ってますね)

border-style: solid;
border-width: 30px 15px 17px;
border-image-slice: 30 15 17

このサンプルで使用している画像はコレです。

p#sample1 {
	padding:1em;
	border-style:solid;  /*border-styleでボーダーを指定(無いと画像が表示されません)*/
	border-width:30px 15px 17px; /*ボーダーの太さを指定(コレが無いとデフォのmediumに)*/
	border-image-source:url("images/img06.jpg"); /*ボーダー用の画像を指定*/
    border-image-slice:30 15 17; /*ボーダー用画像のスライスを指定*/
    }

border-image-slice の fill が便利!

border-image-sliceで、画像の「4つのコーナー」「4つの辺」は適材適所に表示されて、残りの「中央部分」は使用されないのがデフォルト仕様です。

しかし、border-image-sliceの値の後に「半角スペース」で区切って fill を指定すると、画像の中央部分も要素の背景として表示することができます。これは使えますね。

border-style: solid;
border-width: 30px 15px 17px;
border-image-slice: 30 15 17 fill

p#sample {
	padding:1em;
	border-style:solid;
    border-width:30px 15px 17px;
	border-image-source:url("images/img06.jpg");
    border-image-slice:30 15 17 fill; /*画像のスライスにfillを指定*/
    }

スライスがデフォルトの border-image-slice: 100% だった場合、ここに fill を追加しても中央部分は表示されません。スライスを切ってないから画像の中央部分が無いわけで。(辺も無い)

border: solid 30px;
border-image-slice: 100% fill

border-image-width で幅を変更できる

ここ↑までで、どうもborder-image の幅は、border-width と同じになるようです。

これは、border-image-widthデフォルト値が「1だから。
「1」は「border-width の1倍(等倍)」という意味。やはり borderプロパティでの幅の指定と深く関わっているんですね。

ただ、border-image-width では、borderを指定せずに、pxやemや%で指定したり、border-image-sliceと同じ値にしたりもできます。
(できるけど、やはり borderプロパティで幅を指定したほうがイイわ。まあサンプルをみてください)

border-image-width の値
数値 単位無しで border-widthの倍数で指定。デフォルトは1
数値
(サイズ)
px や em などの単位を使って、そのまま太さを指定します。
パーセント 要素のボーダー領域を含む幅や高さに対しての割合を %で指定
auto border-image-sliceと同じ値になります。
値の継承 なし 適用できる要素 全部
(ただしテーブル内の要素で border-collapseプロパティの値が collapseのモノはダメ)

こちらも、先ほどのスライスと同じように、1〜4つの値で指定できます。
値が1つの場合、上下左右全部同じ値。
値が2つの場合、上下、左右の値ということ。
値が3つの場合、上、左右、下の値ということ。
値が4つの場合、上、右、下、左の値ということ。

サンプルは、border 指定無しで、border-image-width はピクセル指定しています。
確かにボーダー画像の幅は指定できましたが、border 無しだとボーダーの領域が無くなってしまうのでレイアウトを整えるために padding で調整が必要です。

border-image-slice: 30 15 17;
border-image-width: 30px 15px 17px

p#sample {
	padding:1em;
	/*border-styleやborder-widthは指定していません*/
	border-image-source:url("images/img06.jpg"); /*画像のURLを指定*/
    border-image-slice:30 15 17; /*画像のスライスを指定*/
    border-image-width:30px 15px 17px; /*画像の太さをpxで指定*/
    }

次のサンプルは、border 指定ありで、border-image-width を0.5にしています。
border-width で指定した幅の半分にちゃんとなっていますね。
ボーダー領域内で、領域の外側の境界線を守って痩せているのがわかります。(paddingが増えてる感じがするけど、そうじゃない)

border-style: solid;
border-width: 30px 15px 17px;
border-image-slice: 30 15 17;
border-image-width: 0.5

p#sample {
	padding:1em;
	border-style:solid;  /*border-styleが無いとダメ*/
	border-width:30px 15px 17px;  /*border-widthを基準にするので無いとダメ*/
	border-image-source:url("images/img06.jpg"); /*画像のURLを指定*/
    border-image-slice:30 15 17; /*画像のスライスを指定*/
    border-image-width:0.5; /*画像の太さをborder-widthを基準に指定*/
    }

逆に border-image-width を1.5に太らせてみると、やはり border-width で指定したボーダー領域の外側の境界線から内側に太っていますね。

border-style: solid;
border-width: 30px 15px 17px;
border-image-slice: 30 15 17;
border-image-width: 1.5

%のサンプルその1。ボーダー指定あり
ボーダー領域も含んだ要素の幅と高さに対しての%です。
ボーダーの太さは上下左右30pxにしました。
border-image-width は、上は20%、左右は2%、下は10%で指定。

border: solid 30px;
border-image-slice: 30 15 17;
border-image-width: 20% 2% 10%

%のサンプルその2。ボーダー指定無し
ボーダー領域が無くなって、さっきより高さが小さくなりました。
ですので先ほどと同じ指定ですが、上と下の辺は細く見えますね。

border-image-slice: 30 15 17;
border-image-width: 20% 2% 10%

autoのサンプルです。border 無しで使うと border-image-slice の値と同じになるんですよね。
最初の border 無しで border-image-width:30px 15px 17px と指定したのと同じです。

border-image-slice: 30 15 17;
border-image-width: auto

p#sample {
	padding:1em;
	/*border指定無し*/
	border-image-source:url("images/img06.jpg"); /*画像のURLを指定*/
    border-image-slice:30 15 17; /*画像のスライスを指定*/
    border-image-width:auto; /*画像の太さをautoに指定*/
    }

border-image-width のサンプルをいろいろ作っていて思ったこと。
コレいらない(笑)
ボーダー領域が無いと非常に扱いづらいので結局 borderを指定する。それならこの border-image-width は不要かと(デフォが1なので)。(ここまで読んでいただいてコレではアレですが。笑)
太さを変える必要があるときだけ、このプロパティで倍数(単位無し)指定すれば良いと思います。

border-image-outset で外側に広げられる

border-image-outset は、ボーダー領域の外側にボーダーイメージを広げることができます。
デフォルト値は「0」です。

border-image-outset の値
数値 単位無しでborder-widthの倍数で指定。デフォルトは0
数値
(サイズ)
px や em などの単位を使えば、そのまま広げるサイズを指定できます。
値の継承 なし 適用できる要素 全部
(ただしテーブル内の要素で border-collapseプロパティの値が collapseのモノはダメ)

こちらも、先ほどのスライスと同じように、1〜4つの値で指定できます。
値が1つの場合、上下左右全部同じ値。
値が2つの場合、上下、左右の値ということ。
値が3つの場合、上、左右、下の値ということ。
値が4つの場合、上、右、下、左の値ということ。

下のサンプルは、border-image-outset:2em; で指定。ボーダー領域より2em 外側に広がりました。おかげでこのテキストとくっついてますね。
ボーダー領域そのものが大きくなるわけではないので、他のレイアウトに影響を及ぼしていません。ボーダーイメージは異なるレイヤーで浮いているようなかんじなんですね。

border-style: solid;
border-width: 30px 15px 17px;
border-image-slice: 30 15 17;
border-image-outset: 2em

次は、単位無しで指定。「0 0 4」で、上と左右は0、下だけ4にしてみました。
border-bottom-width が 17px ですので、17×4 で 68px 下側に広がったわけです。

border-style: solid;
border-width: 30px 15px 17px;
border-image-slice: 30 15 17;
border-image-outset: 0 0 4

border-image-repeat でボーダーの繰り返しかたを指定

border-image-repeat は、ボーダーの「辺」の部分の繰り返しかたを指定します。

値は4つのキーワードだけ。
そして、このプロパティは1〜2つまでのキーワードで指定します。
値が1つの場合、上下左右全部同じ値。
値が2つの場合、上下、左右の値ということ。

border-image-repeat の値
stretch デフォルト値。画像の繰り返し無し
領域いっぱいまで、横の辺は横向きに、縦の辺は縦向きに引き伸ばされます
repeat 画像を繰り返して表示します
round 画像を繰り返して表示します。領域にピッタリ収まるように、サイズ調整されます
space 画像を繰り返して表示します。領域にピッタリ収まるように、スペース調整されます
値の継承 なし 適用できる要素 全部
(ただしテーブル内の要素で border-collapseプロパティの値が collapseのモノはダメ)

デフォルトの stretch です。border-image-repeat を指定しなければコレ。

border-image-repeat: stretch

repeat ではこんなかんじ。辺の中心からリピートがスタートするようです。
要素の幅や高さが画像のスライスとピッタリ合っていなければ、おかしなところで切れたりします。

border-image-repeat: repeat

round です。横方向・縦方向に拡大縮小してピッタリ収めてくれます。

border-image-repeat: round

space ではこんなかんじ。
余白が入って調整するはずですが、Chrome と Opera では repeat と同じプレビュー、Firefox では stretch と同じプレビューになってしまいます。(2015年12月記)これ、いつか対応するんでしょうね。

border-image-repeat: space

値2つを試してみます。上下を round、左右の辺を stretch で指定。

値2つをテスト。
border-image-repeat: round stretch

border-image のショートハンド

上記の5つのプロパティは、border-image ショートハンドプロパティでまとめて書くことができます。

書き方は、
border-image-sourceの値(半角スペース)border-image-sliceの値 / border-image-widthの値 / border-image-outsetの値(半角スペース)border-image-repeatの値
と決まっています。

サンプルです。
先ほどの border-image-repeat の値が2つのヤツを、ショートハンドプロパティで。
border-width を先ほどの半分の15pxにしています。(スライスとボーダーの幅は同じじゃなくてもOK。自動で当てはめてくれます)

p#sample6-1 {
	padding:1em;
	border-style:solid;
	border-width:15px;  /*ボーダーの幅を15pxに。この領域内に画像を収めてくれます*/
	border-image:url("images/img01.jpg") 30/1/0 round stretch}

このサンプルでは、border-image-width:1 、border-image-outset:0 はデフォルト値ですので、
ショートハンドの「/1/0」は無くてもOK。
このソース↓でも表示は同じになります。

	border-image:url("images/img01.jpg") 30 round stretch

一目でわかる!便利なシミュレーションサイト

border-image のシミュレーションサイトを2つご紹介します。
文章での説明だとけっこう難解ですが、シミュレーションすれば一目瞭然!です。

border-image-generator
自分で作った画像を「Browse...」でチョイスしてシミュレーションできます。
下部のプレビューで確認して、ソースをコピペできるので便利です。

Web Creative Park CSSリファレンス サンプル
to-R(トゥーアル) さんが運営するリファレンスサイトの中のシミュレーションページです。
ソースを編集して「HTMLを反映する>>」ボタンを押すと、右側にプレビューを表示できます。
こちらは画像は選べませんが、 border-image-outset の挙動を確認できます。

対応ブラウザとベンダープレフィックス

border-image は、IEは11から、Chrome15、Safari 5.1、Firefox 15から対応だそうです。
iOSは3.2からのSafariはベンダープレフィックス付きで対応、6から完全対応。
Androidは2.1からベンダープレフィックス付きで対応、4.4から完全対応とのこと。

古めのモバイルにも表示させるなら、
ベンダープレフィックス「-webkit-を付けたほうが良いですね。

	-webkit-border-image:url("images/img01.jpg") 30 round stretch;
	border-image:url("images/img01.jpg") 30 round stretch;

次回予告

いや〜今回は border-image のプロパティを全部詰め込んだので、長かったですね。

次回は、borderとよく似た outlineプロパティとそのショートハンドについて。
outlineは、borderと同じように要素の外枠を表示します。
が、border と違ってボーダー領域ができないのが特徴。自分の太さで回りに影響を与えない、1つ上のレイヤーに浮いているような存在です。
レイアウト用というよりも、フォームの部品等に使ってユーザにアクティブになっていることを教えたりする、ユーザビリティのためのプロパティですね。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.