HTMLのhrタグで横線を引く方法！太さや長さを変える方法も解説

2024-04-10

HTMLのhrタグで横線を引く方法！太さや長さを変える方法も解説

太さを変える方法

hrタグの太さを変えるには、以下の2つの方法があります。

size属性に数値を指定することで、線の太さをピクセル単位で指定できます。

<hr size="10">

CSSを使う

CSSのborderプロパティを使って、線の太さをより細かく設定できます。

hr {
  border-top: 5px solid #ccc;
}

上記の場合、線の太さは5px、色はグレー (#ccc) になります。

長さを変える方法

<hr width="500">

hr {
  width: 50%;
}

上記の場合、線の長さは画面幅の50%になります。

色を変える方法

color属性に色名またはカラーコードを指定することで、線の色を変更できます。

<hr color="red">

hr {
  color: #00f;
}

hrタグには、align属性とnoshade属性という2つの属性があります。

align属性

align属性は、線の位置を左右に調整できます。

<hr align="left">

上記の場合、線は左端に表示されます。

noshade属性

noshade属性は、線の立体感を消去します。

<hr noshade>

上記の場合、線は立体感のないフラットな線になります。

hrタグは、ページ内に水平線を引くためのシンプルなタグです。CSSを使うことで、線の太さや長さ、色などを自由にデザインすることができます。

上記を参考に、hrタグを使ってページをレイアウトしてみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>hrタグのサンプル</title>
  <style>
    /* 太さ */
    hr.thick {
      border-top: 10px solid #000;
    }
    /* 長さ */
    hr.long {
      width: 80%;
    }
    /* 色 */
    hr.blue {
      color: #00f;
    }
    /* 位置 */
    hr.right {
      align: right;
    }
    /* 立体感 */
    hr.flat {
      noshade: "";
    }
  </style>
</head>
<body>
  <h1>hrタグのサンプル</h1>
  <hr>
  <h2>太さ</h2>
  <p>size属性</p>
  <hr size="5">
  <p>CSS</p>
  <hr class="thick">
  <h2>長さ</h2>
  <p>width属性</p>
  <hr width="300">
  <p>CSS</p>
  <hr class="long">
  <h2>色</h2>
  <p>color属性</p>
  <hr color="red">
  <p>CSS</p>
  <hr class="blue">
  <h2>位置</h2>
  <p>align属性</p>
  <hr align="left">
  <hr align="center">
  <hr class="right">
  <h2>立体感</h2>
  <p>noshade属性</p>
  <hr>
  <hr class="flat">
</body>
</html>

上記コードを保存してブラウザで開くと、様々なデザインの横線が表示されます。

hrタグの代わりに使える他の方法

画像を使う

水平線の画像を用意して、imgタグを使って挿入します。

<img src="images/hr.png" alt="水平線">

<div style="border-top: 1px solid #ccc;"></div>

SVGを使って、水平線のパスを描画します。

<svg viewBox="0 0 100 1">
  <line x1="0" y1="0.5" x2="100" y2="0.5" stroke="black" stroke-width="1" />
</svg>

それぞれの方法のメリットとデメリット

hrタグ

メリット：シンプルで使いやすい
デメリット：デザインの自由度が低い

画像

デメリット：画像ファイルの読み込み時間がかかる

CSS

デメリット：コード量が少し増える

SVG

デメリット：コード量が少し増え、ブラウザの対応状況によっては表示されない

シンプルな水平線を引くだけなら、hrタグを使うのがおすすめです。
デザインにこだわりたい場合は、画像やCSS、SVGを使うと良いでしょう。

hrタグ以外にも、水平線を引く方法はいくつかあります。それぞれの方法のメリットとデメリットを理解して、状況に応じて使い分けてください。

html css user-interface

HTMLのhrタグで横線を引く方法！太さや長さを変える方法も解説