hrの使い方

hr要素

☆説明

水平線が表示されます。同ページ内で、話題を変えるときの境界線などに設定します。

閉じタグは必要ありません。<hr>と記述すれば水平線が表示されます。

ページいっぱいに広がるので、
スタイルシート（CSS）でワイズ（width）の指定をすると幅を調整できます。

CSSソースコードの例

hr{
	width:80%;
	border-width:1px;
	border-style:dotted;
	border-color:#F93;   
}

widthでhrの幅を指定出来ます。border-widthで線の幅、border-styleで点線や実践・二重線などを指定出来ます。border-colorで線の色を指定します。

<hr>使用上での注意点

<hr>は頻繁に使うものではなく、コンテンツ内にどうしても必要な時に使用するべきです。

コンテンツ内で頻繁に使う水平線（コンテンツを仕切る為のデザイン）はスタイルシートで表現した方がいいでしょう。たとえば、<div></div>で作ったボックスにborder-bottom:1px solid #ccc;などと記述して、ボックス自体に下線を付ける方法をお勧めします。

HTMLは極力シンプルに記述するということを心がけましょう。検索エンジン対策として有効な考え方になります。ただ、使いたければ使っても問題はないと思います。コンピューターにとっても読みやすいことも大事です。

デザインはスタイルシートでおこなうのが、ベストな方法です。

hrカスタマイズ例

hrをカスタマイズすると、おしゃれな水平線を作ることができます。

hrに文字を入れる

例えばこんな感じにすることもできます。

HTML5のコンテント（content）属性を指定し、文字を指定しておきます。

HTML

CSS

.hr-text {
	line-height: 1em;
	position: relative;
	outline: 0;
	border: 0;
	color: black;
	text-align: center;
	height: 1.5em;
	opacity: .5;
}
.hr-text:before {
	content: '';
	background: -webkit-linear-gradient(left, transparent, #818078, transparent);
	background: linear-gradient(to right, transparent, #818078, transparent);
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 1px;
}
.hr-text:after {
	content: attr(content);
	position: relative;
	display: inline-block;
	color: black;
	padding: 0 .6em;
	line-height: 1.6em;
	color: #000;
	background-color: #fcfcfa;
}