HTMLで罫線を引く方法｜hrタグとCSSのborderを初心者向けに解説

HTMLで文章やセクションの間に線を引きたいのに、どのタグを使えばよいのか分からないことがありますよね。線は表示できても、太さや色を変えようとするとCSSも必要になり、迷いやすいところです。

この場合は、話題の区切りにはHTMLの <hr>、見た目の装飾にはCSSの border を使います。この記事では、1本の横罫線を表示するところから始め、太さ・色・長さ・余白を順番に整えます。

HTMLで横罫線を引く最短コード

話題と話題の間を区切るなら、HTMLへ <hr> を1行追加するだけです。ブラウザで表示すると、次のように2つの内容の間へ横罫線が入ります。

index.html を開き、区切りたい2つの内容の間へ次の <hr> を追加してください。

<h2>商品の特徴</h2>
<p>軽くて持ち運びやすい商品です。</p>

<hr>

<h2>お手入れ方法</h2>
<p>柔らかい布で汚れを拭き取ってください。</p>

hr は「horizontal rule」に由来する名前です。現在のHTMLでは、単に線を描くタグではなく、文章の中で話題が切り替わることを表します。

<hr> は中に文章や画像を入れない「空要素」です。</hr> という終了タグは書きません。

hrタグの太さ・色・余白をCSSで整える

ブラウザには最初から hr のスタイルが用意されているため、HTMLだけでも線は表示されます。ただし、初期の太さや色はブラウザによって見え方が異なるので、実際のWebページではCSSでそろえると安心です。

ここでは、太さ2pxの青い実線にして、上下へ32pxの余白を付けます。適用後の表示は次のとおりです。

まず、index.html の hr にクラス名を付けます。クラス名は、CSSをこの罫線だけへ適用するための目印です。

<p>ここまでが最初の話題です。</p>

<hr class="topic-divider">

<p>ここから次の話題が始まります。</p>

続いて、style.css の末尾へ次のコードを追加します。

.topic-divider {
  border: 0;
  border-top: 2px solid #2563eb;
  margin: 32px 0;
}

border: 0; でブラウザ既定の枠線をいったん消し、border-top で上側だけに新しい線を引いています。既定の見た目を消してから作り直すことで、意図しない二重線や立体的な線を防げます。

• 2px：線の太さです。細い区切りなら1〜2pxから試します。
• solid：線の種類です。solid は途切れない実線を表します。
• #2563eb：線の色です。16進数カラーコードで青を指定しています。
• margin: 32px 0;：線の上下へ32px、左右へ0の外側余白を付けます。

border-top の値は「太さ・種類・色」の順に、空白で区切って1行へ書けます。線が表示されないときは、特に solid を書き忘れていないか確認してください。

width・size・noshade属性は使わない

古い解説では <hr width="50%"> や size、noshade を見かけることがあります。しかし、これらは現在のHTMLでは廃止された古い見た目用の属性です。

HTMLは内容の意味を表し、見た目はCSSへ任せるのが現在の基本です。古い属性をそのまま使わず、クラス名とCSSへ置き換えましょう。

hrとborderの使い分け

横線が必要になると、hr と border のどちらを選ぶべきか迷いますよね。判断するときは、その線に「話題が変わる」という意味があるかを考えます。

装飾だけのために空の <div class="line"></div> を追加すると、HTMLを読んだときに要素の役割が分かりにくくなります。既存の見出しやセクションへ border を付ければ、不要なHTMLを増やさずに済みます。

罫線の長さと上下の余白を調整する

罫線が画面いっぱいに伸びて目立ちすぎる場合は、width で長さを短くします。短い線を中央に置くには、左右の margin を auto にします。

前の .topic-divider を次の内容へ変更してください。

.topic-divider {
  width: min(80%, 560px);
  border: 0;
  border-top: 1px solid #94a3b8;
  margin: 40px auto;
}

width: min(80%, 560px); は、親要素の80%と560pxのうち小さい方を使う指定です。パソコンでは最大560px、狭い画面では横幅の80%になるため、スマートフォンでもはみ出しにくくなります。

margin: 40px auto; の最初の値は上下、2つ目は左右です。上下へ40pxの空きを作り、左右の余白を自動で均等にすることで、短い線が中央へ移動します。

実線・破線・点線・二重線を使う

border-style の値を変えると、罫線を実線だけでなく破線や点線にもできます。よく使う4種類をブラウザで見比べると、次のように表示されます。

index.html には、種類ごとに異なるクラス名を付けた hr を用意します。

<hr class="divider divider--solid">
<hr class="divider divider--dashed">
<hr class="divider divider--dotted">
<hr class="divider divider--double">

style.css では、共通の余白を .divider へまとめ、線の種類だけを個別に指定します。

.divider {
  border: 0;
  margin: 32px 0;
}

.divider--solid {
  border-top: 2px solid #2563eb;
}

.divider--dashed {
  border-top: 2px dashed #2563eb;
}

.divider--dotted {
  border-top: 3px dotted #2563eb;
}

.divider--double {
  border-top: 4px double #2563eb;
}

• solid：一般的な実線です。迷ったら、まずこれを選びます。
• dashed：破線です。補足情報や控えめな区切りに使えます。
• dotted：点線です。線が細すぎると点が見えにくいため、太さも調整します。
• double：二重線です。2本を表示するため、3px以上の太さを目安にします。

