point 線を引く

<hr>

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

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

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

この他にも<hr>タグで使える属性はいろいろあります。詳しくは、下記の説明を見てくださいね。

属性の種類と効果

<hr size="ピクセル値">

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

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

<hr width="ピクセル値または%">

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

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

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

<hr align="位置">

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

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

<hr color="カラー名またはRGB値">

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

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

<hr noshade>

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

サンプル - Microsoft Internet Explorer
1.hrのみ
2.size="5"
3.width="100"
4.width="200"
5.hr width="50%"

HTML

1.hrのみ
 <hr> 2.size="5"
 <hr size="5"> 3.width="100"
 <hr width="100"> 4.width="200"
 <hr width="200"> 5.width="50%"
 <hr width="50%">
 

サンプル - Microsoft Internet Explorer
1.width="30%" align="left"
2.width="30%" align="center"
3.width="30%" align="right"
4.color="blue"
5.noshade
6.size="10" width="50%" color="green"

HTML
1.width="30%" align="left"
 <hr width="30%" align="left"> 2.width="30%" align="center"
 <hr width="30%" align="center"> 3.width="30%" align="right"
 <hr width="30%" align="right"> 4.color="blue"
 <hr color="blue"> 5.noshade
 <hr noshade> 6.size="10" width="50%" color="green"
 <hr size="10" width="50%" color="green">
 

スポンサード・リンク