HTMLで水平線を引く!hrタグの使い方

今回はHTMLで水平線を引くことができる<hr>タグについて解説します。

 

<hr>とは?

<hr>タグはHorizontal Ruleの略で、HTML上に罫線を引くことができます。

<hr>には付与できる属性がいくつかあります。以下の通りです。

  • width:線の幅(横の長さ)
  • size:線の太さ(縦の高さ)
  • noshade:平面的な単色の罫線にする

 

デフォルトでは<hr>は影のついた立体的な罫線になっていますが、noshade属性を入れることで影を消して平面的な線にすることができます。

 

 使用例

<hr>
<hr width="90%">
<hr width="300">
<hr size="20">
<hr width="20" size="20">
<hr size="1" color="#000000">
<hr size="10" color="#0000ff" noshade>
<hr width="300" color="#ff0000" align="right">

 

単位を省略した場合は自動でpx単位になります。

また、color属性で罫線の色を指定したり、align属性で右寄せ、中央寄せなどができます。CSSでスタイルを指定してもいいですね。

セクションの区切りなどに気軽に使えるので、覚えておくといいかもしれません。