区切り線をCSSで描きかえる｜hrで作る破線・両端が消える線・記号つき・波線、コピペ4種類と使いどころ

文章のまとまりの間に引く、1本の線。お知らせの日付ごと、記事の話題が変わるところ、読み物の場面が変わるところ。区切り線は地味ですが、ページの読みやすさを左右する部品です。HTMLには、そのための <hr> という要素があり、見た目はCSSで自由に変えられます。

使いどころは「話題や場面が変わる」ところです。見た目をそろえたいだけの場所には <hr> を使わず、見出しや箱の枠線（border）で区切ります。

この記事の要点

<hr> に border: 0 を付けてから、border-top や背景で描き直すと、破線・両端が消える線・記号つき・波線などに変えられる
使いどころは、文章の中で話題や場面が変わるところ。見た目の飾りとして線を引きたいだけなら、hr ではなく見出しや箱の border を使う
グラデーションの線は強制カラーモードで消えるので、代わりの線を用意する。線が薄すぎないか、余白が近すぎないかも確かめる

連載「WEBの技術」の41回目です。
今回は区切り線。hr のタグ1つを、CSSで4種類の見た目に描きかえます。

完成見本：区切り線4種類

どれも、HTMLは <hr> 1つだけです。線の形は、すべてCSSで描いています。

BORDER-TOP: DASHED1. 点線・破線お知らせの日付ごと、Q&Aの1問ごとなど、軽く区切りたいとき

LINEAR-GRADIENT2. 両端が消えるグラデーション線ブログの記事の終わりや、トップページの大きなまとまりの間

::BEFORE ＋ ::AFTER3. 真ん中に記号を置く読み物の「場面が変わる」ところ、章の区切り

BACKGROUND: URL(SVG)4. 短い波線見出しの下の飾りや、やわらかい雰囲気のページの区切り

※ 見本は読み上げソフトでは読まれないようにしています（コピペ用のコードは、そのまま読み上げられる形です）。

コピペ用のコード

CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-hr は、サイトのほかのデザインと名前がぶつからないようにするための目印です。WordPressのブロックエディタの「区切り」ブロックも <hr> を出すので、ブロックの「高度な設定」にある「追加CSSクラス」に kd-hr-dash などと書けば、同じ見た目にできます（テーマが区切りブロックに付けている線の指定が強い場合は、見え方が変わることがあります）。

1. 点線・破線

まず border: 0 で、ブラウザが最初から付けている線を消します。そのうえで border-top（上の辺の線）だけに dashed（破線）を指定しています。dotted にすると点線、double にすると二重線になります。

HTML

<p>10月の営業日は、カレンダーのとおりです。</p>
<hr class="kd-hr-dash">
<p>11月は、3日と23日がお休みです。</p>

CSS

.kd-hr-dash {
  /* ブラウザが最初から付けている線を消す */
  border: 0;
  /* 上の辺だけに、太さ2pxの破線を引く */
  border-top: 2px dashed #7B8A97;
  margin: 2.5em 0;
}

2. 両端が消えるグラデーション線

線を枠線ではなく、高さ2pxの背景として描きます。linear-gradient（色が少しずつ変わる背景）で「透明→青→透明」と指定すると、両端がふっと消える線になります。強制カラーモード（画面の色を決まった配色に変える設定）では、グラデーションの背景は表示されないので、ふつうの線に置きかえる指定も入れています。

HTML

<p>ここまでが、サービスの紹介です。</p>
<hr class="kd-hr-fade">
<p>ここからは、よくある質問です。</p>

CSS

