今回はHTMLで使われるhrタグについて解説をしていきます！
hrタグでは罫線を引くことが出来ます。ただこのhrタグはCSSのborderとどちらを使えばよいのか、迷ってしまう人も多いです。この記事では、
- hrタグとは
- CSSのborderプロパティとの違い
- hrタグの使い方、CSSでスタイルを変える方法
について解説をしていきます。やさしいサンプルコードで解説していくのでぜひご覧ください！
ご存知ですか？
いまITエンジニアの需要は拡大しています。
エンジニアとしての経験があれば希望条件での転職や副業も難しくありません。
転職や副業、フリーランス独立を検討されていなくても、エージェントに登録しているだけで、思わぬ企業からの紹介を受けられる可能性があります。そこでエンジニアなら登録しておくべきエージェントをご紹介します。
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プロパティについて、詳しくはこちらの記事をご覧ください。
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タグを使っていきましょう。
