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

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

使用する要素 <hr>

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

<hr>を使ってみよう

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

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

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

Aの内容の段落。

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


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

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

<p>要素の下にCSSでいちいち罫線がひかれていたら、ちょっとうるさいし、内容的に変ですよね。
内容の変わり目だけに罫線を入れたレイアウトにしたいなら、<p>のCSSの操作(borderを可視化するかしないかのCSSを設定する)よりも、<hr>を使った方が手っ取り早い。

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

でもやっぱり、ブラウザのデフォルトだとデザイン的にちょっと…という場合があります。
そんな時は<hr>要素にCSSを指定して、見た目を整えましょう。

プレビューを見てみましょう。

borderプロパティで指定_1


borderプロパティで指定_2


backgroundプロパティで指定


ソースはこちらになります。

<p>borderプロパティで指定_1</p>
<hr id="hrsamp1">
<p>borderプロパティで指定_2</p>
<hr id="hrsamp2">
<p>backgroundプロパティで指定</p>
<hr id="hrsamp3">
hr#hrsamp1 {
	border:none;
	height:4px;
	border-top:#CC3 solid 1px;
	border-bottom:#CC3 solid 1px;}
hr#hrsamp2 {
	border:none;
	height:10px;
	border-left:#966 solid 10px;
	border-bottom: #966 dotted 1px;}
hr#hrsamp3 {
	border:none;
	background: url(http://○○○○/□□□/△△.gif) repeat-x;
	height: 13px;}

<hr>にCSSの指定をする上での注意点。
「border:none;」で、ブラウザのデフォルトのボーダーを無しにしてから、自分の指定をしましょう。
こうしておかないと、新たにCSS指定をしても、ブラウザのデフォルトの指定が残っていて、変になってしまいます。

このように、ブラウザのデフォルトを解除する事を「CSSの初期化」と言います。通常は、CSSファイル(外部ファイル)の冒頭で、サイト全体のCSSの初期化をします。 詳しくは「グラフィックデザイナーのためのCSSレイアウトメモ:CSSスタイル初期化」を参照ください。

最後の「#hrsamp3」は、borderを使わず、背景(background)に画像を敷いています。
画像()をbackgroundに指定し、repeat-x で横方向にリピートさせてます。画像の高さと同じ高さを<hr>に指定しておく事も忘れずに。
この画像を指定するURLは「絶対URL」にしていますが、外部CSSファイルからのパスを書く「相対URL」でもOKです。

「絶対.相対URL」については「ほんっとにはじめてのHTML:[10] 絶対URL と 相対URL」をご参照ください。
「外部CSSファイル」については「グラフィックデザイナーのためのCSSレイアウトメモ:外部CSSの読み込み」をご参照ください。

次回予告

いかがでしたか?

次回は、<figure>と<figcaption>を紹介します。
これ、セクション関連の要素のときに、やるべきだったかも。HTML5からの新要素です。
<figure>は、コンテンツ(図、表、写真、ソースコード、リスト、詩歌など)をグループ化します。<figcaption>はそのキャプション(タイトル)を表示する<figure>の子要素です。

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 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 -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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