CSS3のborder-imageで、しましまの目立つ枠線を作る(3ページ目)

border-imageプロパティで指定した画像の使われ方

border-imageプロパティに指定した画像は、下図のように「横3つ×縦3つ」の合計9個に分割されて、枠線の描画に使われます。


上記の画像を使って表示してみると、「画像のどの部分」が「枠線のどの部分」に使われているのかが分かりやすいでしょう。枠線用の画像を用意する際には、上図のように分割されることを考えて作成して下さい。


前ページでご紹介したCSSソースは、以下のようなものでした。

border-image: url("shimashima.png") 24 24 round;

ここに記述している「24 24」の数値は、枠線用に指定した画像を、「上下両端から24ピクセルの位置」・「左右両端から24ピクセルの位置」で切断して、合計9個に区切るという意味です。ですから、この値は、実際に使用する画像のサイズに合わせて修正が必要です。前ページのサンプルで用意したように、「3で割り切れるサイズ」で画像を用意すると、綺麗に連続して見えます。

枠線用画像の「繰り返し方法」を指定

先のCSSソースで記述した「round」の部分には、枠線に使う画像の「繰り返し方法」を指定します。指定できる値には、round、repeat、space、stretchの4種類があり、それぞれの効果は以下の通りです。

■round：

border-image: url("shimashima.png") 24 24 round;

「round」は、画像を伸縮させることで、隙間なく連続して並べる指定です。右図では、(2)と(8)は若干横方向に引き延ばされて表示されており、(4)と(6)は若干縦方向に引き延ばされて表示されています。

縞模様のように、「模様が連続する画像」を使う際には、この「round」を指定すると、うまく表示されます。

■repeat：

border-image: url("shimashima.png") 24 24 repeat;

「repeat」は、縦横比を維持したまま画像を繰り返し並べる指定です。この場合、表示領域が中途半端なサイズだと、画像は途中で切れてしまいます。

右図の場合は、(2)・(4)・(6)・(8)の端が切れています。切れても問題ない模様を使う場合や、縦横の表示サイズをピクセル単位で調整可能なのであれば、この「repeat」を指定すると良いでしょう。

■space：

border-image: url("shimashima.png") 24 24 space;

「space」は、(先の「repeat」と同様に)縦横比を維持したまま画像を繰り返し並べる指定です。ただし、先ほどの「repeat」とは異なり、画像と画像の間隔を自動調整して、途中では切れないように配置されます。

右図の場合は、画像と画像の間に、これまでよりも少しだけ広めに空白が設けられています。イラストを並べる場合などのように、連続しない模様を使う場合に適しています。

※本稿執筆時点では、(border-imageプロパティ自体には対応していても)値「space」は正確に描画できないブラウザがありました。

■stretch：

border-image: url("shimashima.png") 24 24 stretch;

「stretch」は、画像1枚を表示領域全体に引き延ばして表示する指定です。指定を省略した場合は、この「stretch」を指定したものと解釈されます。

目立つ「しましま(ストライプ)柄」の枠線を作る

今回は、枠線の模様に画像が使えるCSS3のプロパティ「border-image」を使って、しましま(ストライプ)柄の枠線を作る方法をご紹介致しました。borderプロパティだけで作る枠線とは異なり、用意する画像次第で、様々なデザインの枠線が作れます。ぜひ、いろいろ試してみて下さい。