　線を引く

■<hr>

<hr>タグを使います。このタグには終了タグがなく単体で使います。

線を表示したいところに<hr>を記入するだけです。この<hr>タグには指定できるいろいろな属性があります。

例えばどのようなものがあるかというと、size属性、width属性などの属性があります。size属性で線の太さを、width属性で線の長さを指定することが出来ます。

この他にも<hr>タグで使える属性はいろいろあります。詳しくは、下記の説明を見てくださいね。現在<hr>タグは使用できますが、見栄えに関してはCSSを使って指定するのが一般的です。

■ 属性の種類と効果

size属性で線の太さを指定できます。数値が大きいほど線が太くなります。

何も指定しなければsizeは2になります。

width属性で線の長さを指定できます。数値が大きいほど線が長くなります。

%で指定する場合は画面の横幅を100%として、それ対してどれだけのパーセント分の長さの線を引くか、を指定します。

例えば、<hr width="50%">とすれば画面の半分の長さの線が引かれます。

前に出てきた見出しの位置を変える場合と同じように、alignの値にleft、center、right、それぞれを指定することにより、線の配置を左や中央そして右に配置することができます。

何も指定しない場合はcenterになります。

線にも色をつけることができます。カラー指定は、前に説明したフォントや背景の色を変えるのと同じ手順で指定します。

また線の色を変えると、線が立体的ではなくなります。それと、この属性はInternet　Explorerだけが対応していますので、Netscape　Navigatorなどのブラウザで表示すると、この属性は無視され何も指定しないのと同じになります。

何も指定しなければ立体的な線が引かれますが、noshade属性をつけることによって立体感のない線にすることができます。

サンプル - Microsoft Internet Explorer

１．hrのみ

２．size="5"

３．width="100"

４．width="200"

５．hr width="50%"

HTML


１．hrのみ
　<hr>

２．size="5"
　<hr size="5">

３．width="100"
　<hr width="100">

４．width="200"
　<hr width="200">

５．width="50%"
　<hr width="50%">

サンプル - Microsoft Internet Explorer

１．width="30%" align="left"

２．width="30%" align="center"

３．width="30%" align="right"

４．color="blue"

５．noshade

６．size="10" width="50%" color="green"

HTML

１．width="30%" align="left"
　<hr width="30%" align="left">

２．width="30%" align="center"
　<hr width="30%" align="center">

３．width="30%" align="right"
　<hr width="30%" align="right">

４．color="blue"
　<hr color="blue">

５．noshade
　<hr noshade>

６．size="10" width="50%" color="green"
　<hr size="10" width="50%" color="green">