HTML

この記事では、単に横線を引くためではなく、文章の話題や場面が変わる区切りを意味付けするhr要素と、見た目をCSSで整える基本を説明します。

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

hr 要素

• <hr>要素の概要
• 基本構文
• 利用可能な属性
  • グローバル属性
  • 特殊属性
• CSSによるスタイリング
• 実践的なカスタマイズ例
  • グラデーション線
• アクセシビリティとセマンティクス
• ブラウザ対応
• よくある使い方
• 応用テクニック
  • テーマごとに変数化
  • アニメーション
  • レスポンシブ幅
• ベストプラクティスと注意点

<hr>要素の概要

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

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

意味的役割

セクションや段落の区切りをブラウザやスクリーンリーダーに伝える

視覚的役割

水平線を描画し、コンテンツを分かりやすく分断

基本構文

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

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

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

利用可能な属性

グローバル属性

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

• class, id, style, title など
• ARIA属性（role="separator" など）も付与可能

特殊属性

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

以前のHTML4では noshade（線を影なしにする）や width/size（太さや幅）などがありましたが、Modern Webでは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;             /* 上下マージン */
}

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

実践的なカスタマイズ例

グラデーション線

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

<hr class="gradient">

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

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

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

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

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

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

ブラウザ対応

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

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

よくある使い方

セクションの視覚的分離

長い記事やチュートリアルで、章と章の間に挿入。

フォームの区切り

入力フォームのグループごとに境界を明示。

ページ内ナビゲーションの区切り線

サイドバーのメニュー項目間。

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

応用テクニック

テーマごとに変数化

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

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

アニメーション

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

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

レスポンシブ幅

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

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

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

セマンティックな目的か装飾か、目的を明確に分ける

意味的区切りなら<hr>、単なる背景装飾ならCSSのbackground-imageなど別手段検討。

デフォルトスタイルに依存しすぎない

ブラウザ間の見た目差を減らすため、プロジェクトで統一したスタイルを定義。

必要以上に多用しない

過剰な水平線は視覚的ノイズになり、ユーザーの読みやすさを損なうことも。