4-16-1a 水平線(仕切り線)
水平方向の罫線(仕切り線)を作成する方法です。<hr> 要素を使用致します。(このタグはブロックレベル要素です)。
このタグは他の物と違い 『終了タグ』 が必要の無い(</hr> とする必要がない)タグで、そのようなタグの事を空要素と呼びます。 (改行を表す<br> も同様のタグです)。デフォルトで真ん中寄せされます。
ちなみに<hr> とは 『Horizontal Rule(水平方向の罫線)』 の略です。
4-16-1b 仕切り線の見本
仕切り線の見本をclass属性 を利用して表示してみました。
CSS
<head> ~ </head> 内に記述して下さい。<!--
.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">
表示結果
上記の結果をIEとNNとOPERA、Firefoxで表示し、その見た目の違いを画像にしてみました(詳細はこちらから どうぞ[約13.4KBあります])。