<hr> 段落に区切りを与えて水平線(罫線)を引く

取り扱い 現行の標準
カテゴリ フロー・コンテンツ
親にできる要素 フロー・コンテンツを受け入れる要素
子にできる要素 なし
対応ブラウザ caniuseで確認

<hr>タグの説明

<hr>は、段落に区切りを与えて水平線(罫線)を引く時に使用します。この要素は、かつて画面に横幅一杯の線を引くためだけに使用されていましたが、現在は意味論的に一区切りつけたい箇所に適用します。

文章には見出しと段落があり、取り扱う項目に応じて章や節を分けます。<hr>の配置に適しているのは、段落と段落の間です。章や節を見た目で区別したい場合は、それぞれの要素にCSS(スタイルシート)を適用して下さい。<hr>は、あくまで閑話休題を表すものであり、視覚的な効果は二次的なものです。

これ自体で一つの完結した要素になるため、終了タグを記述する必要はありません。また、ブロックレベルの領域を確保し、自動的に改行を行います。

初期値では、影の付いた立体的な線で表示されます。属性を与える事で、ある程度自由な見た目に設定出来ますが、現在はスタイルシートによる装飾を推奨します。

HTML4までは、水平線が描画されるという見た目だけの定義でしたが、HTML5で話題やテーマの区切りを示す要素としての位置づけに変更されました。同じページの中で複数の話題を扱う場合には、<article><section>を分けるなどして、より正しい文章構造を意識しましょう。

<hr>タグの特徴

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • この要素は空要素です。開始タグのあとに終了タグを記述する必要はありません。
  • この要素は文章のアウトラインに影響を与えませんが、段落に一区切りをつける意味論的な役目があります。

<hr>に指定できる主な属性

color(非推奨)
線の色を指定出来ます。スタイルシートを採用して下さい。
width(非推奨)
線の幅をpxや%で指定します。スタイルシートを採用して下さい。
size(非推奨)
線の太さをpxや%で指定ます。スタイルシートを採用して下さい。
グローバル属性
全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
イベントハンドラ
全てのHTML要素に指定できるコンテンツ属性です。

<hr>の使い方とサンプル

この要素を設置する箇所は段落と段落のあいだです。文章の流れが一区切りつくタイミングが適切と言えます。セクションを越えるような場所で区切り線を引きたい場合は、CSSで該当する要素に装飾を加えましょう。

HTML
<p>文章の内容です。同じ階層のセクションに属しています。</p>

	<hr>

<p>文章の内容です。同じ階層のセクションに属しています。</p>
表示確認

CSSによる罫線の装飾

<hr>の見た目の初期値は灰色の水平線です。多くの場合、そこに数ピクセルの縦幅と窪みが与えられます。以下に示すのは、スタイルシートで見た目の装飾を変更した時の例です。

表示確認
HTML
<div class="samp_box">
	<p>
		1番目の段落です。文章の内容が書かれています。
		1番目の段落です。文章の内容が書かれています。
		1番目の段落です。文章の内容が書かれています。
	</p>
		<hr>
	<p>
		2番目の段落です。文章の内容が書かれています。
		2番目の段落です。文章の内容が書かれています。
		2番目の段落です。文章の内容が書かれています。
	</p>
</div>
CSS
.samp_box hr {
	width: 80%;
	margin: 1.5em auto;
	border: 1px dotted #666666;
}

次に、小説の閑話休題に見られるような表現に変えてみましょう。このように装飾を変えたとしても、文章の構造が全く変わっていない点に注目して下さい。

表示確認
HTML
<div class="samp_box">
	<p>
		1番目の段落です。文章の内容が書かれています。
		1番目の段落です。文章の内容が書かれています。
		1番目の段落です。文章の内容が書かれています。
	</p>
		<hr>
	<p>
		2番目の段落です。文章の内容が書かれています。
		2番目の段落です。文章の内容が書かれています。
		2番目の段落です。文章の内容が書かれています。
	</p>
</div>
CSS
.samp_box hr {
	margin: 1.5em auto;
	border: none;
	text-align: center;
	overflow: visible;
}
.samp_box hr::after {
	content:"※ ※ ※ ※ ※";
	position: relative;
	font-size: 0.8em;
}

CSSのcontentプロパティは、置換要素と言って文章上の意味に影響を与えません。そのため、文章そのものの純度を求められるような小説や論文に適しています。

区切り線の色々な装飾サンプル

CSSでデザインできる区切り線の装飾サンプルをまとめて紹介します。ブラウザの初期値をリセットするために、余白や境界線や高さを全て0にしてから、改めて各プロパティを指定しています。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 0 1rem 3rem 1rem;
	background-color: #eee;
}
.samp_box  > h2 {
	margin: 2rem 0 1rem 0;
	color: #333;
	font-size: 1rem;
}
.samp_box hr {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
#hr_1 {
	border-top: 1px solid #aaa;
}
#hr_2 {
	border-top: 1px dashed #aaa;
}
#hr_3 {
	border-top: 1px dotted #aaa;
}
#hr_4 {
	border-top: 3px double #aaa;
}
#hr_5 {
	border-top: 1px solid #aaa;
	border-bottom: 1px solid #fff;
}
#hr_6 {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #aaa;
}
#hr_7 {
	border-top: 3px solid #999;
	border-image-source: linear-gradient(90deg, #fff1 10%, #aaa 30% 70%, #fff1 90%);
	border-image-slice: 1;
}
#hr_8 {
	height: 10px;
	background-image: repeating-linear-gradient(45deg, #aaa 0, #aaa 1px, transparent 0, transparent 50%);
	background-size: 10px 10px;
}
#hr_9 {
	height: 1rem;
	border-top: 1px solid #aaa;
	text-align: center;
	overflow: visible;
}
#hr_9::after {
	content: "TOPICS";
	display: inline-block;
	position: relative;
	top: -1rem;
	height: 2rem;
	padding: 0 1rem;
	background: #eee;
	color: #999;
	line-height: 2rem;
}

<hr>に関連するHTMLタグ

文字列をグループ化して意味を与える要素
<abbr> 略語(頭字語以外)であることを表す
<address> 連絡先(問い合わせ先)として扱う
<blockquote> 複数行にまたがる長文の引用を表す
<cite> 出典先、参照先を表す
<code> プログラムやスクリプトとして扱う
<data> 文字列に機械的な識別情報を与える
<del> 文章の中で削除された部分として扱う
<dfn> 定義用語として扱う
<em> 意味を強調する
<hgroup> 見出しに付随する副題やキャッチフレーズをグループ化する
<hr> 段落に区切りを与えて水平線(罫線)を引く
<i> 文章の中で慣用句や特定の用語を表す
<ins> 文章の中で新たに追加された部分を表す
<kbd> キーボード入力される文字であることを示す
<main> 文章の中で主要な内容であることを示す
<q> 行に収まる程度の短い引用を表す
<s> 正確ではなくなった内容であることを表す
<samp> プログラムによる出力結果のサンプルとして扱う
<small> 細則のような付帯注釈を表す
<strong> 重要な情報として扱う
<time> 日付や時刻を正確に示す
<u> 文字列に注釈があることを示し下線(アンダーライン)を引く
<var> 変数や引数として扱う