CSS border-imageの使い方枠線に画像表示する方法

本記事は広告が含まれる場合があります CSS

【CSS border-imageの使い方】枠線に画像表示する方法

今回は、要素の枠線に画像を表示させることができるCSSプロパティ「border-image」の使い方を解説していきます。

border-imageの使い方を覚えると以下のようにオリジナルの枠線デザインを作ることが可能です。

border-imageを設定してオリジナルの枠線を作成している例

 

 

 

border-imageプロパティとは?

border-imageは、要素の枠線に好きな画像を表示させることができるCSSプロパティです。

border-imageは下記の5つのCSSプロパティを同時に指定することができます。最初のうちは、個別の指定をした方がborder-imageで一括指定するよりも理解しやすいのでおすすめです。

border-imageプロパティは5つのプロパティを同時に指定できる一括指定プロパティ
 

■border-imageを構成する5つのプロパティ(★はよく使う)

プロパティ名 意味
★border-image-source(必須) 枠線に表示したい画像のパスを指定する
★border-image-slice(任意) 画像のスライスする位置を指定し、9つの領域に分割する

※システム的には指定は任意だが、枠線画像を作る際には必要なので、実質的には必須のプロパティ。

border-image-width(任意) 画像が表示される領域の幅を指定する
border-image-outset(任意) 画像が枠線からはみ出す幅を指定する
★border-image-repeat(任意) 画像の辺領域での表示方法を、拡大縮小するか、繰り返すかなど指定する

 

なお5つのプロパティの値をborder-imageで一括指定する際は半角スペースが必要で、「border-image-slice」「border-image-width」「border-image-outset」の値の間には「/(スラッシュ)」が必要です。

 

また、border-imageプロパティを指定する際は、あわせてborderプロパティ(border-styleプロパティ)の指定が必要で、これが指定されていない場合、ブラウザーによっては画像を表示しないブラウザーもあります。
 

Note: 境界画像の読み込みに失敗したときのために、 border-style を指定してください。仕様では厳密には要求されていませんが、border-style が none または border-width が 0 の場合、境界画像を描画しないブラウザーもあります。

引用:border-image - CSS: カスケーディングスタイルシート | MDN

 

 

border-imageプロパティの使い方

それではここからはborder-imageの使い方・指定できる値を紹介していきます。今回は横幅・高さ共に300pxの以下のような画像を準備しました。この画像を枠線の中に表示させていきます。

border-imageプロパティ解説用の画像
 

この画像を使って最終的には、以下のような枠線画像を作っていこうと思います。

border-imageを使って枠線画像を表示しているデモ
 

borderで事前に枠線を設定する

まず、border-imageを使用する際は、基本的にborderの指定とあわせて利用するので、あらかじめborderの指定をしておきます。

border-imageを使って枠線画像を作成する過程を説明するために準備したデモ

 

border-image-source(必須):枠線に表示したい画像を指定

まずは枠線に表示したい画像が指定できる値についてです。枠線に表示したい画像を指定するにはborder-image-sourceプロパティを指定してあげればOKです。

border-image-sourceプロパティを使って枠線画像を指定しているデモ
 
これでデフォルトでは、枠線の4隅に指定した画像が表示されたはずです。

 

border-image-slice(任意):画像を9つの領域に分割する

border-image-sliceプロパティを指定すると指定した画像を9つの領域に分割することができ、分割された各領域が最終的な枠線の各領域に割り当てられるようになります。

border-imageを利用する際は実質的に必須のCSSプロパティです。このborder-image-sliceが一番難しいと思います。

よりイメージが掴めるように「border-image-slice: 100」を指定してみましょう。(※border-image-sliceでは単位は省略します。)
 

 

そうするとborder-image-sourceで指定した画像は上、右、下、左端から内側100pxの箇所でスライスされ、以下のように9つの領域ができます。

枠線画像は縦横300pxの画像
 

枠線画像が上、右、下、左端から100px内側にスライスされて9つの領域が作られた
 

ここで各領域の番号を内包しているボールの数字に合わせるとすると、1〜4番の領域は最終的な枠線の4隅に割り当てられ、5〜8番の領域は最終的な枠線の4辺に割り当てられるようになります。

