<hr>

話題を区切る

HTML2.0 ~ 利用可能

最終更新日: 2020.03.25

どんなタグ?
段落レベルでの話の切り替えや区切りに、
この<hr>タグを使う。

コードサンプル
<section>
<h2>新たなる決意!</h2>
  <p>
    来月から新しい職場で働きます。<br>
    そこで、より良いマークアップエンジニアになれるよう、もう一度、htmlの勉強を1からし直すことにし、それをブログに書き留めていくことにしました。
  </p>
  <hr>
  <p>
    ところで、皆さん。勉強しながら、アウトプットしていますか?<br>
    私は気づくといつもインプットばかり。そこで今回は、ブログを新規に立ち上げたこともあり、このブログで自分なりのアウトプットをしてみよう!とも思っています。
  </p>
</section>

<hr> タグは horizontal Rule (ホリゾンタルルール)の略で、段落レベルの話題の切り替え、区切りを表すことができます。段落レベルより大きい、セクション同士の区切りは、それぞれ<section></section> などで表しているので、<hr>は必要ありません。

どのカテゴリに属しているの?
hrタグは フロー・コンテンツ というコンテンツ・カテゴリに属しているタグです。
梱包できるタグは?
梱包できるタグはありません。

ただのお母さん段落レベルで話を切り替えたいときに使います。

どうやって使うの?
<hr> は開始タグのみで
終了タグは必要ありません。

hrタグは区切りを付けたい段落と段落の間などに<hr> を入れるだけで使えます。

使い方
<hr>
コードサンプル
<article>
  <h2>とある日の朝</h2>
  <p>
    今日はめずらしく朝早くに目が覚めた。<br>
    外はカラッと晴れていて昨日の雨が嘘のように眩しい。
  </p>
  <hr>
  <p>
    頭痛がする…<br>
    昨日、僕は何をしていたんだろう…
  </p>
</article>
ブラウザでの表示例
https://codehero.shibajuku.net/html/hr/sample02/
どこでも使えるの?
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>タグのサンプル

コードサンプル
<article>
  <h2>本日のおすすめショートケーキ</h2>
  <p>
    本日のおすすめショートケーキは、お口に入れた瞬間に思わず笑みがこぼれてしまう、イチゴ本来の甘さを楽しんでいただけるの大人ショートケーキです。
  </p>
  <hr>
  <p>
    こだわりを持って作られたイチゴは、最先端のハウス設備で水・温度管理を一括管理しています。イチゴにとっては、まるで最高級ホテルにいるかのような環境なんですよ。そんな贅沢な環境で育てられたイチゴは、他と甘さが全く違います!口にしたら幸福感を味わえること間違いなし。お店一番のおすすめケーキです。
  </p>
</article>
ブラウザでの表示例
https://codehero.shibajuku.net/html/hr/sample01/

その他<hr>タグのサンプル

コードサンプル
<section>
  <h1>フリーランスの保険</h1>
  <p>フリーランスになるには、保険のことも考えなくてはいけません。</p>
  <hr>
  <p>日本の健康保険にはいくつか種類があります。</p>
  <ul>
    <li>会社員の健康保険</li>
    <li>フリーランスの健康保険(国民健康保険・国民健康保険組合)</li>
    <li>所属していた会社の健康保険を任意で継続</li>
    <li>家族の保険に扶養として入る</li>
  </ul>
  <hr>
  <p>どの保険が適しているかは、その人の業種・家族構成・収入によっても変わってくるので加入条件などを調べてみましょう。</p>
</section>
ブラウザでの表示例
https://codehero.shibajuku.net/html/hr/sample03/

その他<hr>タグのサンプル

コードサンプル
<section>
  <h1>お茶会について</h1>
  <p>お茶会は午前・午後を予定しております。</p>
  <dl>
    <dt>午前</dt>
    <dd><time datetime="10:00">10時</time>〜<time datetime="12:00">12時</time></dd>
    <dt>午後</dt>
    <dd><time datetime="14:00">14時</time>〜<time datetime="16:00">16時</time></dd>
  </dl>
  <hr>
  <p>簡単な軽食をご用意いたします。</p>
</section>
ブラウザでの表示例
https://codehero.shibajuku.net/html/hr/sample04/

ただのお母さん<hr>タグは、セクション内のトピックを区切ったり、話題の転換などに利用します。

デフォルトスタイルは?
デフォルトでは、
グレーの細い罫線。

一般的なブラウザで hr要素を表示した場合、横幅いっぱいに、上下余白のある罫線が引かれ、自動で改行されます。
具体的には、下記のCSSと同等のスタイルが適用されます。

hr要素のデフォルトスタイル
hr {
    display: block;
    unicode-bidi: isolate;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    overflow: hidden;/*Google Chromeのみ*/
    border-style: inset;
    border-width: 1px;
    color: gray;
    -moz-float-edge: margin-box;/* Firefoxのみ */
  }

ただのお母さん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 ~

ただのお母さんモダンブラウザは問題ありません。

このリファレンスを書いた人

ただのお母さん

ただのお母さん

shibajukuに入って、自分の理解していたマークアップが正しいものではなかったと知る。タグの持つ意味・役割は奥が深い!!1つひとつ理解して、骨組みや構造を正確にコンピューターに伝えられるマークアップをしていきたいと日々精進してまいります!!

About サロンメンバーで作った
リファレンスサイト

Shibajuku

Webのスキルを
ワイワイ学んで、
ガンガン活用
するサロン。

このサイトはWebクリエーター養成所
「Shibajuku」のメンバーが作った、
初心者でもわかりやすいHTML + CSSのリファレンスサイトです。

このサイトについて