■ 水平線をひく方法

”水平線”は簡単なタグですが意外と活躍してくれます 例えば文章の段落などに使用すると見やすくなる。


また、「どうしても主張したい!」内容をテーブルタグやスタイルシートの枠線、ボーダーを使うと思いますが、
簡単に「水平線」で上下を区切るだけでも読者の目を惹きつけることが可能です。何より簡単です。

以下は水平線(横棒)の説明になります。


▼ 水平線(Horizontal Rule)
<hr> 
開始タグのみ(終了タグ不要)

ソースの任意の場所に書くだけで水平方向の罫線を引くことができます。




また、そのまま使うと太さ、サイズ、色、長さがカッコ悪い?不便だ!
っていう人のために補足しておきます。水平線を楽しく使うヒント?です。

▼ 水平線 // 線の太さ、幅、配置を指定する
<hr size="1" width="500" align="left">


○ もちろんスタイルシートの使用も可能です
<hr style="height:5px;width:400px;text-align:left;color:#000000;margin:10px;">
※ 線の太さ、横幅、配置、色、マージンを指定しています




<hr>とは別に、スタイルシートの枠線ボーダープロパティを使って線を引くこともできます。

▼ 枠線、ボーダープロパティを使う
<div style="border-bottom:1px solid #000000;"></div>
※ この”border-bottom”は下側の枠線を指定するプロパティです。
※値は”枠線の太さ 枠線の種類 枠線の色”です。 いずれも省略不可で順序も決まっています。



( 補 足 )

”線種”の値 // ”dashed”(破線),"dotted"(点線)

インパクトが欲しい時などは”線種”の値を変えるだけでも見た目の印象がガラリと変わります。
何かと便利で楽しいのでスタイルシートも使えるようにしておきたいところです。
もっともっと気軽にWebデザインを楽しむことが可能になります。


※ もちろん使い方について、規格やルール的なものもあります。しかし、まずは「Webとふれあい」そして
「楽しさをみつける」
ということを大切にしてくださいね。 ( ←ちょっと主観的ですが私の信念です)