1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです！笑
こんな方に読んでほしい
HTMLについて学びたい方へhr要素とは、段落の区切りを示します。
線(ボーダー)と聞くとborder要素が思い浮かびますが、今回は、段落(hr)について学びましょう。
 Chrome |  Safari |  Firefox |  IE |  Edge |
|---|---|---|---|---|
hr要素とは、段落の区切りを示します、
hrタグには、終了タグ/hrがありません、またデフォルトでは1本線(直線)で表示します。
hr要素とは、あくまで段落レベルの区切りに使用します。
border要素とは、コンテンツを区切る又は囲む際に使用します。
書き方は以下のようになります。
hr要素について
赤色とは、情熱・強さ・生命力・活動・祝福・派手・刺激・警告 など
愛、熱、力、血など、色の中で抽象的な意味が多い赤色。
緑色とは、自然、新鮮、安全、平和、健康、リフレッシュ など
穏やかで許容や安心感を与える色として、自然の象徴色とてし使われています。
<p>赤色とは、情熱・強さ・生命力・活動・祝福・派手・刺激・警告 など
愛、熱、力、血など、色の中で抽象的な意味が多い赤色。</p>
<hr>
<p>緑色とは、自然、新鮮、安全、平和、健康、リフレッシュ など
穏やかで許容や安心感を与える色として、自然の象徴色とてし使われています。</p>
hr要素とは、あくまで段落レベルの区切りになります。
例として、section間では、すでに区切りを表しているので、hrを使用するのはやめましょう。
間違った使い方
<section>
内容が入ります。
</section>
<hr>
<section>
内容が入ります。
</section>
section間で、線を引きたい場合は、ボーダー要素を使用しましょう。
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の種類は下記の参考記事から↓
【CSS】borderを指定し枠線を使いこなそう！初心者向け講座
今回はこれで以上です。
hr要素は、段落の区切りを示します。hr要素は、あくまで段落レベルの区切りに使用します。border要素は、コンテンツを区切る又は囲む際に使用します。| Chrome | Safari | Firefox | IE | Edge |
|---|---|---|---|---|
2021.07.27
2021.07.09
2021.07.06
2021.06.29
2023.09.28
2023.09.14
2023.08.24
2023.08.10
2023.07.27
2023.07.13
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2020 shu-naka-blog