.kd-hr-fade {
  border: 0;
  height: 2px;
  margin: 2.5em 0;
  /* 両端が透明、真ん中が青のグラデーションで線を描く */
  background: linear-gradient(90deg, transparent, #0284C7 50%, transparent);
}
/* 強制カラーモードではグラデーションが消えるので、ふつうの線に置きかえる */
@media (forced-colors: active) {
  .kd-hr-fade {
    border-top: 1px solid CanvasText;
  }
}

3. 真ん中に記号を置く

::before（要素の前に足す飾り）で横いっぱいの細い線を引き、::after（後ろに足す飾り）で真ん中に「◆」を置きます。記号のまわりをページの背景色（ここでは白）でぬると、線がそこで切れて見えます。HTMLは、ふつうの <hr> 1つのままです。

HTML

<p>その日は、朝から雨が降っていました。</p>
<hr class="kd-hr-orn">
<p>三日後、晴れた午後のことです。</p>

CSS

.kd-hr-orn {
  position: relative;
  border: 0;
  height: 24px;
  margin: 2.5em 0;
  /* 真ん中の記号が切れないようにする */
  overflow: visible;
  text-align: center;
}
.kd-hr-orn::before {
  /* 高さの真ん中に、横いっぱいの線を引く */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid #A9B6C1;
}
.kd-hr-orn::after {
  /* 線の上に記号を乗せ、まわりをページの背景色でぬって線を切る */
  content: "◆";
  position: relative;
  padding: 0 14px;
  background: #FFFFFF;
  color: #0284C7;
  font-size: 12px;
  line-height: 24px;
}

4. 短い波線

波1つ分の形をSVG（線や形を数字で描く画像）で描き、background の repeat-x（横にくり返す指定）で並べます。線の幅を120pxにして、margin の左右を auto にすると、真ん中に短い波線が置かれます。画像（url）で描いた背景は、強制カラーモードでも消えません。

HTML

<p>季節のおすすめを、3つ選びました。</p>
<hr class="kd-hr-wave">
<p>最後に、店舗からのお知らせです。</p>

CSS

.kd-hr-wave {
  border: 0;
  width: 120px;
  height: 12px;
  /* 左右を auto にして、真ん中に置く */
  margin: 2.5em auto;
  /* 波1つ分をSVGの画像で描き、横にくり返す */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 6 Q6 0 12 6 T24 6' fill='none' stroke='%230284C7' stroke-width='2'/%3E%3C/svg%3E") repeat-x center / 24px 12px;
}

仕組み：hr は「線」ではなく「区切り」

hr が表しているもの

<hr> は「水平な線（horizontal rule）」の略で、昔は線を引くためのタグとして使われていました。今のHTMLでは意味が決まっていて、MDNでは「話題の区切り」、たとえば物語の場面が変わるところや、ひとつのまとまりの中で話題が移るところを表す、と説明されています。

そのため、読み上げソフトにも「区切り」として伝わります。MDNによると、hr の役割は separator（区切り）で、読み上げソフトで1行ずつ読み進めると、そこで区切りがあることが分かります。見た目の線を消しても、この意味は残ります。

最初に border: 0 で、ブラウザの線を消す

何も指定しない hr は、ブラウザが最初から付けている「枠線」で線が描かれています。ブラウザごとに色や立体的な見え方が少し違うので、どの見本も最初に border: 0 で一度消してから、自分の線を描き直しています。

描き直し方は、大きく分けて3つです。1は枠線（border-top）、2と4は背景（background）、3は飾りの要素（::before・::after）で線を描いています。背景で描く場合は、height（高さ）が線の太さになります。

点線・破線の間かくは、ブラウザで少し違う

MDNによると、dotted の点の間かくや、dashed の線の長さは、仕様では決まっていません。同じCSSでも、ChromeとSafariで破線の長さが少し違って見えることがあります。間かくまでぴったりそろえたいときは、4のように背景の画像で描きます。

記号を置く線は、背景色をそろえる

3は、横いっぱいの線の上に「◆」を乗せ、そのまわりを白くぬって線を切っています。ページの背景が白以外の場所に置くと、記号のまわりだけ白い四角が見えてしまいます。

白いページ（見本）

背景が淡い青のページ

使う場所の背景色に合わせて、::after の background を書きかえます。背景が写真やグラデーションの場所には、この作り方は向きません。

数値を変えるとどうなるか

線の種類（1）

solid：実線

dashed：破線（見本）

dotted：点線

double：二重線

border-top-style を変えるだけで、実線・破線・点線・二重線を切りかえられます。点線は太さ2pxだと点が小さく見えにくいので、比較では3px、二重線は線が2本に分かれるので4pxにしています。

グラデーションの青い部分の広さ（2）

真ん中だけ青（見本）

25〜75%を青に

グラデーションなし

真ん中だけを青にすると（左）、両端がふっと消えて、やわらかい区切りになります。25〜75%を青にすると（中）、線の長さがはっきりします。グラデーションをやめると（右）、ふつうの1本線です。

線の色（1）

#E2EBF2：ほぼ見えない

#A9B6C1：やわらかい

#7B8A97（見本）

白い背景に #E2EBF2 のような薄い色の線を引くと（左）、明るさの差が約1.2倍しかなく、画面によってはほぼ見えません。#A9B6C1 で約2.1倍、見本の #7B8A97 で約3.5倍です。区切りがあることを伝えたいなら、見本くらいの濃さを目安にします。

上下の余白（1）

余白 0.3em：近すぎる

余白 1.6em（見本の台）

余白 3.2em：離れすぎる

線と文章が近すぎると（左）、線が下の文章の下線のように見えます。離れすぎると（右）、ページがそこで終わったように見えることがあります。見本のコードでは上下に 2.5em（文字2.5個ぶん）、記事の見本の台では少し詰めて 1.6em にしています。

変えるところ	指定	今回の値	目安
線の種類	border-top-style	dashed	solid・dashed・dotted・double
線の太さ	border-top-width / height	1〜2px	点線は3px以上、二重線は4px以上
線の色	border-top-color	#7B8A97	白い背景との明るさの差が3倍くらい
上下の余白	margin	2.5em	前後の段落の余白より広く

スマホと、見る人への配慮

スマホでは、余白を少し詰める

スマホは画面の縦が短いので、上下に大きな余白をとった区切り線が続くと、画面に何も書いていない時間が長くなります。スマホ幅だけ margin を少し小さくするか、em（文字の大きさを基準にした単位）で書いておくと、文字の大きさに合わせて余白も変わります。

強制カラーモードでは、グラデーションが消える

Windowsの設定などで画面の色を決まった配色に変える「強制カラーモード」では、MDNによると、url で指定していない背景の画像は表示されません。グラデーションもこれに入るので、2の線は何もしないと消えてしまいます。2のコードでは、@media (forced-colors: active) の中で、ふつうの枠線に置きかえています。

1と3の枠線は、色が決まった色に置きかわって表示されます。4の波線は url の画像なので消えませんが、画像の中の色（青）はそのままです。どれもChromeの強制カラーの再現で確かめました。

飾りのための線は、hr にしない

見出しの下の飾り線や、カードの上下の線のように、話題が変わるわけではない線を hr で書くと、読み上げソフトで読むたびに「区切り」が入り、内容と関係のない区切りが増えます。MDNでも、線を引きたいだけなら、ほかの要素にCSSの枠線を付けるよう書かれています。

やりすぎ注意

区切り線が多すぎると、ページが細かく切れて、どこが大きな区切りなのか分からなくなります。見出し（h2・h3）がある場所には、ふつう区切り線は要りません。見出しそのものが区切りの役目をしているからです。

区切り線は「ここで話が変わります」という合図です。
見出しで足りるところに足すと、合図が多すぎて伝わりにくくなります。

AIに頼むなら

区切り線のCSSは、Claudeなどの生成AIに頼むとすぐ作ってもらえます。そのときは「どこに使うか」と「hr を使うかどうか」まで伝えると、意味の合ったコードになりやすくなります。

ブログ記事の中で、話題が変わるところに入れる区切り線をCSSで作って。
HTMLは hr を使い、両端が透明に消えるグラデーションの線にして。
強制カラーモードで線が消えないようにして、上下の余白は em で指定して。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

hr に border: 0 が入っているか。入っていないと、ブラウザが最初から付けている線と、新しく描いた線が二重に見えることがあります
飾りの線まで hr になっていないか。見出しの下やカードの枠の線が hr で書かれていたら、CSSの border に置きかえます
グラデーションの線に、強制カラーモードの代わりがあるか。forced-colors の指定がなければ、線が消えてしまいます

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

お知らせやQ&Aのように、同じ形のまとまりが続くところ。1の破線で軽く区切ると、どこからどこまでが1件なのか分かりやすくなります
ブログ記事の本文の終わり。本文と「関連記事」「プロフィール」などの間に、2の両端が消える線を1本入れます
読み物やコラムで、場面や時間が変わるところ。見出しを立てるほどではない変わり目に、3の記号つきの線を使います

使わない場面

見出しのすぐ上や下。見出しで区切れているので、線を足すと区切りが二重になります
カードや表の中の区切り。話題が変わるわけではないので、hr ではなく、カードや行の border で線を引きます
1つのページで、いろいろな種類の線を混ぜること。線の種類が違うと、区切りの大きさが違うのかと読む人が迷います。使う線は1〜2種類にしぼります

KAKERUなら、区切り線は1サイトで1〜2種類に決めておきます。
「大きな区切りは2、小さな区切りは1」のように、役目と線をセットにします。

まとめ

hr は「線」ではなく「話題や場面の区切り」を表す要素。読み上げソフトにも区切りとして伝わる
border: 0 でブラウザの線を消してから、border-top・背景・::before と ::after で描き直す
グラデーションの線は強制カラーモードで消えるので、forced-colors で代わりの線を用意する
線の色は、白い背景との明るさの差が3倍くらいを目安に。余白は前後の段落より広く
飾りのための線は hr にしない。見出しがあるところには、区切り線は要らない

まずは1のコードをコピーして、お知らせの一覧などで試してみてください。dashed を dotted や double に変えると、線の印象の違いがすぐ分かります。

参考にした資料

いずれも2026年11月4日に確認しました。ブラウザの対応状況は変わることがあります。最新の情報は各ページでご確認ください。

MDN「<hr>: The Thematic Break (Horizontal Rule) element」（英語）
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/hr
※hr は話題や場面の区切りを表す要素で、線を引くためのものではないこと。線だけがほしいときは、ほかの要素に CSS の枠線を付けること。暗黙の役割は separator
MDN「ARIA: separator role」（英語）
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/separator_role
※hr の役割は separator（区切り）。読み上げソフトで1行ずつ読むときに、区切りとして伝わること
MDN「border-style」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-style
※dotted・dashed・double などの線の種類。点の間かくや破線の長さは仕様で決まっておらず、ブラウザごとに違うこと
MDN「linear-gradient()」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/linear-gradient
※直線の向きに色が少しずつ変わる背景を作る指定
MDN「forced-colors」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/forced-colors
※強制カラーモードでは、文字や枠線の色が決まった色に置きかわり、url で指定していない background-image（グラデーションなど）は表示されないこと
MDN「background-repeat」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background-repeat
※repeat-x で、背景の画像を横方向にだけくり返すこと