<hr>タグとは

　hrタグとは

hrタグは、水平線を表示させるタグです‼️
この hrタグを使うことで、ホームページ上に横線を引くことができます。

　hrタグはなんの略？

hrタグは、「Horizontal Rule（ホリゾンタル・ルール）」の略です。 直訳すると、「水平のルール」です。
つまり、hrタグとは、区切り線として水平な線を引くことができるHTMLタグです✨

　hrタグの役割

hrタグの役割は、ページの内容を分けることです。
たとえば、記事のセクションを分けたり、長い文章の中で段落を区切ったりするときに使います。

　hrタグの書き方

hrタグを使うのは、とても簡単です。
次のように書くだけで、ページに水平線を引くことができます‼️

See the Pen Untitled by 加藤美羽 (@tdhmtqyr-the-bold) on CodePen.

このように、hrタグはとてもシンプルで、閉じタグも必要ありません🙅🏻‍♀️

　CSSを使ったhrタグのカスタマイズ方法

hrタグのデフォルトではシンプルな水平線ですが、CSSを使って見た目を変えることができます✨
CSSを使ったhrタグのカスタマイズ方法をいくつかご紹介します。

　色を変更する

水平線の色を変えるにはCSSを使います。
以下のコードを使うと、水平線の色を青に変えることができます。
<hr style=”border-color: blue;”>

　太さを変更する

水平線の太さを変えることもできます。
次の例では、hrタグの太さを2ピクセルに設定しています。
<hr style=”border-width: 2px;”>

　最後に

このように、<hr>は使い方によってはとても便利なもので、普段使用しているCSSとはぼ同じように打てばカスタムもできます‼️
線は意外と使用するものだと思うのでぜひ皆さんも参考にしてみてください🙌🏻