catnose
catnose
HTMLの<hr>タグは段落レベルのテーマの区切りを表します。
<p>コードキッチンはWeb制作の「あれどうやって作るの？」を料理のレシピのように探せるサービスです。</p>
<hr>
<p>思い返してみると、このサービスを作ろうと思ったきっかけは…</p>
👆<hr>は単体（閉じタグなし）で使います。ブラウザではデフォルトで水平の細い線が表示されます。
🤔hrは何の略？
hrは「Horizontal Rule」の略です。Horizontalは「水平」、Ruleは「線」の意味を持ちます。
hrタグの使い方
混乱しやすいのですが<hr>は「線を引きたい」という見栄え上の目的で使うものではありません。あくまでも内容に区切りをつけたいときに使います。
😺内容に区切りをつける目的で使い、結果として線が引かれる…というのが正しいhrタグの使い方です。
😺Webページを作るときには「装飾やレイアウトなど、見栄えに関わる部分は全てCSSが担当するべき」と考えましょう。
段落レベルの区切りをつけるために使う
<hr>の他にも、内容を区切るためのHTMLの要素はたくさんあります。代表的なのは<article>や<section>などのセクショニング・コンテンツです。
例えば<section>はセクション（1つのテーマのまとまり）を表します。
HTML セクションを作る場合
<!-- ↓ここから -->
<section>
<h2>コードキッチンとは</h2>
<p>コードキッチンはWeb制作の「あれどうやって作るの？」を料理のレシピのように探せるサービスです。</p>
<p>このサービスの特徴は…</p>
</section>
<!-- ↑ここまでが1つのセクション -->
<!-- ↓ここから -->
<section>
<h2>コードキッチンの使い方</h2>
<p>…</p>
</section>
<!-- ↑ここまでが1つのセクション -->
👆このように1つのテーマのまとまりには<section>を使います。
より細かいレベルで区切りをつけたいときにhrタグ
では「いつ<hr>を使うのか」というと、さらに細かいレベルで内容に区切りをつけたいときに使います。この「細かいレベル」＝「段落レベル」と言えます。
<section>
<h2>コードキッチンとは</h2>
<p>コードキッチンはWeb制作の「あれどうやって作るの？」を料理のレシピのように探せるサービスです。</p>
<hr><!-- 👈段落レベルでの区切り -->
<p>思い返してみると、このサービスを作ろうと思ったきっかけは…</p>
</section>
👆セクションの中で1つのテーマについて書いているものの、段落どうしの間で流れや内容が切り替わるというような箇所に<hr>を使うわけですね。
✍️この例ではsectionタグを使いましたが、sectionの中でないとhrタグは使えないというわけでは全くありません。段落レベルの区切りであれば、場所に関係なく使うことができます。
ストーリーを書くときに便利
<hr>は文章のテーマに関係なく使用できますが、特に小説などのストーリーを書くときに便利です。例えば、場面が切り替わるとき、時間が経過したとき、回想シーンの前後などですね。
<p>…そんな理由から大人になるのが楽しみで楽しみで仕方がなかった。</p>
<hr>
<p>いつの間にか僕は20歳になった。</p>
線を引きたいだけならhrタグを使わずCSSで
繰り返しになりますが、<hr>は「線を引きたいから」という理由で使うべきではありません。
👇単に線を引きたいだけなら、線を引きたい要素にclassを設定し、CSSのborderプロパティで線を指定すると良いでしょう。
<p class="bottom-line">この下に区切りをつけたい</p>
<p>文章</p>
👇中身が空の<div>要素にCSSで線を表示させ、好きな位置に線を引けるようにすることも可能です（空要素を使うべきかどうかは好みによりますが…）。
<p>この下に区切りをつけたい</p>
<div class="border"></div>
<p>文章</p>
水平線のスタイルをCSSで変える
hrの見た目を変えることもできます。hrに対してはデフォルトでborder: solid 1pxが指定されているため、これを解除してから、線のスタイルを定義し直すと良いでしょう。
hr {
margin: 30px 0; /* 線の前後の隙間 */
border: none; /* 一旦線を解除 */
border-top: dashed 2px #398fff; /* 点線を指定 */
/* 参考：↑border-bottomでも同じです */
}