HTML

The <hr> element is used to insert a horizontal rule that signifies a semantic break in a document.

hr 要素

<hr>要素の概要

<hr>(Horizontal Rule)は「水平線」を挿入するための要素です。

もともとは文書内でテーマや話題が変わる箇所を示す「区切り線」として定義されており、視覚的な装飾だけでなく意味的(セマンティック)にも区切りを示す役割を持ちます。

意味的役割
セクションや段落の区切りをブラウザやスクリーンリーダーに伝える
視覚的役割
水平線を描画し、コンテンツを分かりやすく分断

基本構文

HTML

<p>ここから上の内容。</p>
<hr>
<p>ここから下の内容。</p>

ここから上の内容。


ここから下の内容。

<hr>は空要素で、終了タグ(</hr>)は不要です。

改行や前後の余白はブラウザ既定のスタイルに依存します。

利用可能な属性

グローバル属性

<hr>はあらゆるHTML要素と同様に以下のグローバル属性を持ちます。

特殊属性

HTML5以降、<hr>に固有の属性はありません。

以前のHTML4では noshade(線を影なしにする)や width/size(太さや幅)などがありましたが、Modern WebではCSSで制御します。

CSSによるスタイリング

デフォルトの水平線はブラウザごとに異なります。見た目を自由にカスタマイズするにはCSSを利用します。

CSS

/* 線の色・太さ・スタイルをカスタマイズ */
hr.custom {
	border: none;                 /* 既定の枠線を消す */
	border-top: 2px solid #666;   /* 上辺だけ線を描画 */
	margin: 2em auto;             /* 上下マージン */
}

/* 点線 */
hr.dotted {
	border-top: 1px dotted #999;
	margin: 2em auto;             /* 上下マージン */
}

/* 破線 */
hr.dashed {
	border-top: 1px dashed #999;
	margin: 2em auto;             /* 上下マージン */
}

/* 幅の設定 */
hr.short {
	width: 50%;                   /* 50%幅 */
	margin: 2em auto;             /* 上下マージン */
}

HTML

<hr class="custom">
<hr class="dotted">
<hr class="dashed">
<hr class="short">




実践的なカスタマイズ例

グラデーション線

CSS

hr.gradient {
	border: none;
	height: 4px;
	background: linear-gradient(to right, #f06, transparent);
}

HTML

<hr class="gradient">

アクセシビリティとセマンティクス

デフォルトで <hr> はスクリーンリーダーに対し role="separator" として扱われます。

必要に応じて明示的に指定することも可能です。

装飾のみが目的なら、aria-hidden="true" を付与し、読み上げを抑制できます。

HTML

<hr aria-hidden="true" class="decorative">

意味的区切りを届けたい場合は、見出し(<h2>など)を併用するとさらに効果的です。

ブラウザ対応

すべてのモダンブラウザでサポートされています。

古いIE(IE8以前)ではborderによるスタイルに制限がありますが、近年の開発ではあまり問題になりません。

よくある使い方

セクションの視覚的分離
長い記事やチュートリアルで、章と章の間に挿入。
フォームの区切り
入力フォームのグループごとに境界を明示。
ページ内ナビゲーションの区切り線
サイドバーのメニュー項目間。

HTML

<section>
	<h2>ステップ1:準備</h2>
	<!-- 内容 -->
</section>
<hr>
<section>
	<h2>ステップ2:実装</h2>
	<!-- 内容 -->
</section>

応用テクニック

テーマごとに変数化

CSSカスタムプロパティを使い、色や太さをテーマ単位で切り替え。

CSS

:root {
	--hr-color: #ccc;
	--hr-thickness: 2px;
}
hr {
	border: none;
	border-top: var(--hr-thickness) solid var(--hr-color);
}

アニメーション

ページ読み込み時にフェードインさせる。

CSS

hr.fade {
	opacity: 0;
	animation: fadeIn 1s forwards;
}
@keyframes fadeIn {
	to { opacity: 1; }
}

レスポンシブ幅

max-widthautoマージンで、狭い画面でもバランスを維持。

CSS

hr {
	width: 100%;
	max-width: 800px;
	margin: 3em auto;
}

ベストプラクティスと注意点

セマンティックな目的か装飾か、目的を明確に分ける
意味的区切りなら<hr>、単なる背景装飾ならCSSのbackground-imageなど別手段検討。
デフォルトスタイルに依存しすぎない
ブラウザ間の見た目差を減らすため、プロジェクトで統一したスタイルを定義。
必要以上に多用しない
過剰な水平線は視覚的ノイズになり、ユーザーの読みやすさを損なうことも。