hrタグ 👉 テーマの区切りを表す

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でも同じです */
}