HTMLでは、
<hr>と記述するだけで水平線を表示させることができます。
この<hr>のスタイルを点線にしたり、太線にしたり、色を変えたり、変更することができます。
やり方ですが、スタイルシートで<hr>要素にデザインを記述します。
↑↑上記のような線にする場合
cssは、下記のように記述しますが、
サイト内すべてのwebページがこのスタイルになります。
hr{ border:none; /*水平線の境界線を消す*/ border-top-style:solid; /*線の種類*/ border-top-width:1px; /*線の太さ*/ border-top-color:#996666; /*線の色*/ }
スタイルはまとめて記述することができます。
hr{ border:none; border-top: 1px solid #996666; }
スタイルに長さを指定することができます。
何も指定しない場合は、長さは100パーセントで表示されます。
hr{ border:none; border-top: 1px solid #996666; width: 70%; }
????????
<hr>で指定できる主なスタイル
点線(dotted)は、ブラウザによって見え方が微妙に違ってきます。
点線にしたり、色を変えたり、ページやサイト内で違ったデザインの線を表示したい場合は、個々にクラス名を付けて割り当てます。
点線
html: <hr class=”line1″>
css
hr.line1{ border: none; border-top: 1px dotted #999; }
破線
html: <hr class=”line2″>
css
hr.line2{ border: none; border-top: 1px dotted #999; }
二重線
html: <hr class=”line3″>
css
hr.line3{ border:none; border-top: double 3px #999; }
立体的な線
html: <hr class=”line4″>
css
hr.line4{ border:none; border-top:1px solid #ccc; border-bottom:1px solid #fff; }
影付きの線(ドロップシャドウ)
hr.line5{ border:none; height:30px; box-shadow:0 30px 30px -30px #ccc inset; }
????????