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

<hr>タグの説明

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

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

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

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

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

<hr>タグの特徴

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

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

color（非推奨）

線の色を指定出来ます。スタイルシートを採用して下さい。

width（非推奨）

線の幅をpxや％で指定します。スタイルシートを採用して下さい。

size（非推奨）

線の太さをpxや％で指定ます。スタイルシートを採用して下さい。

グローバル属性

全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。

イベントハンドラ

全てのHTML要素に指定できるコンテンツ属性です。

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

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

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

	<hr>

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

CSSによる罫線の装飾

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

<div class="samp_box">
	<p>
		１番目の段落です。文章の内容が書かれています。
		１番目の段落です。文章の内容が書かれています。
		１番目の段落です。文章の内容が書かれています。
	</p>
		<hr>
	<p>
		２番目の段落です。文章の内容が書かれています。
		２番目の段落です。文章の内容が書かれています。
		２番目の段落です。文章の内容が書かれています。
	</p>
</div>

.samp_box hr {
	width: 80%;
	margin: 1.5em auto;
	border: 1px dotted #666666;
}

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

<div class="samp_box">
	<p>
		１番目の段落です。文章の内容が書かれています。
		１番目の段落です。文章の内容が書かれています。
		１番目の段落です。文章の内容が書かれています。
	</p>
		<hr>
	<p>
		２番目の段落です。文章の内容が書かれています。
		２番目の段落です。文章の内容が書かれています。
		２番目の段落です。文章の内容が書かれています。
	</p>
</div>

.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にしてから、改めて各プロパティを指定しています。

.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;
}