制作者の活動(PR)。

<hr>要素のスタイル。

<hr>要素(横罫線)はCSSを扱う上で意外に厄介な代物です。

表示スタイルについて、明確な決まりが無いからです。

このため、<hr>要素に画像を用いる場合、さまざまな問題に悩まされました。

それでも、最近ではインターネットエクスプローラを除けば、多くの環境でそれなりのスタイルを実現出来るようになって来たようです。

ただ、殆どのブラウザにバグがあるのも事実ですが…。

ここでは、なるべく多くの環境でそれなりに<hr>要素のスタイルを定める方法について考えてみましょう。

<hr>要素のスタイル・目次。

▲記事先頭
▽次項目

主なブラウザでの<hr>要素の実装
- ファイヤーフォックスとオペラでの<hr>要素の実装
- インターネットエクスプローラでの<hr>要素の実装
無難な<hr>要素のスタイル定義
<hr>要素のスタイルサンプル
- スタイル定義とHTML
- 実際に表示させた結果
最も無難な対策は<hr>要素を用いない事？
参考・モバイルブラウザの場合

主なブラウザでの<hr>要素の実装。

ファイヤーフォックスとオペラでは、<hr>要素の実装を以下のように考えているようです。

枠線は境界線と見なす

つまり、borderプロパティで色, 幅及びスタイルを決めると言う事になります。

内部はパディングと見なす

つまり

内部の幅は上下のpaddingプロパティで決める
内部の色などはbackground系プロパティで決める

と言った扱いになります。

内部の高さを決める事も出来る

内部の幅を要素本体の高さはheightプロパティで決める事も出来ます。

但し、ファイヤーフォックスでは枠線の太さが<hr>要素のheightプロパティに含まれてしまう不具合があるようです(インターネットエクスプローラじゃあるまいしこんな仕様違反をしていたとは…)。

幅に関してはwidthプロパティで決めたり、左右のmarginプロパティの値で決めたり出来ますが、オペラでは左右のmarginプロパティの処理に不具合が見られました。

オペラの場合、margin-leftプロパティ及びmargin-rightプロパティを指定しても、widthプロパティを指定している場合には勝手にセンタリングしてしまうようです(~~9.00~~9.20まで)。但し、オペラはCSSのバグを随時修正しているので、将来のヴァージョンでは改善されるかも知れません。

一部バグが見られましたが、CSSの仕様を充分考慮した実装と考えられます。

恐らくサファリやiCabなど、CSSの実装に関して評判が良いブラウザでも、同様の実装となっている事でしょう。

本頁の目次

インターネットエクスプローラでの<hr>要素の実装。

▲記事先頭
△前項目
▽次項目

インターネットエクスプローラと言ってもさまざまですので、現時点でもっとも利用者数が多いと思われるウィンドウズ版の 6.0で見てみましょう。

枠線は上下のborderプロパティで決める

このとき、上下左右のうち幅が 0になっている側については、勝手に灰色の枠線を付けてしまいます。

内部をpaddingプロパティで指定する事が出来ない

paddingプロパティで内部の幅を指定しても無効になります。

heightプロパティで無理矢理高さを決める事も出来ますが、その場合内部はcolorプロパティに従うようです。

幅に関してはwidthプロパティで決める事も出来ますが、幅を定めた場合にはオペラ9.00までと同様左右のmarginプロパティが無視されるようです。

インターネットエクスプローラのCSSの実装にはさまざまな問題がありますが、<hr>要素に関しても問題だらけのようです。

本頁の目次

無難な<hr>要素のスタイル定義。

▲記事先頭
△前項目
▽次項目

少なくとも大手三大ブラウザで無難に表示させるには、以下のようにすれば良いと考えられます。

<hr>要素に画像を用いたい場合は以下の方法では実現出来ません。そしてその場合、インターネットエクスプローラではどうしても汚くなってしまう事は承知して下さい。

枠線

幅はborder-widthプロパティで決めます。このとき、絶対に上下左右とも幅を0以外にして下さい。インターネットエクスプローラで汚くなります。
色はborder-colorプロパティで決めます。

内部

paddingプロパティは 0にします。
- 枠線の幅に依っては、paddingプロパティが 0だとオペラ以外で潰れてしまう事があります。
高さはheightプロパティで決めます。
色はcolorプロパティとbackgroundプロパティの双方で同じ色を指定します。

配置

widthプロパティやmarginプロパティで決められますが、ファイヤーフォックス以外では左右の配置が仕様通りにならない場合がある事は承知して下さい。

本頁の目次

<hr>要素のスタイルサンプル。

▲記事先頭
△前項目
▽次項目

それでは、実際にサンプルを示してみましょう。

スタイル定義とHTML。

▲記事先頭
△前項目
▽次項目

まず、スタイルシートを以下のようにします。

正直言って好ましいクラス名ではありませんが、表示方法をクラス名にするよりはマシでしょう。

<hr>要素のスタイル定義サンプルを読み飛ばす

p {
    margin: 0;
    padding: 0;
    }

hr.style1 {
    margin: 1em 0 1em;
    height: 4px;
    border: #f00 2px solid;
    }

hr.style2 {
    margin: 1em 0 1em;
    padding: 0;
    height: 4px;
    border: #f00 1px solid;
    color: #fcc;
    background: #fcc;
    }

hr.style3 {
    margin-top: 1em;
    margin-bottom: 1em;
    margin-right: 0;
    padding: 0;
    width: 60%;
    height: 4px;
    border: #f00 1px solid;
    color: #fcc;
    background: #fcc;
    }

<hr>要素のスタイル定義サンプルはここまで

続いて、HTML文書を以下のようにします。

<hr>要素のスタイル定義サンプルを扱うHTML文書読み飛ばす

<title>&lt;hr&gt;要素のスタイルサンプル。</title>
<h1>&lt;hr&gt;要素のスタイルサンプル。</h1>
<p>&lt;hr&gt;要素は案外厄介です。</p>
<p>それでも何とか思い通りにしてみたいものです。</p>
<hr class="style1" />
<p>上は幅 4ピクセルズ、枠線の太さは 2ピクセルズの赤い枠線です。</p>
<hr class="style2" />
<p>上は幅 4ピクセルズの赤い枠線で、内部がピンクになっております。</p>
<hr class="style3" />
<p>上は幅 4ピクセルズの赤い枠線で、内部がピンクになっております。</p>
<p>更に幅を60％とし、右余白を零にしております。</p>