The <hr> element is used to insert a horizontal rule that signifies a semantic break in a document.
<hr>
(Horizontal Rule)は「水平線」を挿入するための要素です。
もともとは文書内でテーマや話題が変わる箇所を示す「区切り線」として定義されており、視覚的な装飾だけでなく意味的(セマンティック)にも区切りを示す役割を持ちます。
HTML
<p>ここから上の内容。</p>
<hr>
<p>ここから下の内容。</p>
ここから上の内容。
ここから下の内容。
<hr>
は空要素で、終了タグ(</hr>
)は不要です。
改行や前後の余白はブラウザ既定のスタイルに依存します。
<hr>
はあらゆるHTML要素と同様に以下のグローバル属性を持ちます。
class
, id
, style
, title
など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; /* 上下マージン */
}
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-width
とauto
マージンで、狭い画面でもバランスを維持。
CSS
hr {
width: 100%;
max-width: 800px;
margin: 3em auto;
}
<hr>
、単なる背景装飾ならCSSのbackground-image
など別手段検討。