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

イラストで区切り線を作るスタイルシート

画像をタイル状に並べるには、「背景画像」として表示するのが良いでしょう。 水平線を引くhr要素は使わず、ここではdiv要素やp要素などのボックスに対する装飾として作ります。

用意した画像ファイル名が apple.gif で、p要素を使って作る場合、記述するスタイルシートは以下のようになります。（p要素で作るブロックの上部に表示する場合）
※クラス名は「sep」としていますが何でも自由に付けて構いません。

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

■background-image
背景画像を指定するプロパティです。用意した apple.gif ファイル「」を指定しています。

■background-repeat
背景画像を繰り返す方向を指定するプロパティです。値に「repeat-x」を指定すると、横方向にだけ繰り返すようになります。

■background-position
背景画像の表示位置を指定するプロパティです。値に「top」と「left」の2つを指定しているので、（上下方向には）上端から、（左右方向には）左端から描画されます。 先ほどのbackground-repeatプロパティで、横方向にだけ繰り返すよう指定しているため、上端の左から右まで繰り返して描かれます。
※値「top」と「left」は半角スペースで区切って記述します。

■padding-top
paddingプロパティは、内側の余白を指定するプロパティです。padding-topで上端の余白を指定できます。 ここでは、ボックス内の本文と背景画像（区切り線）が重なってしまわないよう、画像の高さ（23ピクセル）を上回る値を指定しています。（ここでは38ピクセルを指定）

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

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

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

このような感じでリンゴの区切り線が表示されます。
ページによってはボックスの上側ではなく下側に表示させたい場合もあるでしょう。 ボックスの下側に区切り線を表示させたい場合のソースを、次のページでご紹介いたします。