hrタグ -区切り線を表示する｜HTML辞典
<hr>タグとは？
<hr>タグは、HTML文書内で「区切り線（水平線）」を表示するためのタグです。
文章のセクションを区切る際や、視覚的に異なるコンテンツを分割する目的で使用されます。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、セクショニングコンテンツ（Sectioning Content）
ページ内で意味のある区切りを表す要素の一つで、段落やセクションの境界を明示するために使われます。
閉じタグの有無
<hr>は開始タグのみで閉じタグは不要な「空要素」です。
HTML5では <hr> は 自己閉じタグ（<hr />）を省略可能 ですが、XHTMLでは <hr /> のように記述する必要があります。
基本的な記述方法
<hr> を使用すると、文章の間に水平線が挿入されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>区切り線の例</title>
</head>
<body>
<h1>セクション1</h1>
<p>これは最初のセクションの内容です。</p>
<hr>
<h1>セクション2</h1>
<p>これは次のセクションの内容です。</p>
</body>
</html>ポイント：
<hr>はデフォルトで横いっぱいの線を表示する。- 文章の区切りや、セクションの間に使用するのが一般的。
使用できる主な属性
HTML5では、<hr> はスタイル調整用の属性を持ちませんが、CSSを適用することが可能です。
| 属性名 | 説明 | 例 |
|---|---|---|
class | CSSのクラスを適用 | <hr class="dashed-line"> |
id | 一意の識別子を設定 | <hr id="section-divider"> |
style | インラインスタイルを適用 | <hr style="border: 1px solid red;"> |
CSSを使ったデザイン変更
<hr> のデザインをカスタマイズしたい場合、CSSでスタイルを適用するのが一般的です。
/* 標準の水平線 */
hr {
border: none;
border-top: 1px solid #ccc;
margin: 20px 0;
}
/* 破線の水平線 */
.dashed-line {
border: none;
border-top: 2px dashed #666;
}
/* 点線の水平線 */
.dotted-line {
border: none;
border-top: 2px dotted #999;
}
/* 太い線 */
.thick-line {
border: none;
border-top: 5px solid black;
}
/* カラー付きの水平線 */
.colored-line {
border: none;
border-top: 3px solid blue;
}<hr> の適切な使用例
✅ セクションの区切り
文章のトピックを分ける際に <hr> を使用するのが適切です。
<h1>セクション1</h1>
<p>これは最初のセクションの内容です。</p>
<hr>
<h1>セクション2</h1>
<p>これは次のセクションの内容です。</p>✅ 著作権表示の区切り
ページの本文と著作権表記（コピーライト情報）を分ける際に使用することもあります。
<p>この記事の内容は、著作権によって保護されています。</p>
<hr>
<p>© 2025 Web制作ガイド</p><hr> の適切でない使用例（誤った使い方）
❌ デザイン目的のみで使用するのはNG
視覚的な装飾として <hr> を使用するのは避け、代わりに CSS を使用するのが望ましい。
<!-- NG：デザイン目的だけで <hr> を使う -->
<h1>見出し</h1>
<hr style="color: red;">
<p>内容</p>✅ 正しい書き方（CSSを使用）
h1 {
border-bottom: 2px solid red;
}<h1>見出し</h1>
<p>内容</p>使用上の注意点
✅ 意味のある区切りにのみ使用する
<hr>は 視覚的な装飾ではなく、論理的な区切りとして使用するのが推奨される。- レイアウト目的での使用は避け、CSSでスタイルを調整する。
✅ モバイルデザインでは余白を考慮する
- スマートフォンでは
<hr>の表示が大きくなることがあるため、適切なmarginやpaddingを設定するとよい。
関連タグ
<p>– 段落を指定<div>– 汎用ブロック要素（区切りにも利用可能）<section>– コンテンツのセクションを定義<footer>– フッター部分を示す（区切りの役割を持つ場合がある）
まとめ
<hr>タグは、HTML文書の中で区切りを示すための重要な要素 です。
適切な場面で使用することで、ページの構造を整理し、情報の流れを明確にすることができます。
ただし、装飾目的での使用は避け、CSSでスタイルを調整するのが望ましい です。
