シュウ

今回は【HTML】hr要素の使い方、段落の区切りを示す要素!
の解説になります！

こんな方に読んでほしい

• HTMLを学び始めた方へ
• HTMLについて学びたい方へ
• 今回はhr要素(段落の区切り線)について解説しております。

hr要素とは、段落の区切りを示します。
線(ボーダー)と聞くとborder要素が思い浮かびますが、今回は、段落(hr)について学びましょう。

Chrome	Safari	Firefox	IE	Edge

hr要素について

hr要素とは、段落の区切りを示します、
hrタグには、終了タグ/hrがありません、またデフォルトでは1本線(直線)で表示します。

hr要素とは、あくまで段落レベルの区切りに使用します。
border要素とは、コンテンツを区切る又は囲む際に使用します。
書き方は以下のようになります。

<p>赤色とは、情熱・強さ・生命力・活動・祝福・派手・刺激・警告 など
愛、熱、力、血など、色の中で抽象的な意味が多い赤色。</p>
<hr>
<p>緑色とは、自然、新鮮、安全、平和、健康、リフレッシュ など
穏やかで許容や安心感を与える色として、自然の象徴色とてし使われています。</p>

hr要素の間違った使い方について

hr要素とは、あくまで段落レベルの区切りになります。
例として、section間では、すでに区切りを表しているので、hrを使用するのはやめましょう。

<section>
	内容が入ります。
</section>

<hr>

<section>
	内容が入ります。
</section>

section間で、線を引きたい場合は、ボーダー要素を使用しましょう。

CSSで整える

hr要素を使用する場合、1本線(直線)ですが、線の種類、色、太さをCSSで変更ができます。
書き方は以下のようになります。

<p>赤色とは、情熱・強さ・生命力・活動・祝福・派手・刺激・警告 など
愛、熱、力、血など、色の中で抽象的な意味が多い赤色。</p>
<hr>
<p>緑色とは、自然、新鮮、安全、平和、健康、リフレッシュ など
穏やかで許容や安心感を与える色として、自然の象徴色とてし使われています。</p>

/*--CSS--*/
hr {
	border: none;
	border-top: dashed 2px #5e88a9;
}

hr要素は、デフォルトでborder: solid 1pxが指定されているため、
border: noneで解除し、新たに線を追加しております。
borderの種類は下記の参考記事から↓

border要素の正しい使い方・種類について

border要素の使い方・種類

【CSS】borderを指定し枠線を使いこなそう！初心者向け講座

まとめ

今回はこれで以上です。

Chrome	Safari	Firefox	IE	Edge

最新記事

• 

  【HTML】download属性について、ファイルのダウンロードを学ぼう!

  2021.07.27

• 

  【HTML】ruby要素の使い方、テキストにルビ(ふりがな)を振ろう!

  2021.07.09

• 

  【HTML】kbd要素の使い方、キーボードのキーを表す要素!

  2021.07.06

• 

  【HTML】q要素の使い方、短い引用文であることを示す要素!

  2021.06.29

関連記事

< 前の記事

【HTML】q要素の使い方、短い引用文であることを示す要素!

次の記事 >

【HTML】kbd要素の使い方、キーボードのキーを表す要素!