記事やページのセクションを区切りたい時、標準のhrタグのままだと、細くて味気ない線になってしまいます。
この記事では、コピペするだけで使える区切り線（セパレーター）を20個まとめました。
シンプルな実線から、波線、グラデーション、中央にアイコンや文字を入れたものまで、幅広く用意しています。
カード・バッジなどの記事と同じく、HTMLとCSSを分けて掲載しています。
今回も20個、結構なボリュームだね！
うん、使い方だけ先に説明するから、そのあとは気になるところから見てね。
使い方｜HTMLとCSSをそれぞれ貼り付ける
CSSのコードを、サイトのスタイルシートに追加します。
続いて、HTMLのコードを、区切りたい場所に貼り付けます。
多くはhrタグ（意味のある区切り）で作っていますが、中央に文字やアイコンを入れるタイプはdivタグを使っています。
線の幅は、サンプルでは「100%」または固定値にしているので、サイトのレイアウトに合わせて調整してください。
デザイン一覧（20個）
01. シンプルな実線
もっとも基本の、細い1本線です。
実際の見た目
HTMLコード
<hr class="kts-sep01">CSSコード
.kts-sep01 { border: none; border-top: 1px solid #D8DCE1; margin: 24px 0; }02. 太めの実線
存在感のある、太めの線です。大きな章の切れ目に向いています。
実際の見た目
HTMLコード
<hr class="kts-sep02">CSSコード
.kts-sep02 { border: none; border-top: 4px solid #1F2933; margin: 24px 0; }03. 点線
小さな点が連なる、カジュアルな印象の線です。
実際の見た目
HTMLコード
<hr class="kts-sep03">CSSコード
.kts-sep03 { border: none; border-top: 3px dotted #8A94A0; margin: 24px 0; }04. 破線
短い線が並ぶ、やや目立つ点線タイプです。
実際の見た目
HTMLコード
<hr class="kts-sep04">CSSコード
.kts-sep04 { border: none; border-top: 2px dashed #8A94A0; margin: 24px 0; }05. 二重線
2本の線を並べた、落ち着いた印象の区切りです。
実際の見た目
HTMLコード
<hr class="kts-sep05">CSSコード
.kts-sep05 { border: none; border-top: 6px double #1F2933; margin: 24px 0; }06. グラデーション線
左から右へ色が変わる、華やかな線です。
実際の見た目
HTMLコード
<hr class="kts-sep06">CSSコード
.kts-sep06 { border: none; height: 4px; background: linear-gradient(90deg, #6C63FF, #3F8CFF, #4CE0D2); border-radius: 999px; margin: 24px 0; }07. 中央に短い太線
中央にだけ短い線を置く、すっきりした区切りです。
実際の見た目
HTMLコード
<hr class="kts-sep07">CSSコード
.kts-sep07 { border: none; width: 60px; height: 4px; background: #D97757; border-radius: 999px; margin: 28px auto; }08. 中央に文字を入れた区切り線
線の真ん中に文字を入れて、セクションの切り替わりを示します。
実際の見た目
HTMLコード
<div class="kts-sep08">続きはこちら</div>CSSコード
.kts-sep08 { display: flex; align-items: center; gap: 14px; margin: 24px 0; color: #8A94A0; font-size: 13px; font-family: sans-serif; } .kts-sep08::before, .kts-sep08::after { content: ""; flex: 1; border-top: 1px solid #D8DCE1; }09. 中央に星を入れた区切り線
線の中央に、装飾記号を添えた区切りです。
実際の見た目
HTMLコード
<div class="kts-sep09" aria-hidden="true">★</div>CSSコード
.kts-sep09 { display: flex; align-items: center; gap: 14px; margin: 24px 0; color: #FFB020; font-size: 16px; } .kts-sep09::before, .kts-sep09::after { content: ""; flex: 1; border-top: 1px solid #D8DCE1; }10. 波線
波打つ線で、やわらかい印象の区切りにします。
実際の見た目
HTMLコード
<div class="kts-sep10" aria-hidden="true"></div>CSSコード
.kts-sep10 { height: 10px; margin: 24px 0; background: radial-gradient(circle at 10px -4px, transparent 8px, #3F8CFF 9px, #3F8CFF 11px, transparent 12px) repeat-x; background-size: 20px 12px; }11. ジグザグ線
山型が連なる、ユニークな区切りです。
実際の見た目
HTMLコード
<div class="kts-sep11" aria-hidden="true"></div>CSSコード
.kts-sep11 { height: 10px; margin: 24px 0; background: linear-gradient(135deg, #D97757 25%, transparent 25%) -5px 0, linear-gradient(225deg, #D97757 25%, transparent 25%) -5px 0; background-size: 10px 10px; background-repeat: repeat-x; }12. ドット3つの区切り
3つの点を中央に並べた、控えめな区切りです。
実際の見た目
HTMLコード
<div class="kts-sep12" aria-hidden="true">・・・</div>CSSコード
.kts-sep12 { text-align: center; margin: 24px 0; color: #8A94A0; font-size: 22px; letter-spacing: 0.5em; }13. 両端がフェードする線
両端に向かって薄くなる、なめらかな線です。
実際の見た目
HTMLコード
<hr class="kts-sep13">CSSコード
.kts-sep13 { border: none; height: 2px; margin: 24px 0; background: linear-gradient(90deg, transparent, #8A94A0, transparent); }14. 影付きの線
線の下に影を落とした、立体感のある区切りです。
実際の見た目
HTMLコード
<hr class="kts-sep14">CSSコード
.kts-sep14 { border: none; height: 2px; margin: 24px 0; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }15. 斜めストライプの線
斜めの縞模様で、遊び心のある区切りにします。
実際の見た目
HTMLコード
<hr class="kts-sep15">CSSコード
.kts-sep15 { border: none; height: 8px; margin: 24px 0; background: repeating-linear-gradient(-45deg, #FFB020, #FFB020 6px, #fff 6px, #fff 12px); }16. 丸い点が並ぶ線
小さな丸が等間隔に並ぶ、かわいらしい区切りです。
実際の見た目
HTMLコード
<div class="kts-sep16" aria-hidden="true"></div>CSSコード
.kts-sep16 { height: 8px; margin: 24px 0; background: radial-gradient(circle, #3F8CFF 3px, transparent 3.5px) repeat-x; background-size: 16px 8px; }17. 2色に分かれた線
左右で色を分けた、シンプルながら印象的な線です。
実際の見た目
HTMLコード
<hr class="kts-sep17">CSSコード
.kts-sep17 { border: none; height: 4px; margin: 24px 0; background: linear-gradient(90deg, #2E6F5E 50%, #D97757 50%); }18. 左寄せの短い線
左端に短く太い線を置く、見出しの前後に向いた区切りです。
実際の見た目
HTMLコード
<hr class="kts-sep18">CSSコード
.kts-sep18 { border: none; width: 80px; height: 4px; margin: 24px 0; background: #1F2933; }19. ひし形を中央に置いた区切り
線の中央に小さなひし形を添えた、上品な区切りです。
実際の見た目
HTMLコード
<div class="kts-sep19" aria-hidden="true"></div>CSSコード
.kts-sep19 { position: relative; height: 1px; margin: 28px 0; background: #D8DCE1; } .kts-sep19::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; background: #D97757; transform: translate(-50%, -50%) rotate(45deg); }20. ギザギザの切り取り線風
ハサミで切り取るような、点線と記号を組み合わせた区切りです。
実際の見た目
HTMLコード
<div class="kts-sep20" aria-hidden="true">✂</div>CSSコード
.kts-sep20 { display: flex; align-items: center; gap: 10px; margin: 24px 0; color: #8A94A0; font-size: 16px; } .kts-sep20::after { content: ""; flex: 1; border-top: 2px dashed #8A94A0; }カスタマイズの小ワザ
- 線の色を変えたい時は、CSS内の色コード（#で始まる部分）を書き換えてください。
- 線の太さは、border-topやheightの数値を書き換えることで調整できます。
- 上下の余白は、marginの数値（24pxなど）を書き換えることで調整できます。
- 10番の波線・11番のジグザグ・16番の丸ドットは、background-sizeの数値を変えると、波や点の大きさを調整できます。
- 装飾記号（★や✂など）は、使用しているフォントによって見た目が変わる場合があります。
まとめ｜早見表
| 雰囲気 | 該当する区切り線 |
|---|---|
| シンプル・定番 | 01, 02, 03, 04, 05 |
| 華やか・グラデーション | 06, 13, 17 |
| 文字・記号を入れる | 08, 09, 12, 19, 20 |
| 模様で見せる | 10, 11, 15, 16 |
| 立体感・ワンポイント | 07, 14, 18 |
区切り線だけでも、こんなに種類があるんだね！
うん、見出しや余白と組み合わせると、ページ全体の読みやすさがぐっと上がるよ。見出しの記事もあわせて見てみてね。
20個の区切り線は、線の種類・色・模様・記号の違いで、ページの雰囲気を変えられる。見出しやカードと組み合わせることで、セクションの切れ目を自然に伝えられる。
