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

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

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

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

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

hrタグとは

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

実行結果

このように、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タグの使い方について解説していきます。

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

実行結果

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

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

実行結果

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

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

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

実行結果

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

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

まとめ

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

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

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

ryo

おすすめコンテンツ

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

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