イラストなどでカラフルな区切り線を作る(3ページ目)

ボックスの下に区切り線を表示させる場合

p要素で作るブロックの下側に区切り線を表示させたい場合は、以下のようにソースを変更します。

p.sep {
   background-image: url("apple.gif");
   background-repeat: repeat-x;
   background-position: bottom left;
   padding-bottom: 38px;
}

背景画像を指定するbackground-imageプロパティと、背景画像の繰り返し方法を指定するbackground-repeatプロパティは、先ほどとまったく同じです。

■background-positionプロパティ：
background-positionプロパティの値をtopからbottomに変えることで背景画像がボックスの下部に表示されるようにします。（「left」はそのまま）

■padding-bottomプロパティ：
先ほどはpadding-topプロパティを用いましたが、ここではpadding-bottomプロパティを用います。 ボックスの内容と背景画像（区切り線のための画像）とが重ならないようにするための余白は、上部ではなく下部に必要だからです。 padding-bottomはブロック内側の下端の余白を指定するプロパティです。

HTMLは、先ほどと同じように、区切り線を引きたいボックス（p要素）に「sep」クラスを付加するだけです。例えば、以下のように記述します。

<p class="sep">
このボックスの下記には、横幅いっぱいにりんご画像が繰り返し表示されているはずです。
</p>
<p>
下のボックス。
</p>

上記ソースで表示させると、以下のように見えます。（サンプルの範囲が分かりやすいように、枠線を表示しています。）

このような感じでボックスの下部に区切り線が表示されます。
この記事ではp要素を使いましたが、他にdiv要素やその他のブロックレベル要素を使っても構いません。そのページにある要素に合わせてスタイルシートを記述して下さい。

おわりに

今回は、画像を使うことで、シンプルな直線ではないカラフルな区切り線を描いてみる方法をご紹介いたしました。 hr要素で作るシンプルな水平線（横罫線）の代わりに活用してみて下さい。