ぱたぱたアニメ館◆ 水平線を使ってみよう
水平線の説明を少しします。表示ボックスの中の線が水平線（区切り線）です。
<hr>
表示ボックス内いっぱいに水平線が表示されていますね。 （表示ボックスは横の長さを指定しています。何も指定していない場合はウィンドー幅いっぱいに表示されます。）
水平線の終了タグはありません。水平線の前後は自動的に改行され、デフォルトでセンタリングされるようになっています。
// この水平線ですが、HTML5から意味合いが変わり、 align、width、size、color、noshadeの属性が廃止されました。これらを指定するならスタイルシートになります。使えるのは<hr>タグのみです。 //
◆ 水平線の長さを指定しよう
水平線の長さを指定してみます。横幅の指定にはwidth属性を使います。 widthにpx（ピクセル）単位、またはウィンドウの幅に対する割合％で指定してみましょう。
<hr width="200"> <hr width="70%">
// HTML5において、hr要素におけるwidth属性は廃止されました。これを指定するならスタイルシートになります。 //
◆ 水平線の太さを指定しよう
sizeにpx（ピクセル）単位での太さを指定してみます。指定しない場合の太さは2pxです。
<hr size="2"> <hr size="8"> <hr size="20">
// HTML5において、hr要素におけるsize属性は廃止されました。これを指定するならスタイルシートになります。 //
◆ 水平線の色を指定しよう
<hr color="blue"> <hr color="#6699ff"> <hr noshade>
属性noshadeは、影ナシ水平線です。平べったいグレーの線になりますね。
// HTML5において、hr要素におけるcolor属性、noshade属性は廃止されました。これを指定するならスタイルシートになります。 //
◆ 水平線の位置を指定しよう
今度は、表示位置を指定してみます。
<hr align="left" width="70%"> <hr align="right" width="300">
align="left" width="70%" … 左から70%の位置（%指定は親要素の大きさによって変化します。）
align="right" width="300" … 右から300pxの位置
// HTML5において、hr要素におけるalign属性、width属性は廃止されました。これらを指定するならスタイルシートになります。 //
◆ 応用してみよう
<hr width="100%" size="5" color="#990066"> <hr width="90%" size="4" color="#993366"> <hr width="80%" size="3" color="#996666"> <hr width="70%" size="2" color="#999966"> <hr width="60%" size="1" color="#99cc66">
グラデーションが綺麗ですね。＾＾
そして、この水平線を [ホームページを作ろう！<１>]の＜ テストページ３ ＞に追加してみましょう。 幅が90% (width="90%") で、太さが3 (size="3") でオレンジの水平線 (color="orange") にします。
<head>
<title>私のトップページ</title>
</head>
<body>
<center><h1>食べ物万歳！</h1></center>
<p align="center"><font size="4" color="#ff0000">ようこそ、私のホームページへ</font></p>
<hr width="90%" size="3" color="orange">
<p align="center">ここでは、私の好きな食べ物の紹介をします。<br>
どうぞ、ゆっくり見ていってくださいね！</p>
</body>
</html>
（※１）と同じようにメモ帳にコピー＆ペーストしてブラウザで見てください。
[ホームページを作ろう！<３>] へお進みください。
※ 100pxがどのぐらいかは [タグ１] を参照してください。