ほんっとにはじめてのHTML5とCSS3：[35] 内容の区切りを示す hr 要素

[35] 内容の区切りを示す hr 要素

最終更新日：2017年11月06日　（初回投稿日：2012年02月07日）

<hr>要素はずいぶん前からある要素で「横罫線を表示する」ために使ってた要素でした。
HTML5での役割は 内容的な区切りを示す要素 に変わったんだそうです。

使用する要素	`<hr>`

「hr」は「horizontal rule」の略。
horizontal（ホリゾンタル）は「水平」。
rule（ルール）は「規則」ですが、印刷用語では「罫線」という意味だそうです。
 や と同様に、空要素。終了タグ（</hr>）はありません。

<hr>を使ってみよう

段落は で区切りますよね。この要素にCSSで罫線を付ければいいので、<hr>は不要かな？と思っていましたが、下の例のような場合<hr>で区切った方が便利です。

<p>Aの内容の段落。</p>
<p>まだAの内容が続いている段落。</p>
<hr>
<p>ところでってかんじで、Bの内容に変わった段落。</p>

プレビューするとこうなります。

Aの内容の段落。

まだAの内容が続いている段落。

ところでってかんじで、Bの内容に変わった段落。

<hr>要素は、ブラウザのデフォルトで罫線が引かれるようになっています。

要素の下にCSSでいちいち罫線がひかれていたら、ちょっと目障り。
内容の変わり目で、罫線を入れたいところに <hr>を使います。

<hr>をCSSで装飾してみよう

ブラウザのデフォルトスタイルだとデザイン的にちょっと…という場合は、<hr>要素にCSSを指定して見た目を整えましょう。

サンプルです。

borderプロパティで指定 1

borderプロパティで指定 2

backgroundプロパティで指定

上のサンプルのHTMLです。

<p>borderプロパティで指定 1</p>
<hr class="hr1">
<p>borderプロパティで指定 2</p>
<hr class="hr2">
<p>backgroundプロパティで指定</p>
<hr class="hr3">

サンプルのCSSです。

hr.hr1 {
	border:none;
	border-bottom:#cc3 double 3px
	}
hr.hr2 {
	border:none;
	border-top:#8291ab dotted 5px;
	border-bottom:#ddd dotted 5px
	}
hr.hr3 {
	border:none;
	background: url(image/image.gif) repeat-x;
	height:13px
}

<hr>要素に CSSの指定をする上での注意点。
「border: none」で、ブラウザデフォのボーダーを無しにしてから、自分の指定をしよう。デフォルトスタイルが残ってると邪魔だから。

<hr>要素に限らず、このようにブラウザのデフォルトスタイルを一旦解除する事を CSSの初期化 または CSSのリセット と言います。
ブラウザのデフォルトを残して利用しつつ、各ブラウザでの見た目をなるべく同じにする「CSSのノーマライズ」という方法もあります。
これらについて、こちら↓にザックリとメモっていますのでご覧ください。
ブラウザのデフォルトスタイルを一旦リセットする [CSSリセット] | ＊Web Design 覚え書き＊

また、サンプルで使っている CSS のborderプロパティ、backgroundプロパティについては、こちらをご覧ください。
【13-1】borderと borderのショートハンド
 【15-1】background関連のプロパティ（1/4）

次回予告

次回は、<figure>要素と <figcaption>要素を紹介します。
これらもHTML5からの新要素です。
<figure>は、コンテンツ（図、表、写真、ソースコード、リスト、詩歌など）をグループ化します。
<figcaption>はそのキャプション（タイトル）を表示する<figure>の子要素です。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。