水平線の種類
2002/06/06設置
水平線のイロイロな種類を紹介します。
～まずは普通に基本～
●タグ表記例●
→ <hr>
↓★実行例★↓
※普通に上記のように実行した場合幅は１００％になるようです。
～そして次は幅を変える（％での指定とピクセル数での指定）～
●タグ表記例●
→ <hr width=50%>
→ <hr width=50>
↓★実行例★↓（５０％の場合）
↓★実行例★↓（３０％の場合）
↓★実行例★↓（１０％の場合）
↓★実行例★↓（８０％の場合）
↓★実行例★↓（１００％の場合）
↓★実行例★↓（５０の場合）
↓★実行例★↓（１００の場合）
※上記は位置指定をしていませんが、通常は中央に来るようです。
～次は色を変える～
●タグ表記例●
→ <hr color=red>
↓★実行例★↓（赤の場合）
↓★実行例★↓（黄色の場合）
↓★実行例★↓（緑色の場合）
↓★実行例★↓（青の場合）
～太さを変える（上限：100）～
●タグ表記例●
→ <hr size=5>
↓★実行例★↓（太さが５の場合）
↓★実行例★↓（太さが１０の場合）
↓★実行例★↓（太さが３０の場合）
↓★実行例★↓（太さが５０の場合）
↓★実行例★↓（太さが１００の場合）
※太さを変える単語としてここではsizeを使用していますが
heightでも同じようになります。
～位置を指定する（左端・中央・右端）～
●タグ表記例●→ <hr width=50% align=left>
●タグ表記例●（位置が左の場合）
→ <hr width=50% align=left>
↓★実行例★↓
●タグ表記例●（位置が中央の場合）
→ <hr width=50% align=center>
↓★実行例★↓
●タグ表記例●（位置が左の場合）
→ <hr width=50% align=right>
↓★実行例★↓
～～～～～～～～～～～～～～～～～～～～～～～～～～～
以上が一般的に使う水平線の使用方法です。
全ての単語を一つの括弧の中に収めても使用できます。
●タグ表記例●
→ <hr width=50% size=10 color=red align=center>
↓★実行例★↓（幅：５０％、太さ：１０、色：赤、位置：中央の場合）
～～～～～～～～～～～～～～～～～～～～～～～～～～～
そして以下からが少し変わった水平線です。
～平面的な水平線（分かりやすいように太さをつけます）～
●タグ表記例●
→ <hr noshade size=10>
↓★実行例★↓
上記の平面的な水平線も一般的に使う使用方法と同じで
イロイロな指定は可能です。
上記の場合、差が分かるようにnoshadeが無しの場合が以下。
↓★実行例★↓（太さが１０の場合）
違いますよね？noshadeは影の部分が表示、（色をつけない場合ですが）
noshadeが無い表記の場合は影じゃないところが表示されるといった感じです。
～OUT線（凸）～
●タグ表記例●
→ <hr style="border:outset;height:20;border-color:red;">
↓★実行例★↓（太さ：２０、色：赤の場合）
↓★実行例★↓（太さ：４０、色：青の場合）
～IN線（凹）～
●タグ表記例●
→ <hr style="border:inset;height:15;border-color:red;">
↓★実行例★↓（太さ：１５、色：赤の場合）
↓★実行例★↓（太さ：３０、色：青の場合）
～くぼみ線～
●タグ表記例●
→ <hr style="border:groove;height:15;border-color:red;">
↓★実行例★↓（太さ：１５、色：赤の場合）
～浮き上がり線～
●タグ表記例●
→ <hr style="border:ridge;height:15;border-color:red;">
↓★実行例★↓（太さ：１５、色：赤の場合）
～点線～
●タグ表記例●
→ <hr style="border:dotted;height:25;border-color:blue;">
↓★実行例★↓（太さ：２５、色：青の場合）
～破線～
●タグ表記例●
→ <hr style="border:dashed;height:25;border-color:black;">
↓★実行例★↓（太さ：２５、色：黒の場合）
～二重線～
●タグ表記例●
→ <hr style="border:double;height:25;border-color:green;">
↓★実行例★↓（太さ：２５、色：緑の場合）
© Rakuten Group, Inc.
