項目	説明
形式	<hr>
サポート	H2〜H4s〜 / e2〜 / N2〜 / i1〜
タグの省略	開始タグ：必須、終了タグ：無し

hr は Horizontal Rule（水平方向の罫線）の意味です。横線を引きます。

【固有属性】

属性	意味
align=align	H3-H4t/e2/N2/i1。表示位置を指定します。 　　center：中央。 　　left：左寄せ。 　　right：右寄せ。
color=color	e3/i1。線の色を指定します。
noshade	H3-H4t/e2/N2/i1。立体的な影を持たない、平面的な線で表示します。
size=n	H3-H4t/e2/N2/i1。線の幅をピクセル単位で指定します。
width=n	H3-H4t/e2/N2/i1。線の長さをピクセル単位または width="50%" のようなパーセンテージで指定します。

【一般属性】

属性	意味
class=class	H4s/e3/N4。クラスを指定します。
dir=dir	H4s/e5/N6。文字の表示方向を指定します。
id=id	H4s/e3/N4。ID を指定します。
lang=lang	H4s/e4/N6。言語を指定します。
language=language	e4。スクリプト言語を指定します。
style=style	H4s/e3/N4。スタイルシートを指定します。
title=title	H4s/e4/N6。タイトルを指定します。

HTMLソース
<hr> <hr width=200 align=left> <hr width=200 align=center> <hr width=200 align=right> <hr width=200 size=5> <hr width=200 size=5 noshade> <hr width=200 size=5 color=red>

ブラウザ表示例

●script

<hr style="width:580px;border:solid #ccc;border-width:1px 0 0 0;height:1px;clear:both;">

●見本

---

hrタグで1pxの線を引く方法

hrタグは、デフォルトで使用するとデザイン的に味気ないですよね。画像を使用するのが一番見栄えのよいものになりますが、少しだけスタイリッシュにしたい場合などCSSを使用すると便利です。ここでは、1pxの線を引く方法を紹介します。

単純に、borderを使って、上線だけ1pxの線を表示すればよいのですが、IE6ではうまくいかないので、「height:1px」と「clear:both」を追加します。

CSSコード

hr {
border:solid #000;
border-width:1px 0 0 0;
height:1px;/* for IE6 */
clear:both;/* for IE6 */
}