今回は【HTML】hr要素の使い方、段落の区切りを示す要素!
の解説になります!
こんな方に読んでほしい
- HTMLを学び始めた方へ
-
HTML
について学びたい方へ - 今回はhr要素(段落の区切り線)について解説しております。
hr
要素とは、段落の区切りを示します。
線(ボーダー)と聞くとborder
要素が思い浮かびますが、今回は、段落(hr)について学びましょう。
Chrome | Safari | Firefox | IE | Edge |
---|
| | | | |
hr要素について
hr
要素とは、段落の区切りを示します、
hr
タグには、終了タグ/hr
がありません、またデフォルトでは1本線(直線)で表示します。
hr要素とは、あくまで段落レベルの区切りに使用します。
border要素とは、コンテンツを区切る又は囲む際に使用します。
書き方は以下のようになります。
hr要素について
赤色とは、情熱・強さ・生命力・活動・祝福・派手・刺激・警告 など
愛、熱、力、血など、色の中で抽象的な意味が多い赤色。
緑色とは、自然、新鮮、安全、平和、健康、リフレッシュ など
穏やかで許容や安心感を与える色として、自然の象徴色とてし使われています。
<p>赤色とは、情熱・強さ・生命力・活動・祝福・派手・刺激・警告 など
愛、熱、力、血など、色の中で抽象的な意味が多い赤色。</p>
<hr>
<p>緑色とは、自然、新鮮、安全、平和、健康、リフレッシュ など
穏やかで許容や安心感を与える色として、自然の象徴色とてし使われています。</p>
hr要素の間違った使い方について
hr
要素とは、あくまで段落レベルの区切りになります。
例として、section
間では、すでに区切りを表しているので、hr
を使用するのはやめましょう。
<section>
内容が入ります。
</section>
<hr>
<section>
内容が入ります。
</section>
section
間で、線を引きたい場合は、ボーダー要素を使用しましょう。
CSSで整える
hr要素を使用する場合、1本線(直線)ですが、線の種類、色、太さをCSSで変更ができます。
書き方は以下のようになります。
CSSで整える
赤色とは、情熱・強さ・生命力・活動・祝福・派手・刺激・警告 など
愛、熱、力、血など、色の中で抽象的な意味が多い赤色。
緑色とは、自然、新鮮、安全、平和、健康、リフレッシュ など
穏やかで許容や安心感を与える色として、自然の象徴色とてし使われています。
<p>赤色とは、情熱・強さ・生命力・活動・祝福・派手・刺激・警告 など
愛、熱、力、血など、色の中で抽象的な意味が多い赤色。</p>
<hr>
<p>緑色とは、自然、新鮮、安全、平和、健康、リフレッシュ など
穏やかで許容や安心感を与える色として、自然の象徴色とてし使われています。</p>
/*--CSS--*/
hr {
border: none;
border-top: dashed 2px #5e88a9;
}
hr
要素は、デフォルトでborder: solid 1px
が指定されているため、
border: none
で解除し、新たに線を追加しております。
border
の種類は下記の参考記事から↓
border要素の正しい使い方・種類について
【CSS】borderを指定し枠線を使いこなそう!初心者向け講座
まとめ
今回はこれで以上です。
- POINT
-
hr
要素は、段落の区切りを示します。 -
hr
要素は、あくまで段落レベルの区切りに使用します。 -
border
要素は、コンテンツを区切る又は囲む際に使用します。 - CSSで線の種類、色、太さなどの指定も可能になります。
- hr要素の正しい使い方は覚えておきましょう。
Chrome | Safari | Firefox | IE | Edge |
---|
| | | | |
スポンサーリンク

SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事