<hr>タグのhtmlとCSS
文中などで横線を引いて区切りをつけたい場合は、<hr>タグを記入します。
改行の<br>タグと同じように、開始タグと終了タグをセットにする必要はなく、単体で使用することができます。xhtml で記入する場合は、<hr />タグと書きます。
例：
文中で<hr>タグを記述するとこのように表示されます。
hrタグを記述すると、自動的にその前後で改行されます。
段落分けのPタグの場合、文章の区切りとして使用されるので、先頭のキーワードなどは検索エンジンでも重要視されがちですが、hrの場合は、ただ線を引くだけなので、そのタグ自体に意味はなく、ただ線が横に引かれるだけです。
<hr>タグのスタイルシート設定
hrタグはスタイルシートで設定することができますが、ブラウザによって表示のされ方に違いがあります。主に、ＩＥ６での表示のされ方に違いがあるように感じますが、当ホームページではこのように設定しています。
hr {
border-width: 1px 0px 0px 0px;
border-style: solid;
border-color: #cccccc;
height: 1px;
}
ちなみに、レイアウトの区切りとしてスタイルシートで横線を引く場合は、border を使って設定することをおすすめします。
hr は、ワンポイント的に、その箇所にだけ横線を引くのに向いていますが、サイドバーのタイトルの下線などはスタイルシートで設定するようにしましょう。