【CSS】hrタグの表示を点線にする方法

HTML/CSS

2024.06.18

HTMLのhrタグは、文書内のセクションを分けるためによく使われますが、デフォルトのスタイルはブラウザによって異なる場合があります。この記事では、CSSを使ってhrタグを点線にカスタマイズする方法を紹介します。

目次

hrタグの基本
点線の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ピクセルのマージンを追加して、コンテンツから適切なスペースを確保します。

まとめ

hrタグを点線にカスタマイズすることで、文書の視覚的な分割をより魅力的にすることができます。CSSを使って簡単にスタイルを変更できるので、ぜひ試してみてください。