hrの使い方

hrタグ

hr要素

カテゴリ タグ 機能 使用属性 要素分類
段落、区切り <hr> 水平線(横線)を引きます。 ブロックレベル
使用例
<hr>

☆説明

水平線が表示されます。同ページ内で、話題を変えるときの境界線などに設定します。

閉じタグは必要ありません。<hr>と記述すれば水平線が表示されます。

ページいっぱいに広がるので、
スタイルシート(CSS)でワイズ(width)の指定をすると幅を調整できます。


CSSソースコードの例

widthでhrの幅を指定出来ます。border-widthで線の幅、border-styleで点線や実践・二重線などを指定出来ます。border-colorで線の色を指定します。

<hr>使用上での注意点

<hr>は頻繁に使うものではなく、コンテンツ内にどうしても必要な時に使用するべきです。

コンテンツ内で頻繁に使う水平線(コンテンツを仕切る為のデザイン)はスタイルシートで表現した方がいいでしょう。たとえば、<div></div>で作ったボックスにborder-bottom:1px solid #ccc;などと記述して、ボックス自体に下線を付ける方法をお勧めします。

HTMLは極力シンプルに記述するということを心がけましょう。検索エンジン対策として有効な考え方になります。ただ、使いたければ使っても問題はないと思います。コンピューターにとっても読みやすいことも大事です。

デザインはスタイルシートでおこなうのが、ベストな方法です。

hrカスタマイズ例

hrをカスタマイズすると、おしゃれな水平線を作ることができます。

hrに文字を入れる

例えばこんな感じにすることもできます。


HTML5のコンテント(content)属性を指定し、文字を指定しておきます。

HTML

CSS