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

最終更新日:2017年11月06日  (初回投稿日:2012年02月07日)

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

使用する要素 <hr>

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

<hr>を使ってみよう

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

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

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

Aの内容の段落。

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


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

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

<p>要素の下に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>の子要素です。

関連記事
この記事をはてなブックマークに追加

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

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

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.