＜hr要素＞ - テーマの区切り

公開日: 2017/02/09

hr要素はテーマの区切りを表す要素です。物語においてシーンが変わる場面など、内容が転換することを特に強調したい場合に用います。視覚的な区切り線として利用するものではありません。

概要

名前

hr (Horizontal rule)

カテゴリー

Flow content

配置できる場所

Flow contentが期待される場所。

コンテンツモデル

空要素のため、子ノードを持ちません。

タグの省略

省略できません。

DOM Interface

HTMLHRElement

デフォルトのスタイル

hr {
	display: block;
	-webkit-margin-before: 0.5em;
	-webkit-margin-after: 0.5em;
	-webkit-margin-start: auto;
	-webkit-margin-end: auto;
	border-style: inset;
	border-width: 1px;
}

仕様書

https://html.spec.whatwg.org/multipage/semantics.html#the-hr-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

話題の転換

hr要素は話題が転換することを強調したい部分に使用します。例えば、下記の例が挙げられます。

物語で、シーンが変わる部分。
日記で、本題から逸れて余談を始める部分。
製品マニュアルで、説明する部品が変わる部分。

間違った使い方

hr要素は視覚的な区切り線として利用してはいけません。例えば、「見出しの下に線があるとデザイン的にかっこいいから」という理由で使ってはいけません。

HTML

<h1>見出し</h1>
<hr>
<p>テキストです。</p>

デザインで線を表示したい場合は、hr要素ではなくスタイルシートを利用して下さい。

HTML

<h1>見出し</h1>
<p>テキストです。</p>

CSS

h1 {
	border-bottom: 1px solid #000 ;
}

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜hr要素＞ - テーマの区切り</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/hr/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>hr要素は、物語におけるシーンの変わり目など、話題の転換を強調したい部分に用いましょう。</p>

<h1>適当な物語</h1>
<p>私は会社でパソコンとにらみ合いっこしながら仕事を進めていた。トラブルがないことを祈りながら。</p>
<p>仕事終了間際のこの時間が一番緊張する。このままあと5分、電話が鳴らなければセーフだ。頼む、鳴らないでくれ…。</p>

<hr>

<p>今日は待ちに待った休日だ。私は海に来ていた。海はやはりいい。冬でもやはり海はいい。</p>
<p>実はあの日、電話は鳴っていた。鳴っていたのに私は…</p>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/586/"> <meta charset="utf-8"> <title>【デモ】＜hr要素＞ - テーマの区切り</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/hr/"> </head> <body>

<p>hr要素は、物語におけるシーンの変わり目など、話題の転換を強調したい部分に用いましょう。</p> <h1>適当な物語</h1> <p>私は会社でパソコンとにらみ合いっこしながら仕事を進めていた。トラブルがないことを祈りながら。</p> <p>仕事終了間際のこの時間が一番緊張する。このままあと5分、電話が鳴らなければセーフだ。頼む、鳴らないでくれ…。</p> <hr> <p>今日は待ちに待った休日だ。私は海に来ていた。海はやはりいい。冬でもやはり海はいい。</p> <p>実はあの日、電話は鳴っていた。鳴っていたのに私は…</p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>