どんなタグ?
段落レベルでの話の切り替えや区切りに、
この<hr>タグを使う。
<hr>
タグは horizontal Rule の略で、段落レベルの話題の切り替え、区切りを表すことができます。段落レベルより大きい、セクション同士の区切りは、それぞれ<section>
〜</section>
などで表しているので、<hr>
は必要ありません。
- どのカテゴリに属しているの?
- hrタグは フロー・コンテンツ というコンテンツ・カテゴリに属しているタグです。
- 梱包できるタグは?
- 梱包できるタグはありません。
段落レベルで話を切り替えたいときに使います。
どうやって使うの?
<hr> は開始タグのみで
終了タグは必要ありません。
hrタグは区切りを付けたい段落と段落の間などに<hr>
を入れるだけで使えます。
- 使い方
-
<hr>
- どこでも使えるの?
- hrタグは フロー・コンテンツ が配置できるところならどこでも使えます。
- 気をつけることは?
- hrタグを使用すると横幅一杯に水平線(罫線)が引かれ、自動的に改行されます。
HTML4.01では、hr要素は水平線が描画されると定義されていますが、HTML5からはテーマ・区切りを表す要素と定義され、水平線の定義はありません。水平線(罫線)が引けるからといって、装飾で使うのはNGです。
きちんとhrタグの意味を理解して使い分けることが大切です。
例えば、見出し(タイトル)の下の下線などは装飾にあたるので、そういう場合はCSSで設定しましょう。
使える属性は?
HTML5では、グローバル属性しか 使わない。
<hr>
タグは、どの要素にでも使えるグローバル属性が使えます。
ただし、HTML4.01までは以下の属性も使えました。
align
属性
HTML4.01 非推奨
HTML5 廃止
文字の行揃えを指定する属性です。 HTML4.01で非推奨、HTML5で廃止となりました。
- 属性値
-
left
初期値- 左揃え
center
- 中央揃え
right
- 右揃え
justify
- 両端揃え
color
属性
HTML4.01 非推奨
HTML5 廃止
線の色を指定する属性です。 HTML4.01で非推奨、HTML5で廃止となりました。
- 属性値
-
16進数RGB値 / カラーネーム
- 線の色を16進数または色名で指定
size
属性
HTML4.01 非推奨
HTML5 廃止
線の太さを指定する属性です。 HTML4.01で非推奨、HTML5で廃止となりました。
- 属性値
-
- 単位付きの数値
- 線の太さを単位付きの数値で指定
width
属性
HTML4.01 非推奨
HTML5 廃止
線の長さを指定する属性です。 HTML4.01で非推奨、HTML5で廃止となりました。
- 属性値
-
- 単位付きの数値
- 線の長さを単位付きの数値で指定
noshade
属性
HTML4.01 非推奨
HTML5 廃止
立体的な影を持たない、平面的な線を表示する属性です。 HTML4.01で非推奨、HTML5で廃止となりました。
- 属性値
-
noshade
- 立体的な影を付けない線で表示
今は、グローバル属性しか使いません。
サンプルが見たい
<hr>タグを使ったサンプルを
紹介。
<hr>
タグを使ったサンプルを紹介します。
基本的な<hr>タグのサンプル
その他<hr>タグのサンプル
その他<hr>タグのサンプル
<hr>タグは、セクション内のトピックを区切ったり、話題の転換などに利用します。
デフォルトスタイルは?
デフォルトでは、
グレーの細い罫線。
一般的なブラウザで hr要素を表示した場合、横幅いっぱいに、上下余白のある罫線が引かれ、自動で改行されます。
具体的には、下記のCSSと同等のスタイルが適用されます。
CSSで余白の大きさや、線の色を変えたり点線にしたり、画像にも変更できますよ。
対応ブラウザは?
基本的にどのブラウザでも大丈夫。
<hr>タグは HTML2以降で利用可能で、主に以下のブラウザが対応しています。
- Internet Explorar
- Internet Explorar 2 ~
- Edge
- Edge 12 ~
- Google Chrome
- Google Chrome 1 ~
- Firefox
- Firefox 1 ~
- Safari
- Safari 1 ~
- Opera
- Opera 6 ~
モダンブラウザは問題ありません。