1〜4番の領域は最終的な枠線の4隅に割り当てられ、5〜8番の領域は最終的な枠線の4辺に割り当てられる
 

border-image: url(border-image-demo.png) 100;の指定結果
 

なお、デフォルトでは真ん中にある9番の領域は非表示になっていますが、キーワード「fill」を使用すれば、背景画像のように表示することが可能。

9番の領域は非表示になっていますが、キーワード「fill」を使用すれば、背景画像のように表示することが可能
 

また、辺領域に表示されている画像は、デフォルトでは要素の寸法に合わせて拡大・縮小されますが、後ほど紹介する「border-image-repeatプロパティ」を指定すれば、その他の表示設定をすることができます。

なお、スライス位置が上下左右の各辺から同じ距離で良い場合は、値を1つ指定すれば良いですが、異なる距離にしたい場合は上、右、下、左の順に異なる値を指定してあげることもできます。
(例)border-image-slice: 40 50 60 70;の場合、上から40px、右から50px、下から60px、左から70px内側の位置に分割線が引かれる。

 

border-image-width(任意):画像が表示される領域の幅を指定

border-image-widthプロパティを指定すると、画像が表示される領域の幅を指定することができます。
 

「border-image-slice」「border-image-width」「border-image-outset」の値の間には「/(スラッシュ)」を忘れないようにしましょう。

border-image-width: 60pxの指定結果

なおこちらの値を省略した場合は、borderプロパティで指定されている枠線の太さが適用されます。

 

border-image-outset(任意):画像が枠線からはみ出す幅を指定

border-image-outsetプロパティを指定すると、画像を枠線から外側にどれくらいはみ出させるかを指定することができます。

こちらの値を省略した場合は、初期値「0」が適用されます。それほど使用頻度は高くないと思います。
 

 
border-image-outset: 10pxの指定結果
 
 

border-image-repeat(任意):画像の辺領域での表示方法を指定

最後に、border-image-repeatを利用すると、画像の辺領域での表示方法を引き伸ばす・繰り返すなどの指定ができます。使用頻度は比較的高い目です。

指定なし(初期値)の場合辺領域に表示されている画像は、要素の寸法に合わせて拡大・縮小され表示されます。repeatやroundなど指定する繰り返し表示されます。
 

デフォルトでは、辺領域に表示されている画像は 要素の寸法に合わせて拡大・縮小されるborder-image-repeat指定なしの場合、辺領域に表示されている画像が要素の寸法に合わせて拡大・縮小される

border-image-repeat: roundの指定結果
border-image-repeat:roundの場合、辺領域に表示されている画像が繰り返しで表示される

 

 

■(参考)border-image-repeatプロパティで指定できる値

stretch(初期値) 画像が引き伸ばされて辺領域を埋める
repeat 画像がタイル状に繰り返されて辺領域を埋める
round 画像がタイル状に繰り返されて辺領域を埋める

また、タイルが整数で並ばない場合は並ぶように画像が拡大・縮小される

space 画像がタイル状に繰り返されて辺領域を埋める

また、タイルが整数で並ばない場合はタイル間に余ったスペースが分配される

 

 

border-image-repeat: roundの指定結果
 

 

まとめ・オリジナルな枠線デザインを作成できるborder-imageプロパティ!

まとめです。今回は画像を使ってオリジナルな枠線デザインを作成できるCSSプロパティ、border-imageプロパティの使い方を紹介しました。

border-imageプロパティは5つのプロパティを同時に指定できる一括指定プロパティ

■border-imageを構成する5つのプロパティ(★はよく使う)

プロパティ名 意味
★border-image-source(必須) 枠線に表示したい画像のパスを指定する
★border-image-slice(任意) 画像のスライスする位置を指定し、9つの領域に分割する

※システム的には指定は任意だが、枠線画像を作る際には必要なので、実質的には必須のプロパティ。

border-image-width(任意) 画像が表示される領域の幅を指定する
border-image-outset(任意) 画像が枠線からはみ出す幅を指定する
★border-image-repeat(任意) 画像の辺領域での表示方法を、拡大縮小するか、繰り返すかなど指定する

 
最初のうちは、個別の指定をした方がborder-imageで一括指定するよりも理解しやすいのでおすすめです。。

今回は以上になります。最後までご覧頂き、ありがとうございました。


 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


 

-CSS