HTML <hr> タグ

定義と使用法

<hr> タグは、HTML ページ内のトピックの区切り（例えば、トピックの変化）を定義します。

<hr> 要素は通常水平線として表示され、HTML ページ内で内容を区切ったり、内容上の変化を定義するために使用されます。

参照もしくは：

HTML DOM リファレンスマニュアル：HR オブジェクト

インスタンス

例子 1

使用 <hr> タグで内容内のトピックの変化を定義します：

<h1>Web の主要な言語</h1>
<p>HTML は、Web ページを構成する標準のマークアップ言語です。HTML は、Web ページの構造を定義し、要素のリストで構成されています......</p>
<hr>
<p>CSS は、HTML 要素がスクリーン、紙、または他のメディア上でどのように表示されるかを記述する言語です......</p>
<hr>
<p>JavaScript は HTML と Web のプログラミング言語です。JavaScript は HTML の内容や属性値を変更できます......</p>

自分で試してみる

例子 2

对齐 <hr> 元素（使用 CSS）：

<hr style="width:50%;text-align:left;margin-left:0">

自分で試してみる

例子 3

没有阴影的 <hr> （使用 CSS）：

<hr style="height:2px;border-width:0;color:gray;background-color:gray">

自分で試してみる

例 4

設定 <hr> 要素の高さ（CSSを使用して設定）：

<hr style="height:30px">

自分で試してみる

例 5

設定 <hr> 要素の幅（CSSを使用して設定）：

<hr style="width:50%">

自分で試してみる

グローバル属性

<hr> タグは以下のイベント属性をサポートしています HTML でのグローバル属性。

イベント属性

<hr> タグは以下のイベント属性をサポートしています HTML でのイベント属性。

デフォルトの CSS 設定

ほとんどのブラウザでは以下のデフォルト値で表示されます <hr> 要素：

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

自分で試してみる

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート