<hr>タグのHTMLとCSS
（更新 ）
文中などで横線を引いて区切りをつけたい場合は<hr>タグを記入します。
改行の<br>タグと同様、内容を含めることができない空要素となっており、開始タグと終了タグをセットにする必要はなく、<hr>単体で使用することができます。
昔の古いXHTMLのテンプレートでは<hr />と書かれることもありますが、現在のHTML5（Living Standard）では半角スペースとスラッシュなしで<hr>と記述します。
例：
文中で<hr>タグを記述するとこのように表示されます。
この<hr>を記述すると自動的にその前後で改行されます。
<hr>はHTML5以降、単なる視覚的な横線ではなく、意味のあるセマンティックな要素となっており、テーマやコンテンツの区切りや転換として扱われます。そのため、文中で唐突にhrを挿入するのは避けた方がよいでしょう。
■下線の<u></u>タグとの違い
hrタグは区切りとして横に下線が引かれて改行されます。一方、その文字の箇所にだけ下線を引く場合には、CSSでtext-decoration: underline;を設定するか、もしくはアンダーラインの<u></u>タグを使うようにしましょう。この<u>タグについてはインライン要素のため、その前後で改行はされません。
■枠線のborderとの違い
<hr>はテーマやコンテンツの区切りとして使用するため、<div>などテンプレートのレイアウトの区切りとして横線を引く場合には、その要素のスタイルシートにborderを指定することをおすすめします。
→ borderは要素の外枠を指定するCSS
例えば、<div>や<h1>などのブロック要素の一番下に下線を引く場合、スタイルシートで次のように設定します。
.sample {border-bottom: 1px solid #ccc;}
視覚的なデザインの装飾目的で見出しタグなどに下線を引く際には、スタイルシートでborder-bottomを設定するようにしましょう。
<hr>タグのスタイルシートを設定する方法
<hr>の色や太さはスタイルシートで設定しますが、特に何も指定しないブラウザのデフォルトの状態をChromeデベロッパーツールで確認しますと、以下のようになっています。
■hrのデフォルトCSS（※Chromeの場合）
hr {
display: block;
margin-block-start: 0.5em;
margin-block-end: 0.5em;
margin-inline-start: auto;
margin-inline-end: auto;
color: gray;
unicode-bidi: isolate;
overflow: hidden;
border-style: inset;
border-width: 1px;
}まず前提として、<hr>タグはdisplay: block;のブロック要素のため、空の箱の上下左右にborderの枠線を設定しますが、中身は空のため、実際には枠線のみしか表示されません。
仮に、このborder-width:1px;を50pxに太くした場合、以下のように表示されます。
つまり、デフォルトの状態の場合、<hr>は単純な線ではなく、立体化して表示されるブロック要素の4辺の枠線になります。これはデフォルトのborder-styleがinsetのため、border-topやborder-bottomなど4辺すべてが組み合わさって3Dで描画されるからです。この場合、影の部分が50px（border-top）、明るい部分が50px（border-bottom）、そのほか左右にも50pxづつの枠線で表示されます。
デフォルトの状態ではborder-width:1px;で細くて分かりづらいですが、普通の1pxの横線に見えても、実際には立体化して表示されています。
そのため、デフォルトの状態では表示に違和感がでてくるため、立体化のinsetを解除して使用することをおすすめします。
具体的には、border-styleをinsetからsolidに変更して立体化を解除します。
この場合、色分けしてみますと、実際には上下左右それぞれ50px幅の枠線で表示されています。
そのため、上のborder-top以外の枠線を0pxとして非表示にした場合、以下のようになります。
これにて、<hr>の立体化を解除した上でborder-topのみの１本の横線になりました。
最終的に、太さを1pxに戻し、色も薄めの灰色にすると以下のようになります。
当ホームページではこの状態で使用していますが、border-topのみのフラットな1pxの横線で表示すると立体化されず、違和感がなくなります。
hr { border-width: 1px 0 0 0; border-style: solid; border-color: #ccc; }コピー
ちなみに、デフォルトのCSSではcolor: gray;と書かれていますが、これは古いブラウザの名残りがそのまま残り続けているもので、実際の表示とは関係がなく、ほぼ無意味です。hr {color: red;}などと指定しても赤色では表示されないため、colorで指定しても効きません。そのため、線の色を指定するには、hr {border-color: red;}などと指定する必要があります。
また、border:none;にした上で背景色を灰色に設定し、height:1px;を設定しても似たような表示にはなります。ただ、その場合はあくまで背景色であって、横線ではないため、できるだけborderを使用することをおすすめします。
<hr>タグで破線や点線を表示する方法
上記のborder-style: solid;を「dashed」にすると破線になり、「dotted」では点線になります。
例えば、「dashed」の破線の場合、上記のsolidと同様に線の太さを50pxにすると以下のようになります。
この状態から上のborder-top以外の枠線を0pxとして非表示にした場合、以下のようになります。
上記の場合は線の太さが50pxですが、「線の太さ」が太くなるほど、「線と線の間の空白の長さ」は広がって自動調節されます。
そのため、1pxのような細い線の場合、空白の間隔も狭くなり、点線のようになってしまうため、2pxなどある程度は太くすることをおすすめします。
例えば、以下のように線の太さを2px、border-styleを「dashed」とします。
hr { border-width: 2px 0 0 0; border-style: dashed; border-color: #ccc; }
すると、このような破線になります。
ただ、上記の場合、すべての<hr>タグが破線になってしまうため、クラス指定して使用することをおすすめします。
.example {
border-width: 2px 0 0 0;
border-style: dashed;
border-color: #ccc;
}HTML側では以下のように記載します。
<hr class="example">同様に、「dotted」の点線の場合は以下のようになります。
この状態から上のborder-top以外の枠線を0pxとして非表示にした場合、以下のようになります。
さらに、線の太さを2px、border-styleを「dotted」とした場合、以下のようになります。
hr { border-width: 2px 0 0 0; border-style: dotted; border-color: #ccc; }
すると、このような点線になります。
ここでは#cccの色にしていますが、文字色と同じ色にすると自然な仕上がりになるかと思います。