HTMLのhrタグで横線を引く方法！太さや長さを変える方法も解説
「Webページ内で内容が変わったときに横線で区切りたい」
「HTMLで横線を引く方法について知りたい」
上記のように考えている方もいるのではないでしょうか？
HTMLのhrタグを使うことでWebページ内に横線を追加できます。横線を引くことで内容を区切ったり、Webページのアクセントとしても活用できます。
今回WEBCAMP MEDIAでは、HTMLのhrタグで横線を引く方法について解説します。
- 横線を引くには
- 太さや長さを変えるには
- 点線を表示するには
以上の項目について解説します。
この記事を読むことで、hrタグを使って横線を引く方法について理解できるので、ぜひチェックしてみてくださいね！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
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プロパティで調節できるのでぜひ試してみてくださいね！
