HTMLのhrタグは、文書内のセクションを分けるためによく使われますが、デフォルトのスタイルはブラウザによって異なる場合があります。この記事では、CSSを使ってhrタグを点線にカスタマイズする方法を紹介します。
hrタグの基本
hrタグは、文書内のテーマの変更を示す水平線を挿入するために使用されます。標準の状態ではシンプルな水平線ですが、CSSを使用することでそのスタイルを自由に変更できます。
点線のhrタグを作成する方法
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点線のHRタグ</title>
<style>
hr {
border: none;
border-top: 1px dashed #000;
margin: 20px 0;
}
</style>
</head>
<body>
<p>これは段落です。</p>
<hr>
<p>これは別の段落です。</p>
</body>
</html>
- border: none; はデフォルトの境界線を削除します。
- border-top: 1px dashed #000; は上側に1ピクセルの点線の境界線を設定します。色は黒 (#000) です。
- margin: 20px 0; は上下に20ピクセルのマージンを追加して、コンテンツから適切なスペースを確保します。
よくある質問（FAQ）
Q. CSSでhrタグのデザインをカスタマイズするには？
A. border: none; border-top: 2px solid #ccc;でシンプルな線に変更できます。background-colorでグラデーション線を作ることも可能です。hrのheightとborderを組み合わせて太さを調整します。
Q. hrタグを点線や破線にするには？
A. border: none; border-top: 2px dashed #ccc;またはborder-top: 2px dotted #ccc;で設定します。border-colorやborder-widthも組み合わせて自由にデザインできます。
Q. hrタグを使わずにCSSで水平線を引くには？
A. 空のdivにborder-bottom: 1px solid #ccc; margin: 20px 0;を設定します。または::after・::beforeの擬似要素にcontent: “”; display: block; border-top: 1px solid #ccc;を使う方法もあります。
まとめ
hrタグを点線にカスタマイズすることで、文書の視覚的な分割をより魅力的にすることができます。CSSを使って簡単にスタイルを変更できるので、ぜひ試してみてください。