<hr />タグのhtmlとCSS

文中などで横線を引いて区切りをつけたい場合は<hr />タグを記入します。

改行の<br>タグと同じように、開始タグと終了タグをセットにする必要はなく、<hr />単体で使用することができます。DTDが html の場合は<hr>と記述し、xhtml のテンプレートで記入する場合は半角スペースとスラッシュを入れて<hr />と書きます。


文中で<hr />タグを記述するとこのように表示されます。


このhrタグを記述すると自動的にその前後で改行されます。

hrはただ線を引くだけなので、そのタグ自体に意味はなく、ただ横に線が引かれるだけです。
線を引いて区切ったからといって、見出しタグのような意味的な区切りにはなりませんので、SEO対策上も特に影響はありません。

<hr />タグのスタイルシート側での設定

hrタグの色や太さはスタイルシートで設定することができますが、ブラウザによって表示のされ方に違いがあります。主に、IE6での表示のされ方に違いがありますが、当ホームページではこのように設定しています。

hr {
border-width: 1px 0px 0px 0px;
border-style: solid;
border-color: #cccccc;
height: 1px;
}

この場合、このような横線が引かれます。


このborder-style を dotted や dashed にすると破線になりますが、ブラウザによって表示のされ方に多少の違いがあります。

例えば、このように border-style を dashed で記述すると…

hr {
border-width: 2px 0px 0px 0px;
border-style: dashed;
border-color: #000000;
height: 1px;
}

このような破線になります。


携帯サイトでの使用

ガラケーの携帯サイトの場合、外部スタイルシートが使用できませんので、このhrを駆使して見やすくしているケースが多いです。携帯サイトでhrタグを使用する場合、styleを指定して以下のように使用するとよいでしょう。

(携帯サイトでの例:)

<hr style="border-width:1px 0 0 0;border-style:solid;border-color:#cccccc;height:1px;" />

下線の<u></u>タグとの違い

hrタグは区切りとして横に下線が引かれますが、その文字の箇所にだけ下線を引く場合はアンダーラインの<u></u>タグを使うようにしましょう。この<U>タグはその前後で改行されません。

枠線のborderとの違い

テンプレートのレイアウトの区切りとして横線を引く場合は、その要素のスタイルシートに border を指定することをおすすめします。
borderは要素の外枠を指定するCSS

例えば、特定のブロック要素の部分の一番下に下線を引く場合、スタイルシートで次のように設定します。

.sample {border-bottom: 1px solid #cccccc;}

hrタグはワンポイント的に、その箇所にだけ横線を引くのに向いていますが、見出し部分のタイトルの下線などはスタイルシートで設定するようにしましょう。

次へ:<img src=は画像を表示するhtmlタグ