以前は、線などもgif画像で用意するのが一般的でしたが、ここ数年は、スタイルシート(CSS)も急激に普及してきて、デザインのほとんどをスタイルシートで作成しているサイトが多くなっています。
[html]<HR>[/html]
これだけでも線は簡単に引けますが、今回はCSSでやってみましょう。
直線や、点線・破線の表示方法
↓ 直線
[css]border: 1px solid #ccc;[/css]
↓ 点線
[css]border: 1px dotted #ccc;[/css]
↓ 破線
[css]border: 1px dashed #ccc;[/css]
線の太さを指定する場合、1pxのところの数値を変えれば、線の太さが変わります。
色を変えたい場合は、#cccのところを任意の色に変えてください。
CSSで直線や点線・破線を表示する方法の応用
1方向のみに線を表示させたい場合は、borderの後ろに、-top等の方向を指定。
↓ 直線を上に表示
[css]border-top: 1px solid #ccc;[/css]
↓ 直線を下に表示
[css]border-bottom: 1px solid #ccc;[/css]
↓ 直線を右に表示
[css]border-right: 1px solid #ccc;[/css]
↓ 直線を左に表示
[css]border-left: 1px solid #ccc;[/css]
こんな感じでCSSに記述すると、線の太さ、色の指定や、線の種類、線を引く場所を簡単に指定して、色々な線を引くことができます。
Webサイトを作っていると、線を引く場面がよくあるので、こういうのを知っていると便利ですよ^^