線の色を薄くしすぎると、環境によっては区切りが見えません。罫線だけに頼らず、見出しや余白も併用して内容のまとまりが伝わるようにしましょう。

罫線を使ったデザイン例

基本の横罫線ができたら、見出しやセクションにも応用できます。ここでは、実際のWebページで使いやすい3つのデザインを、表示結果とコードを対応させながら紹介します。

見出しの左側に罫線を付ける

見出しを目立たせたいときは、border-left で左側へ縦線を付けます。文字と線が近づきすぎないように、padding-left も一緒に指定した表示です。

index.html の見出しへ border-heading というクラス名を付けます。

<h2 class="border-heading">サービスの特徴</h2>

style.css へ、左線と文字の間隔を追加します。

.border-heading {
  border-left: 6px solid #2563eb;
  padding-left: 12px;
  line-height: 1.5;
}

border-left の6pxがアクセント線の太さ、padding-left の12pxが線と文字の間隔です。見出しの文字サイズを変えたときは、この2つも見直すとバランスを整えやすくなります。

セクションの間に罫線を付ける

複数のセクションを並べる場合は、2つ目以降の上辺へだけ罫線を付けると、最初の内容の上に余分な線が出ません。

index.html では、区切りたい要素へ同じ section クラスを付けます。

<section class="section">
  <h2>最初のセクション</h2>
  <p>ここに最初の内容が入ります。</p>
</section>

<section class="section">
  <h2>次のセクション</h2>
  <p>ここから次の内容が始まります。</p>
</section>

style.css では、隣り合う2つ目以降の要素だけを選びます。

.section + .section {
  border-top: 1px solid #cbd5e1;
  margin-top: 32px;
  padding-top: 32px;
}

.section + .section は、直前にも section クラスの要素がある場合だけ選ぶCSSセレクターです。そのため、最初のセクションには線を付けず、続くセクションの上だけを区切れます。

文字を中央に置いた罫線を作る

「POINT」などの短い文字を線の中央へ置くデザインには、Flexboxと疑似要素を使います。疑似要素とは、HTMLに空の要素を追加せず、CSSから装飾用の部分を作る仕組みです。

index.html には、中央へ置く文字を span で囲んで記述します。

<p class="label-divider">
  <span>POINT</span>
</p>

style.css では、文字の前後に同じ長さの線を作ります。

.label-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #d97706;
  font-weight: 700;
}

.label-divider::before,
.label-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid #94a3b8;
}

::before と ::after が、文字の前後にある2本の線です。flex: 1; で残りの横幅を均等に分け、gap で文字と線の間へ16pxの空きを作っています。

罫線が表示されないときの確認点

コードを書いたのに線が見えないと、どこを直せばよいのか困りますよね。次の順番で確認すると、原因を絞り込みやすくなります。

1. 線の種類を書いているか：border-top: 2px #2563eb; だけでは、種類の初期値が none のため表示されません。solid を追加します。
2. クラス名が一致しているか：HTMLの class="topic-divider" と、CSSの .topic-divider を見比べます。
3. 別のCSSで消していないか：あとから読み込まれる border: 0; や border: none; は、四辺の線をまとめて消します。
4. 背景と同じ色ではないか：白い背景へ #fff の線を引いても見えません。確認中は濃い色に変えてみましょう。
5. CSSファイルが読み込まれているか：ほかのスタイルも反映されない場合は、ファイルのパスや保存状態を確認します。

CSSの優先順位や反映されない原因をもう少し詳しく確認したい方は、次の記事も参考にしてください。

そのまま使える完成コード

最後に、話題の区切りを表すHTMLと、スマートフォンでも横幅が収まるCSSをまとめます。パソコン幅とスマートフォン幅の表示結果を先に確認してみましょう。

画面幅を390pxまで狭くした場合も、本文の左右に余白が残り、横罫線は画面内へ収まります。

index.html には、2つの話題を表す section と、その間を区切る hr を記述します。

<main class="article">
  <section>
    <h2>HTMLの基本</h2>
    <p>HTMLはWebページの内容と構造を表します。</p>
  </section>

  <hr class="topic-divider">

  <section>
    <h2>CSSの基本</h2>
    <p>CSSは色や余白などの見た目を整えます。</p>
  </section>
</main>

style.css では、本文の最大幅と左右の余白を整え、罫線を中央へ配置します。

.article {
  width: min(100% - 32px, 720px);
  margin-inline: auto;
}

.topic-divider {
  width: min(80%, 560px);
  border: 0;
  border-top: 1px solid #94a3b8;
  margin: 40px auto;
}

width: min(100% - 32px, 720px); により、本文は最大720pxになり、狭い画面では左右に16pxずつ余白が残ります。罫線も親要素の80%まで縮むので、画面幅が変わっても中央に収まります。

まとめ

• 話題の切り替わりにはHTMLの <hr> を使う
• 装飾だけが目的なら、既存の要素へCSSの border を付ける
• border-top は「太さ・種類・色」の3つで指定する
• 長さは width、上下の空きと中央寄せは margin で調整する
• 古い width・size・noshade 属性ではなくCSSを使う

最初から凝ったデザインにする必要はありません。まず <hr> で区切りを表示し、次に border-top、最後に width と margin を足していくと、どの指定で見た目が変わったのか理解しやすくなります。