制作者の活動(PR)。

罫線に画像を用いる。

CSSの小技として、罫線に画像を用いる方法です。

HTML文書では<hr>要素で横罫線を引けますが、これを画像にする方法です。

但し、オペラ 6.x及びインターネットエクスプローラの7.0まででは余り綺麗に表示出来ません。

実は、<hr>要素に関するスタイルの扱いには明確な仕様が無く、各ウェブブラウザのヴェンダはCSSの他の仕様に反しない範囲で独自に扱いを決めているのが実情です。つまり、<hr>要素に関してはオペラ 6.xやインターネットエクスプローラだけの問題とも言えないのです(実際には実装に問題があるのでそれに関してはオペラ 6.xなりインターネットエクスプローラなりの責任と言えますが)。詳しくは<hr>要素のスタイルをご覧下さい。

今、幅48ピクセルズ、高さ16ピクセルズのマーガレットの花二本を交差させたGIF画像「Marguerite.GIF」を横一列に並べて罫線を作るとします。

この場合、CSSでは以下のようになります。

hr.sample {
    height: 16px;
    margin: 1em 0 1em;
    padding: 0;
    background: #cfc url('Marguerite.GIF');
    border: 0px none;
    }

ここで重要なのは以下の三つのプロパティズです。

<hr>要素自身の高さ＝画像の高さを指定します。

<hr>の背景画像として、並べる画像を指定しております。

heightプロパティで要素の高さを画像の高さに合わせているため、縦方向に並ぶ事はありません。

また、背景色を指定する事で、画像を表示出来ない設定にしている場合にも区切りが分かるようにします。

多くのグラフィカルなウェブブラウザでは、<hr>要素の罫線をボーダで表現しております。よって、これを消さないと綺麗に表示出来ません。

これを実際に表示させるとこうなります(ネットスケープ 4.x以前の旧型ウェブブラウザではただの罫線ですし、グラフィカルで無いウェブブラウザでは恐らく意味は無いかも知れませんが)。