<hr> - 水平線

• トップ
• HTMLリファレンス
• <hr>

• 概要
• 説明
• 属性
• 使用例
• リンク

概要

形式

<hr>

サポート

https://caniuse.com/mdn-html_elements_hr

カテゴリ

フローコンテンツ

親要素

フローコンテンツ を子要素に持てるもの

子要素

無し(Empty)

タグの省略

開始タグ:必須 / 終了タグ:無し

属性

グローバル属性

説明

hr は Horizontal Rule(水平方向の罫線)の意味です。物語の途中でシーンが変わる、参考書のセクションの中で次のトピックに移るなど、段落レベルのテーマの区切りなどで利用されます。

属性

グローバル属性

詳細は グローバル属性 を参照してください。

align=align

[非推奨] H3-H4T/e2/Ch/Fx/Sa/Op/N2/i1

表示位置を center(中央:規定値)、left(左寄せ)、right(右寄せ) のいずれかで指定します。HTML5 には採用されていません。代わりにスタイルシートの margin-left または margin-right に 0 を指定してください。

color=color

[非推奨] e3/Ch/Fx/Sa/Op/i1

線の色を指定します。HTML5 には採用されていません。代わりにスタイルシートの background-color と height を使用してください。

size=n

[非推奨] H3-H4T/e2/Ch/Fx/Sa/Op/N2/i1

線の幅をピクセル単位で指定します。HTML5 には採用されていません。代わりにスタイルシートの height を使用してください。

width=n

[非推奨] H3-H4T/e2/Ch/Fx/Sa/Op/N2/i1

線の長さをピクセル単位または width="50%" のようなパーセンテージで指定します。HTML5 には採用されていません。代わりにスタイルシートの width を使用してください。

noshade

[非推奨] H3-H4T/e2/Ch/Fx/Sa/Op/N2/i1

立体的な影を持たない、平面的な線で表示します。HTML5 には採用されていません。代わりにスタイルシートで border-width に 0、height に 2px、background-color に #888 を指定するとよいようです。

使用例

1本の横線を表示します。

<hr>

横幅、太さ(高さ)、背景色を指定します。

<hr style="width:300px; height:10px; background-color:#ff9999;">

リンク

• https://html.spec.whatwg.org/multipage/grouping-content.html#the-hr-element
• https://developer.mozilla.org/ja/docs/Web/HTML/Element/hr
• https://caniuse.com/mdn-html_elements_hr