<hr />タグのhtmlとCSS
文中などで横線を引いて区切りをつけたい場合は<hr />タグを記入します。
改行の<br>タグと同じように、開始タグと終了タグをセットにする必要はなく、<hr />単体で使用することができます。DTDが html の場合は<hr>と記述し、xhtml のテンプレートで記入する場合は半角スペースとスラッシュを入れて<hr />と書きます。
例：
文中で<hr />タグを記述するとこのように表示されます。
このhrタグを記述すると自動的にその前後で改行されます。
hrはただ線を引くだけなので、そのタグ自体に意味はなく、ただ横に線が引かれるだけです。
線を引いて区切ったからといって、見出しタグのような意味的な区切りにはなりませんので、SEO対策上も特に影響はありません。
<hr />タグのスタイルシート側での設定
hrタグの色や太さはスタイルシートで設定することができますが、ブラウザによって表示のされ方に違いがあります。主に、ＩＥ６での表示のされ方に違いがありますが、当ホームページではこのように設定しています。
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タグはワンポイント的に、その箇所にだけ横線を引くのに向いていますが、見出し部分のタイトルの下線などはスタイルシートで設定するようにしましょう。