4-16-1a 水平線(仕切り線)

水平方向の罫線(仕切り線)を作成する方法です。<hr> 要素を使用致します。(このタグはブロックレベル要素です)。

このタグは他の物と違い 『終了タグ』 が必要の無い(</hr> とする必要がない)タグで、そのようなタグの事を空要素と呼びます。 (改行を表す<br> も同様のタグです)。デフォルトで真ん中寄せされます。

ちなみに<hr> とは 『Horizontal Rule(水平方向の罫線)』 の略です。

4-16-1b 仕切り線の見本

仕切り線の見本をclass属性 を利用して表示してみました。

CSS

<head> ~ </head> 内に記述して下さい。
<style type="text/css">
<!--

.sample-1i { width: 70% ; } /* 長さは70% */

.sample-2i {
width: 70% ;
height: 5px;
background-color: #990000;
text-align: right;
} /* 長さは70%、高さは5px、色は赤、右寄せ、ちょっとだけ立体 */

.sample-3i {
border-width: 0;
width: 60%;
height: 10px;
background-color: #ff9999;
color: #ff9999;
} /* 長さは60%、高さは10px、色はピンク、(立体なし) */

-->
</style>

[ 関連事項 : HP-TIPS > CSS > 外部スタイルシートの記述方法 ]


HTML

<body> ~ </body> 内に記述して下さい。

<hr>
<hr class="sample-1i" noshade>
<hr class="sample-2i">
<hr class="sample-3i">

表示結果

上記の結果をIENNとOPERA、Firefoxで表示し、その見た目の違いを画像にしてみました(詳細はこちらから どうぞ[約13.4KBあります])。