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

今回は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つのステップ
更新日 : 2019年4月30日

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>

実行結果

このコードでは、hrタグに対してborderプロパティを設定しています。ただ見て分かるように、これはhrタグを使う必要性に疑問がわきます。

hrタグを絶対に使いたいという場面でなければ、スタイルの変更という点からも、CSSのborderを使っていきましょう。

まとめ

この記事ではhrタグ[の使い方について解説をしてきました。基本的な使い方については分かっていただけだでしょうか?

解説してきたように、スタイルを適用させて使う場合はCSSのborderを使ったほうがより便利に罫線を扱うことが出来ます。ただ、罫線をコンテンツの一部として扱う場合はhrタグを使っていきましょう。

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

侍テック編集部

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。侍テック編集部では技術系コンテンツを中心に有用な情報を発信していきます。
サービスページはこちら
ツイッターはこちら
フェイスブックはこちら

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー