<hr>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ
利用場所 フロー・コンテンツが置ける場所
内容

hr要素は、段落レベルのテーマの区切りを表します。


<hr>

hr要素を使用することで、セクション内におけるテーマの区切りを表すことができます。

セクションで区切るほどではないけど、話題の変わり目は示しておきたい、といった場面で使用することができます。例えば、次のような感じで使用します。

<section>

<p>... ということで、今日は忙しい一日でした。</p>

<hr>

<p>ところで、明日からは連休となりますが、皆さんは ...</p>

</section>
  • この要素は段落単位の区切りとして使うものなので、セクション間の区切り線として配置するのは適切ではありません。

要素のデフォルトスタイル

一般的なブラウザでは、この要素を配置した位置に水平線が引かれ、その上下に0.5em程度のマージンが入ります。水平線の色や太さは、ブラウザにより若干異なります。


HTML5における変更点

使用例

article要素内で使用した例

<article>

<h2>テーマの区切りについて</h2>

...

<p>という具合に、話題の変わり目はhr要素を使って表すことになります。</p>

<hr>

<p>ところでこの水平線、デザインが少し野暮ったいとは思いませんか?</p>

<p>このまま使って構わないのですが、もっとカッコいい水平線にする方法も ...</p>

</article>

表示例

テーマの区切りについて

...

という具合に、話題の変わり目はhr要素を使って表すことになります。


ところでこの水平線、デザインが少し野暮ったいとは思いませんか?

このまま使って構わないのですが、もっとカッコいい水平線にする方法も ...