このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

hr”要素:テーマの区切り

記事Apr. 19th,2015
July 14th,2020
テーマの区切りを表す要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

カテゴリー フロー・コンテンツ
利用場所 フロー・コンテンツが置ける場所
内容
タグの省略 終了タグはありません

hr”要素は段落レベルのテーマの区切りを表す要素です。

物語の中の場面の切り替わりや参考書の中の節での話題の切り替わりを表すのに使用することができます。

サンプルコード

<section>
<h1>バナナの果実の話</h1>
<p>
栄養豊富なバナナは高カロリーと思われがちです。しかし、実は1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーです。しかも日常生活で不足しがちな栄養素がバランスよく含まれてるので、健康な生活にかかせない果物なのです。
</p>
<hr>
<p>
ところでこのバナナ、一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。
</p>
</section>

バナナの果実の話

栄養豊富なバナナは高カロリーと思われがちです。しかし、実は1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーです。しかも日常生活で不足しがちな栄養素がバランスよく含まれてるので、健康な生活にかかせない果物なのです。


ところでこのバナナ、一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。

一般的なブラウザでは“hr”要素の位置に水平線が表示されます。

属性と値

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性
過去に定義されていた属性
属性
属性 説明 説明
align=""注意 水平方向の表示位置 left 左寄せ
center 中央
right 右寄せ
noshade=""注意 単色で表示 noshade 単色で表示
size=""注意 水平線の高さ 正の整数 高さのピクセル数
width=""注意 水平線の横幅 正の整数 横幅のピクセル数
正の整数% 横幅の表示領域に対する割合

“水平線”を表す

HTML4まで

HTML4までは“hr”要素は水平線を表す要素でした。HTML5でも一般的なブラウザでは“hr”要素の位置に水平線が表示されますが、文章の構造とは関係なく水平線を引く目的で使用するのは適切ではありません。

代替方法

特別な意味を持たせることなく水平線を引きたい場合は画像として埋め込むか、p”要素div”要素などにスタイルシートのborder-bottom”プロパティborder-top”プロパティなどを使用して境界線を部分的に引きます。

.horizontal-line {
border-top: 1px groove;
border-bottom: 1px groove;
}
<p class="horizontal-line">特に意味のないテキストだが上下に水平線を引きたかったのでスタイルシートで水平線を引いてみた。</p>

特に意味のないテキストだが上下に水平線を引きたかったのでスタイルシートで水平線を引いてみた。

仕様書

hr”要素はHTML2.0から定義されている要素です。意味が変更されましたが現行の仕様であるHTML Living Standardでも定義されています。

定義されている仕様書
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<hr>
定義あり

定義あり

定義あり

定義あり

定義あり
DOMインターフェース
[Exposed=Window]
interface HTMLHRElement : HTMLElement {
[HTMLConstructor] constructor();

// also has obsolete members
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);

hr {
display: block;
border-style: inset;
border-width: 1px;
margin-block-start: 0.5em;
margin-inline-end: auto;
margin-block-end: 0.5em;
margin-inline-start: auto;
overflow: hidden;
}

/* 文書の文字エンコーディングが ISO-8859-8 である場合 */
hr {
unicode-bidi: bidi-override;
}

また、以下のスタイルシートを“表現上のヒント”としてUAスタイルシートに含むことが期待されています。

@namespace url(http://www.w3.org/1999/xhtml);

hr[align=left i] { margin-left: 0; margin-right: auto; }
hr[align=right i] { margin-left: auto; margin-right: 0; }
hr[align=center i] { margin-left: auto; margin-right: auto; }
hr[color], hr[noshade] { border-style: solid; }
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク