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タグを使っていきましょう。

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ryo

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説