ホームページを作ろう!<2>

◆ 水平線を使ってみよう

水平線の説明を少しします。表示ボックスの中の線が水平線(区切り線)です。

表示

HTML
<hr>

表示ボックス内いっぱいに水平線が表示されていますね。 (表示ボックスは横の長さを指定しています。何も指定していない場合はウィンドー幅いっぱいに表示されます。

水平線の終了タグはありません。水平線の前後は自動的に改行され、デフォルトでセンタリングされるようになっています。

// この水平線ですが、HTML5から意味合いが変わり、 align、width、size、color、noshadeの属性が廃止されました。これらを指定するならスタイルシートになります。使えるのは<hr>タグのみです。 //

上に戻る

◆ 水平線の長さを指定しよう

水平線の長さを指定してみます。横幅の指定にはwidth属性を使います。 widthpx(ピクセル)単位、またはウィンドウの幅に対する割合で指定してみましょう。

表示


HTML
<hr width="200">
<hr width="70%">
※ ピクセルの単位(px)は省略します。(スタイルシートでは、0の場合を除き単位は必須です。)
※ 100pxがどのぐらいかは [タグ1] を参照してください。

// HTML5において、hr要素におけるwidth属性は廃止されました。これを指定するならスタイルシートになります。 //

上に戻る

◆ 水平線の太さを指定しよう

sizeにpx(ピクセル)単位での太さを指定してみます。指定しない場合の太さは2pxです。

表示



HTML
<hr size="2">
<hr size="8">
<hr size="20">

// HTML5において、hr要素におけるsize属性は廃止されました。これを指定するならスタイルシートになります。 //

上に戻る

◆ 水平線の色を指定しよう

colorに色名、またはRGBのコード(色見本)で色を指定してみます。

表示



HTML
<hr color="blue">
<hr color="#6699ff">
<hr noshade>

属性noshadeは、影ナシ水平線です。平べったいグレーの線になりますね。

// HTML5において、hr要素におけるcolor属性、noshade属性は廃止されました。これを指定するならスタイルシートになります。 //

上に戻る

◆ 水平線の位置を指定しよう

今度は、表示位置を指定してみます。

表示


HTML
<hr align="left" width="70%">
<hr align="right" width="300">

align="left" width="70%" … 左から70%の位置(%指定は親要素の大きさによって変化します。)

align="right" width="300" … 右から300pxの位置

// HTML5において、hr要素におけるalign属性、width属性は廃止されました。これらを指定するならスタイルシートになります。 //

上に戻る

◆ 応用してみよう

表示





HTML
<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">

グラデーションが綺麗ですね。^^

そして、この水平線を [ホームページを作ろう!<1>]の< テストページ3 >に追加してみましょう。 幅が90% (width="90%") で、太さが3 (size="3") でオレンジの水平線 (color="orange") にします。

< テストページ4 >

<html>
<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>

(※1)と同じようにメモ帳にコピー&ペーストしてブラウザで見てください。

三角矢印こんな感じになります。(テストページ4)

[ホームページを作ろう!<3>] へお進みください。

上に戻る