<HR>罫線の表示

<HR>(Horizontal Rule)を指定すると、そこに表示領域の幅いっぱいに横罫線が引かれます。 また横罫線とその前後の垂直方向のスペース(間隔)は、ブラウザに依存します。

なお一般的なブラウザでは、罫線は立体的な引っ込んだ感じで表示されますが、noshade属性を指定すると平面的な塗りつぶしの線にする事ができます。 またsize属性では罫線の太さを、width属性では線の長さを指定する事ができます。

width属性の長さは、単位を付けなければピクセル数として認識されますが、「%」を付けるとウィンドウの幅に対する割合となります(初期値は100%)。 他にもalign属性などで罫線の行揃えを設定することなどもできます(初期値はcenter)。

ただしこれらの属性はHTML4.01では非推奨とされており、HTML5では廃止されています。 ですので横罫線の表示方法を指定する場合は、可能であればスタイルシートを利用するようにして下さい。

使用した時の例

<hr>
<hr size="10">
<hr size="20" width="100">
<hr size="5" width="50%">
<hr size="5" width="50%" align="left">
<hr size="5" width="50%" align="right">
<hr noshade>
<hr noshade size="15">
<hr color="red">

ブラウザ上の表示例










属性

size="" 罫線の太さをピクセル数で指定
width="" 罫線の長さをピクセル数、または%で指定(初期値100%)
align="" 罫線の表示位置を指定(初期値center)
  • center・・・中央(初期値)
  • left・・・左端
  • right・・・右端
noshade 立体的でない平面的な罫線を表示
color="" 罫線の色を指定

対応ブラウザなどのデータ

形式 <hr> カテゴリ フローコンテンツ
親要素 子要素にフローコンテンツを含める要素 子要素 なし
開始タグ 必須 終了タグ なし
分類 ブロックレベル要素 / 空要素
汎用属性 accesskey / class / contenteditable / dir / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~

HTML5での状況と関連情報

align、noshade、size、width、colorは、HTML5では廃止。また段落単位での意味の変わり目を示す役割に変わった。