hrタグで作った水平線をCSSで設定する方法！

2024年5月6日

侍テック編集部

今回はHTMLで使われるhrタグについて解説をしていきます！

hrタグでは罫線を引くことが出来ます。ただこのhrタグはCSSのborderとどちらを使えばよいのか、迷ってしまう人も多いです。この記事では、

hrタグとは
CSSのborderプロパティとの違い
hrタグの使い方、CSSでスタイルを変える方法

について解説をしていきます。やさしいサンプルコードで解説していくのでぜひご覧ください！

hrタグとは

まずはhrタグがどのようなものなのかを知っておきましょう。hrタグとはHorizontal Ruleの略で、水平な罫線を引くためのタグです。こちらのコードをご覧ください。

<html>
    <body>
        <p>下がhrタグで作られた罫線です。</p>
        <hr>
        <p>上がhrタグで作られた罫線です。</p>
    </body>
</html>

実行結果

このように、hrタグが書かれた部分だけ水平な罫線が引かれています。このタグには閉じタグが無いことにも注意しましょう。

CSSのborderプロパティとの違い

ここで似たような効果を得ることができるCSSのborderプロパティについて、使い所を見ていきましょう。基本的に、罫線を引く場合はCSSのborderプロパティで要素を指定して行うほうが良いと考えます。

CSSでは見た目に関わるものをひとまとめにしておくことが望ましいのですが、hrタグを使ってしまうと「罫線」という見た目に関わる部分がHTML上に書かれてしまう[ことになります。

コンテンツとして必要なものはHTMLで、装飾として分類されるものはCSSに書いていくようにしましょう。CSSのborderプロパティについて、詳しくはこちらの記事をご覧ください。

【CSS入門】borderを使いこなすための3つのステップ

更新日：2024年5月6日

hrタグの使い方

先程はCSSを使ったborderを推奨してきましたが、制約がある場合はHTMLファイルのみである程度見やすいWebサイトを作る必要が出てくるかもしれません。そこでhrタグの使い方について解説していきます。

まずは太さを変えてみましょう。こちらのコードをご覧ください。

<html>
    <body>
        <p>下がhrタグで作られた罫線です。</p>
        <hr size="10" noshade>
        <p>上がhrタグで作られた罫線です。</p>
    </body>
</html>

実行結果

このコードでは分かりやすいように太さを変えて、noshadeという属性を設定しました。noshadeを設定することで、立体感をなくしています。

次に、長さを調節してみましょう。こちらのコードをご覧ください。

<html>
    <body>
        <p>下がhrタグで作られた罫線です。</p>
        <hr size="10" width="50%" noshade>
        <p>上がhrタグで作られた罫線です。</p>
    </body>
</html>

実行結果

hrタグで作られた罫線の長さをwidth属性で50%（半分）にしました。hrタグの使い方について、基本的なところは分かっていただけだでしょうか？

CSSでhrタグを装飾する方法

ここでCSSを使ってhrタグのスタイルを変える方法も見ていきましょう。こちらのコードをご覧ください。

<html>
    <style>
        .double {
            border: none;
            background-color: #fff;
            border-width: 1px 0 0 0;
            border-top: double;
            border-color: black;
        }
        
        .dot {
            border: none;
            background-color: #fff;
            border-width: 1px 0 0 0;
            border-top: dotted;
            border-color: black;
        }

    </style>
    <body>
        <p>2重線</p>
        <hr class="double" noshade>
        <p>点線</p>
        <hr class="dot" noshade>
    </body>
</html>

実行結果