HTMLで水平線（横線）を引くには<hr>タグを使います。
空要素（void element）なので、終了タグは不要です。
ページ内でコンテンツを区切る際に使用します。
とても簡単ですが、デザインを変更するのが案外難しい、というか、変更できることを知らない方もいます。
※垂直（縦線）を引くのも案外難しいので別で紹介する予定です。
<hr>タグをCSSでカスタマイズするコツは、border: none;でデフォルトのスタイルをリセットしてから、background-colorやheightなどでデザインを指定するのが一般的です。
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平線のデザイン例</title>
<style>
/* デフォルトの水平線 */
.default {
/* ブラウザのデフォルトスタイル */
}
/* 太い線 */
.thick {
border: none;
height: 5px;
background-color: #333;
}
/* 点線 */
.dotted {
border: none;
border-top: 3px dotted #666;
}
/* 破線 */
.dashed {
border: none;
border-top: 2px dashed #999;
}
/* グラデーション */
.gradient {
border: none;
height: 3px;
background: linear-gradient(to right, #ff6b6b, #4ecdc4, #45b7d1);
}
/* 影付き */
.shadow {
border: none;
height: 2px;
background-color: #ddd;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* 装飾的な線 */
.decorative {
border: none;
height: 1px;
background-color: #e0e0e0;
position: relative;
margin: 30px 0;
}
.decorative::before {
content: "◆";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: white;
color: #999;
padding: 0 15px;
font-size: 14px;
}
/* 短い線（中央寄せ） */
.short {
border: none;
height: 2px;
background-color: #666;
width: 100px;
margin: 20px auto;
}
/* アニメーション付き */
.animated {
border: none;
height: 3px;
background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
background-size: 200% 100%;
animation: gradient-shift 3s ease-in-out infinite;
}
@keyframes gradient-shift {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
</style>
</head>
<body>
<h1>HTML水平線（<hr>）のデザイン例</h1>
<h2>1. デフォルトの水平線</h2>
<p>ブラウザのデフォルトスタイルです。</p>
<hr class="default">
<h2>2. 太い線</h2>
<p>height プロパティで太さを調整できます。</p>
<hr class="thick">
<h2>3. 点線</h2>
<p>border-top: dotted で点線にできます。</p>
<hr class="dotted">
<h2>4. 破線</h2>
<p>border-top: dashed で破線にできます。</p>
<hr class="dashed">
<h2>5. グラデーション</h2>
<p>linear-gradient でカラフルな線を作れます。</p>
<hr class="gradient">
<h2>6. 影付き</h2>
<p>box-shadow で立体感を演出できます。</p>
<hr class="shadow">
<h2>7. 装飾的な線</h2>
<p>::before 疑似要素を使って装飾を追加できます。</p>
<hr class="decorative">
<h2>8. 短い線（中央寄せ）</h2>
<p>width と margin: auto で短い線を中央に配置できます。</p>
<hr class="short">
<h2>9. アニメーション付き</h2>
<p>CSS アニメーションで動きのある線を作れます。</p>
<hr class="animated">
<h2>CSSのポイント</h2>
<ul>
<li><code>border: none;</code> でデフォルトのボーダーを無効化</li>
<li><code>height</code> で線の太さを指定</li>
<li><code>background-color</code> で色を変更</li>
<li><code>width</code> と <code>margin</code> で長さと位置を調整</li>
<li>疑似要素や transforms を使って装飾的な効果を追加</li>
</ul>
</body>
</html>
プレビュー
