HTML 区切り「hr要素」

区切りを入れます。<区切り>

もう一度区切りを入れます。<区切り>

区切り「hr要素」

　文章を分けるためなどに区切りを入れることがあるでしょう。
HTMLで区切りを入れるためには「hr要素」を使います。
<hr>と書けば区切りをしてくれます。とても簡単ですね！

　この「hr要素」は、「br要素」と同じで、終了タグがありません。<hr>だけで一つの要素になります。
終了タグがないことを示す方法として、<hr />といった書き方もあります。

　この要素を使う上で一つ気をつけなくてはいけない点は、「p要素」の中では使用できないということです。
「区切り」なのですから、せめて段落はわかれていないとおかしな文章になってしまいますよね。
なので、この「hr要素」は通常「p要素」と「p要素」の間など段落の区切りに使います。

　ちなみに、「hr要素」の「hr」はhorizontal ruleの略で、水平な罫線といった意味があります。

区切り線を変化させる「style属性」

　「div要素」や「span要素」と同じく、「hr要素」にはブラウザ上の表示を変える「style属性」があります。
この「style属性」はその要素内だけで有効になる「スタイルシート」というものを指定します。

　スタイルシートの詳細についてはまたの機会に説明します。
ここでは線の太さ、形、色を変える方法を簡単に説明します。

線の太さ、形、色を変える、border-topプロパティ

では、「hr要素」を使って線の形と色を変える方法を説明します。
まずは、線の太さを1ピクセル、形を実線、色を赤に変えてみましょう。
線の太さを1ピクセル、形を実線、色を赤にするには、
<hr style="border:0;border-top:1px solid #FF0000;">
もしくは、
<hr style="border:0;border-top:1px solid red;">
と記述します。
実際にこのように記載した「hr要素」を使うとこのような表示になります。

　一番最初のborder:0;はいったい何をしているのかというと、「hr要素」の線を消しています。
なぜ消す必要があるのかというと、ブラウザごとに「hr要素」の線の表示が異なっているからです。
こうすることで、どのブラウザでも同じような境界線を引くことができるようになります。

　次のborder-top:1px solid red;で太さ、形、色を指定しています。

　まずborder-top:に続く1pxで、線の太さを1ピクセルにしなさいと指定しています。その他にもいろいろな指定方法がありますが、
ピクセル単位での指定方法、もしくは「thin」「medium」「thick」（それぞれ薄い、中間、厚い）といった指定の仕方もあります。
実際に、上からthin、medium、thickを指定した例を赤線で表示します。

　つぎのsolidでは、実線を引きなさいと指定しています。
このsolidの部分を変えることで、線の形、線の引き方を変えることができます。
この線の形には以下の種類があります。

none: 線を引きません。
hidden: noneと同じく線を引きません。
dotted: 点線を引きます。
dashed: 破線を引きます。
solid: 実線を引きます。
double: 二重線を引きます。
groove: くぼみのような線を引きます
ridge: grooveと逆のような線を引きます。
inset: 箱をはめ込んだような線を引きます。
outset: insetと逆のような線を引きます。

　言葉だけではわかりにくいので、線の太さをthick、色を赤に指定した線をそれぞれ表示します

・none

・hidden

・dotted

・dashed

・solid

・double

・groove

・ridge

・inset

・outset

　今回はinsetとoutsetの違いがわかりにくいかもしれませんが、この線の引き方は区切りをする「hr要素」の用途には向いていないので、あまり気にしないでください。

　最後の#FF0000、redで色を赤に指定しています。
この部分を#00FF00、greenにすると緑、#0000FF、blueにすると青になります。
色の指定の仕方は、「div要素」の説明で詳しく説明しているのでそちらをご覧ください。

背景色を変える、background-colorプロパティ

「div要素」と「span要素」で説明した背景色を変える、background-colorプロパティが「hr要素」にもあります。
線に背景色なんてないのでは？と思うかもしれませんが、実はあります。
たとえば、点線の線がない部分が背景色になります。
「hr要素」を使って文字の背景色を赤に変えるには、
<hr style="background-color:#FF0000;">
もしくは、
<hr style="background-color:red;">
と記述します。

サンプル

　今回説明した、「hr要素」を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>～</body>)に書いてください。

サンプルソースコード

<div style="background-color:silver;">
１ピクセルの実線を青色で引いて区切りをします。<br>
<hr style="border:0;border-top:1px solid blue;">
細い破線を青色で引き、背景色を赤にして区切りをします。<br>
<hr style="border:0;border-top:thin dashed blue;background-color:red;">
太い点線を白色で引き、背景色を黒にして区切りをします。<br>
<hr style="border:0;border-top:thick dotted white;background-color:black;">
15ピクセルの二重線を赤色で引き、背景色を緑にして区切りをします。
<hr style="border:0;border-top:15px double red;background-color:green;">
普通の太さの実線を透明色で引き、背景色を黒にして区切りをします。
<hr style="border:0;border-top:medium solid transparent;background-color:black;">
</div>

表示結果

１ピクセルの実線を青色で引いて区切りをします。

細い破線を青色で引き、背景色を赤にして区切りをします。

太い点線を白色で引き、背景色を黒にして区切りをします。

15ピクセルの二重線を赤色で引き、背景色を緑にして区切りをします。

普通の太さの実線を透明色で引き、背景色を黒にして区切りをします。

「hr要素」のまとめと次回記事について

　今回説明した「hr要素」はいかがでしたでしょうか。
「hr要素」は区切りという意味で、線はあくまでオマケなのですが、使い方次第ではきれいな区切りができると思いませんか？

　次回は、画像を表示する「img要素」の説明をします。
以上、当サイト管理人のAsterismでした。

Think & Create

～想像と創造をあなたに～