大阪・兵庫・京都・奈良のホームページ制作、ECサイト制作、ランディングページ制作、WEB集客なら安心の「リエイト」へ

06-7662-8688
定休日 土日祝
受付時間 10時〜18時

homepage

ホームページ制作

ホームページ制作2017.08.28

border-imageを活用して画像を利用した枠を簡単に実装する方法

img

ホームページ制作において、HTML/CSSのコーディングを行っている際、要素に枠を付ける方法はさまざまなものが存在します。
一番代表的な手法が、CSSプロパティborderを利用して枠を表現する方法ですが、このプロパティは実線や破線、点線など、あらかじめCSSとして定義されているものしか利用することできません。
しかし、実際にコーディングをしていると、複雑なテクスチャやグラデーション、シャドウなどがかかった枠を実装しなければならないケースがたびたびあります。
こうした際に便利なのが、border-imageという、画像を枠線として利用することができるCSSプロパティになります。

CSSプロパティborder-imageについて

CSSプロパティborder-imageを利用することで、ひとつながりになった枠の画像を一枚用意するだけで、任意の要素にその枠画像と同じ表現を当てることができます。
CSSプロパティborder-imageの具体的な書き方は、以下の通りとなります。

border-image:url(sample.png) 6 round;
border-width:6px;

実際には、対応するブラウザの幅を広げるために、以下のようにベンダープレフィックスをつけた状態で記述するのが無難です。

-moz-border-image: url(sample.png) 6 round;
-webkit-border-image: url(sample.png) 6 round;
-o-border-image: url(sample.png) 6 round;
-ms-border-image: url(sample.png) 6 round;
border-width:6px;

CSSプロパティに適用されている値の意味合いとしては、左から、「枠として使用する画像名」「画像のスライス距離」「画像のリピート方法」となります。

「画像のスライス距離」は、指定した枠の端から何pxを枠として利用するかを決定するのに必要な指定となります。
上記のサンプルでは、画像のうち枠の表現が上下左右に6pxある場合の指定となりますが、ドロップシャドウなどがかかっていて、下部分だけ8pxあるというような場合、以下のような記述をすることになります。

border-image:url(sample.png) 6 6 8 6 round;

このように4つ数字を並べることで、スライス距離を上右下左と時計周りに指定することが可能となります。

「画像のリピート方法」については、stretchとrepeat、roundといった値を設定することができ、スライスした画像をどのように枠の中で扱うかを指定することができます。
stretch: スライスした画像を要素のサイズの分だけ引き延ばして表示します。
repeat: スライスした画像を要素のサイズがいっぱいになるまで繰り返し表示します。
round: スライスした画像を要素のサイズがいっぱいになるまで繰り返し表示します。要素の大きさがスライスした画像の大きさで割り切れない場合は、割り切れるよう引き延ばして表示されます。

「画像のリピート方法」についてはroundが非常に使い勝手が良く、迷ったらこれを設定しておくとうまくいくことが多いです。

実際に実装する際はジェネレーターを利用するのがおすすめ

以上がborder-imageの仕様となりますが、言葉で説明されてもうまくイメージできる方は少ないのではないかと思います。
実際に記述してみて、どうしたらうまくいくか試行錯誤を重ねるのも使いこなせるようになるよい方法なのですが、ここではジェネレーターを利用して実装する方法をおすすめいたします。

border-image-generator
http://border-image.com/

このサイトにおいて、枠として利用したい画像を選択し、枠として利用したい位置にガイドラインを移動させれば、それだけでCSSとして利用できるコードを吐き出してくれます。
非常に直感的な操作が可能で、手作業で行うと非常に面倒なベンダープレフィックスの設定も一瞬で行ってくれるため、使い勝手が良いジェネレーターです。

引き出しを多く持っておくことで効率的なホームページ制作につなげる

画像を枠として利用する手法には、ここで説明させていただいたborder-imageを利用した手法の他に、div要素を二つ重ね、親要素のみに背景画像を設定したり、background-imageをカンマ区切りで複数指定したりといった手法も挙げられます。
どの手法が最も便利だというわけではなく、ケースバイケースで最も最適な記述方法を選択していくことが求められます。
そういった意味で、今回のborder-imageも含め、さまざまな実装方法を引き出しとして持っておくことで、コーディングの際の効率を飛躍的に高めることができるでしょう。

関連記事

RELATED ARICLE

img