hrタグとは?CSSでの設定方法や使うタイミングについて解説!

hrタグの設定方法が知りたい。
hrタグはどのようなデザインに変えることができるの?
hrタグはどのような時に使用するの?

このような悩みを抱えていませんか?
今回はhrタグの使い方についてプログラミング初心者の方にもわかるように、わかりやすく解説していきます。
この記事を最後まで読めば次のようになるはずです。

・hrタグの基本的な使い方がわかる
・hrタグの使うタイミングがわかり適正箇所にhrタグを入れられる
・hrのデザインをカスタマイズできる

それでは早速説明していきます。

hrタグとは

hrタグの読み方

hrは「horizontal rule(ホリゾンタル ルール)」を略してhr(エイチアール)と呼びます。
horizontal(ホリゾンタル)は水平、rule(ルール)は罫線を意味し、水平の横線を引くために用いられるタグです。

hrタグの説明

hrタグは文章を区切る際に用いられます。
(具体的な使い方は後ほど解説)

hrタグについて知っておきたいポイントは2つあります。

hrタグの知っておきたいポイント
  1. ブロックレベル要素
  2. 空要素

順番に解説します。

ブロックレベル要素

htmlの要素は大きくわけてインライン要素ブロック要素に分類されます。
hrタグはブロック要素に分類されます。

ブロック要素とインライン要素がわからない人のために簡単に説明すると・・・

ブロック要素・自動的に改行になるため並べることができないが、幅や高さなどを自由に設定できるためボックスなどを作成する際に使用されます。
インライン要素・横幅や高さなどは設定できないが、改行せず横並びにすることができるので、文字を装飾する際によく使用されます。

この2つはhtmlの基本なので抑えておきましょう。

空要素

空要素は開始タグのみで終了タグがいらないことをいいます。
hrの他に改行を表すbrタグなどが空要素になります。

hrタグで利用できる属性

hrタグのレイアウトはhtmlではなくてcssで設定するようにしましょう。
HTML 4.01のすべてのレイアウト属性(align、noshade、size、width)は、 HTML 4.01・非推奨→HTML5・サポート終了となりました。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox 完全対応
nternet Explorer 完全対応
Opera 完全対応
Safari 完全対応
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome 完全対応
Android版Firefox 完全対応
Android 版 Opera 完全対応
iOS版Safari 完全対応
Samsung Internet 完全対応

hrタグは、主要の全ブラウザがサポートしているため安心して使用できます。

hrタグの基本的な使い方

hrはcssで設定しよう!

先ほども説明した通り、<hr size=”3″>このように、属性で設定するやり方はHTML5ではサポートが終了となったため、cssで設定する方法をマスターしましょう。

では、実際にcssで設定した様子をみていきましょう。

【width】横幅を変えてみよう

widthを100%にすると横幅いっぱいに広げることができます。

【size→height】線の太さを変えてみよう

<hr size=”3″>のようにすればsizeを使用できますが、cssではsizeではなくてheightを使用します。

heightだけだと背景がない枠ができてしまうのでbackground-colorで背景色も指定します。

【align→margin】線を寄せてみよう

線を寄せる際は<hr align=”left”>のようにすればalginを使用できますが、cssではalginではなくてmarginで空白をを指定します。

【noshade→border: 0 none;】立体的で陰のない線を表現してみよう

htmlではnoshadeで表現していた影のない線ですが、cssではborder: 0 none;で表現をします。

hrタグと類似する要素との違い

hrタグと似た次の要素の違いを知り、使い方をマスターしましょう。

【uタグ】下線との違い

hrは区切り線として使用しますが、レイアウト的に下線をひきたい場合はuタグを使用するようにしましょう。
uタグはインライン要素のため前後で改行が入らず、文字を装飾するのに適しています。
ですが、下線はリンクタグと間違えやすいので注意が必要です。

【border】枠線との違い

レイアウトの関係で下線を引きたい場合はborderを使用するようにしましょう。
{border: 線種 太さ 色;}で指定し、border-bottomで下線のみ線をひくことも可能です。

uタグとborderの違い
uタグもレイアウトで使う線じゃないの?と思った人も多いと思いますが、borderタグは外枠、uタグは下線を意味します。
uタグは文字の一部分のみを装飾する際に使用し、borderは文全体を装飾する際に使用するため、見出しやボックスのレイアウトとして使うことが多いです。

【section】章を区切るタグとの違い

文字の装飾で下線を引きたい時はuタグやborderタグを使用しましょうというお話をしました。
つまり、hrタグは意味を区切る際に使用するのですが、同じく意味を区切るタグにsectionタグやarticleタグがあると思います。
この違いはなんなのでしょうか。

hrの立ち位置としては、sectionやarticleで区切るほどではないけど、文を区切りたい時に使用します。

こんな感じです。

【結果】hrタグこんな時に使用します
・hrタグは段落レベルで意味を区切りたい時に使用します。
・文字の装飾で下線を引きたい時は、borderやuタグを使用しましょう。
border・ブロック要素なので見出しやボックスの外枠の線に使用
u・インライン要素なので文字の一部分を装飾する際に使用(リンクタグと間違えられないように注意)

hrタグの応用的な使い方

hrタグの基本的な使い方や使うタイミングについて知ったところで、最後に応用編でデザインを修正してみましょう。

hrタグを二重線や点線に変えてみよう

点線の設定方法

borderは線の種類・太さ・色で指定できます。
【dotted】は点線を意味します。

二重線の設定方法

【double】は二重線を意味します。

コピペOK!おしゃれなhrタグを紹介

使いやすいhrタグを順番に解説します。

実線

solidは実線を意味し、シンプルで使いやすい区切り線です。

背景色つき

backgroundを指定することで背景をつけることができます。
backgroundに画像を指定すれば、区切り線に画像を使うこともできます。

立体的な線

上と下にそれぞれ指定することで、立体的な線を表現することもできます。

影付きの線

box-shadowを使用すれば影をつけることもできます。

今回は簡単なhrのデザインを紹介しました。
さらに応用をすれば背景に画像を入れたり、グラデーションや、ストライプ、記号を重ねたりもできます。
気になる人は検索してみてください。

まとめ

いかがでしたか?
今回はhrタグの基本的な使い方や、今すぐコピペで使えるhrタグについて紹介しました。
今までhrタグについてよくわからずもやっとした気持ちで使用していた方も多いのではないでしょうか。

そんな方にこの記事が少しでも役に立てば幸いです。

参考文献:https://html-coding.co.jp/annex/dictionary/html/hr/#:~:text=%E3%80%8CHR%E3%80%8D%E3%81%A8%E3%81%AF%E3%80%8Chorizontal,%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82