「Webページ内で内容が変わったときに横線で区切りたい」
「HTMLで横線を引く方法について知りたい」

上記のように考えている方もいるのではないでしょうか？

HTMLのhrタグを使うことでWebページ内に横線を追加できます。横線を引くことで内容を区切ったり、Webページのアクセントとしても活用できます。

今回WEBCAMP MEDIAでは、HTMLのhrタグで横線を引く方法について解説します。

以上の項目について解説します。

この記事を読むことで、hrタグを使って横線を引く方法について理解できるので、ぜひチェックしてみてくださいね！

HTMLのhrタグで横線を引く方法

hrタグは、Web上に横線を引くことができるHTMLタグです。

<hr>

上記のように閉じタグを使わず入力します。

また、hrタグはブロック要素なので、指定した場所に画面いっぱいの横線が表示されます。

hrタグを使うことで、コンテンツ同士の境目を作ったり、内容が変わるときの区切れとして活用できます。

hrタグで作った横線の太さや長さ変える方法

hrタグで作った横線は、heightプロパティで太さを指定し、widthプロパティで長さを指定できます。

たとえば、横線の太さを6pxで長さを300pxにするときは下記のように指定します。

hr{
    height: 6px;
    width: 300px;
}

また、style属性を使ってhrタグに直接指定することも可能です。

<hr style="height: 6px; width: 300px;">

ほかにも、background-colorプロパティを使って横線の色を変えることができます。

使い方はwidthやheightプロパティと同じように指定します。

hrタグの横線を点線にする方法

hrタグで作った横線を点線にするには、一度横線をborder:noneで非表示にして、hrタグの上部だけCSSで点線にして表示できます。

サンプルコードを使って詳しく解説します。

サンプルコード

<hr style="border:none;border-top:dashed 1px red;height:1px;width:300px;">

border-topプロパティを使って、1pxのdashedという点線状の線を表示しています。

borderプロパティに指定すると、横線の周りを囲うような点線が表示されるので、border-topで上部のみ点線表示して、ほかはborder:noneで非表示にしているのです。

まとめ

今回は、HTMLのhrタグで横線を作る方法について解説しましたが、いかがでしたでしょうか？

hrタグを使うことでブラウザ画面の横いっぱいに線を引くことができ、コンテンツを区切ったり内容を変更するための区切りとして活用できます。

また、太さはheightプロパティ、長さはwidthプロパティで調節できるのでぜひ試してみてくださいね！

＼プログラミングスクールを比較／