【便利】hrタグの基本からカスタマイズ方法までを詳しく解説

（最終更新日：2023年6月）

✔以下のような疑問を持つ方々に向けた記事となります

「HTMLのhrタグは何に使うのだろうか？」
「HTMLのhrタグの使い方を詳しく知りたい」
「HTMLでhrタグを用いた具体的な例を見てみたい」

✔この記事で解説する内容

HTMLのhrタグの基本的な理解
hrタグの使い方とその応用
hrタグを用いたHTMLの実例

本記事では、HTMLのhrタグの基本的な使い方から、さまざまなオプションを活用した応用例まで、具体的な事例を交えて詳しく解説します。

ぜひ最後までご覧ください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

HTMLとは？

こちらでは、HTMLとは何かについて説明します。

まずは基本をおさらいしたうえで、先へ進みましょう。

HTMLの概要
HTMLの基本的な構造
HTMLタグの役割と種類

HTMLの概要

HTML（HyperText Markup Language）は、ウェブページを作成するための言語で、その基本的な要素を定義します。

例えば以下のようなものを制御するのはHTMLの役割です。

テキストの見出し
段落
リンク
画像の配置

ウェブブラウザはHTMLを解釈して、ユーザーに表示するウェブページを作成します。

HTMLの基本的な構造

HTMLは、一連のタグで構成されます。

タグは一般的に開始タグと終了タグのペアで構成され、その間にコンテンツが入ります。

<p>：開始タグ例
</p>：終了タグ例

HTML文書は全体としてタグで囲まれ、その中に<head></head>と<body></body>の2つの主要部分があります。

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <!-- ここに<head>内の要素を記述します -->
</head>
<body>
  <!-- ここに<body>内の要素を記述します -->
</body>
</html>

HTMLタグの役割と種類

HTMLタグは、ウェブページの構造と内容を定義します。

<h1>から<h6>：見出し
<p>タグ：段落
<img>：画像の埋め込み
<hr>：区切り線

<!DOCTYPE html>
<html>
<head>
  <title>HTML Example</title>
</head>
<body>
  <h1>見出し1</h1>
  <p>ここに文章を記述します。</p>

  <hr>

  <h2>見出し2</h2>
  <p>別の文章を記述します。</p>
</body>
</html>

hrタグの基本

ここでは、hrタグの基本的な情報について説明します。

具体的には以下のトピックを取り上げます。

hrタグの定義
hrタグの用途
hrタグの基本的な使い方

hrタグの定義

hrタグは、HTMLで水平線を作成するためのタグ。

“hr”は”horizontal rule”の略で、ページ上で節やセクションを分けるための視覚的な区切り線を作成します。

例をご覧ください。

<p>区切り線の上</p>
<hr>
<p>区切り線の下</p>

以下のようになります。

hrタグの用途

hrタグは、コンテンツの異なる部分を分割するために使用されます。

記事の異なるトピック間
フッターセクションと本文

異なるページセクションの間にhrタグを使用することで、ページの構造がわかりやすくなります。

hrタグの基本的な使い方

基本的なhrタグの使用は非常にシンプルで、ページの任意の位置に<hr>と入力します。

このタグは空要素なので、終了タグは必要ありません。

hrタグの具体的な属性とその用法

ここでは、hrタグの具体的な属性とそれらの使い方について解説します。

指定できる属性への理解を深めれば、カスタマイズ時にはもちろん、トラブル回避にも役立ちます。

hrタグの各属性の意味
hrをCSSでカスタマイズする方法
width, size, align属性の具体的な使用方法
noshade属性とその効果

hrタグの各属性の意味

HTML5以前のHTMLでは、hrタグにはいくつかの属性がありました。

width：線の長さ
size：線の太さ
align：位置
noshade：色

しかし、これらの属性はHTML5で非推奨となり、現在ではCSSでこれらのスタイルを適用することが推奨されています。

hrをCSSでカスタマイズする方法

CSSを活用して、hrタグをカスタマイズするには以下のようにしましょう。

サンプルコードを活用して、ご自身の意向に合うhrタグにしてください。

hr {
    width: 80%; /* 線の長さを80%に指定 */
    height: 2px; /* 線の太さを2pxに指定 */
    margin: 20px auto; /* 水平方向に中央寄せし、上下に20pxのマージンを指定 */
    background-color: red; /* 線の色を赤色に指定 */
    border: none; /* 線の境界線を削除 */
}

width, size, align属性の具体的な使用方法

HTML4以前であれば、各属性も使えます。

以下がその設定例です。

<hr width="50%" size="2" align="center">

長さがページ幅の50%、厚さが2ピクセル、位置がページ中央の線が作成されます。

しかし、これらの属性は非推奨となっているため、現在ではCSSで同様のスタイルを適用してください。

hr {
  width: 50%; /* 幅を50%に指定 */
  height: 2px; /* 太さを2pxに指定 */
  margin: auto; /* 中央寄せに指定 */
}

noshade属性とその効果

noshade属性は、hrタグで作成される線が立体的な影（シェード）を持たないようにするためのものです。

つまり、この属性を使用すると、線はフラットなスタイルになります。

しかし、この属性もHTML5で非推奨となっており、現在ではCSSを使用して同様の効果を達成します。

/* シェードあり */
.hr-with-shadow {
  border: none; /* 境界線を削除 */
  height: 2px; /* 線の太さを指定 */
  background-color: gray; /* 線の色を指定 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); /* 影の設定 */
}
/* シェードなし */
.hr-without-shadow {
  border: none; /* 境界線を削除 */
  height: 2px; /* 線の太さを指定 */
  background-color: gray; /* 線の色を指定 */
}

hrタグの使用例

このセクションでは、hrタグの具体的な使用例を示します。

具体的には以下のトピックを取り上げます。

hrタグのデフォルトのスタイル
hrタグにスタイルを適用する方法
hrタグを用いた実践的なデモ

hrタグのデフォルトのスタイル

基本的なhrタグの使用は非常にシンプルで、以下のようになります。

<hr>

表示されるのは、ページ全幅の水平線です。

デフォルトのスタイルは、ページの色やスタイルに応じてブラウザによって描画されます。

hrタグにスタイルを適用する方法

CSSを使ってhrタグにスタイルを適用できます。

例えば、以下のように幅、高さ、色を設定することが可能です。

<style>
hr {
    width: 50%;
    height: 2px;
    background-color: #000000;
    border: none;
}
</style>

上記のスタイルを適用すると、hrタグで作成される線はページ幅の50%、高さが2ピクセル、色が黒になります。

hrタグを用いた実践的なデモ

hrタグは、特に記事やセクションの間に視覚的な区切りを挿入する場合に役立ちます。

例えば、以下のように使用することができます。

<h2>Section 1</h2>
<p>This is some text for section 1.</p>

<hr>

<h2>Section 2</h2>
<p>This is some text for section 2.</p>

上記のコードでは、hrタグにより2つのセクションが明確に区切られています。

hrタグの注意点とベストプラクティス

このセクションでは、hrタグを使用する際の注意点とベストプラクティスについて解説します。

具体的には以下のトピックを取り上げます。

hrタグの使用上の注意点
hrタグのベストプラクティス
hrタグのアクセシビリティについて

hrタグの使用上の注意点

hrタグの注意点をまとめると以下のとおり。

視覚的な区切りを作成するためのものであり、その使用はその目的に制限されるべき
HTML5で属性が非推奨
スタイルを適用する場合はCSSを使用する

hrタグのベストプラクティス

hrタグを使用する際のベストプラクティスとしては以下のようなものがあります。

hrタグはページの構造を強調するために使用し、不必要な使用は避ける
width、size、align、noshadeといった属性の代わりにCSSを使用する
必要に応じて、hrタグにスタイルを適用し、サイトのデザインに合わせる

hrタグのアクセシビリティについて

hrタグは視覚的な区切りを示すために使用されますが、スクリーンリーダーなどのアクセシビリティツールには、新たなセクションの開始を示すとして認識されます。

無駄な使用は避け、適切なセマンティックな構造を維持することが重要です。

hrタグを含むHTML要素の一覧

このセクションでは、hrタグを含む主要なHTML要素の一覧について解説します。

具体的には以下のトピックを取り上げます。

主要なHTML要素の一覧
hrタグと他のHTML要素との関係

主要なHTML要素の一覧

HTMLは、多くの異なる要素から構成されます。

hrタグはこれらの要素の1つであり、ページ内のセクション間に区切り線を描画します。

以下は、HTMLの一部の要素の一覧表です。

要素名	概要	サンプルコード
`h1` – `h6`	見出しを表す要素。	`<h1>見出し1</h1>` `<h2>見出し2</h2>`
`p`	段落を表す要素。	`<p>段落のテキスト</p>`
`div`	ブロックレベルのコンテナ要素。	`<div>コンテンツ</div>`
`a`	ハイパーリンクを作成する要素。	`<a href="https://example.com">リンク</a>`
`img`	画像を表示するための要素。	`<img src="image.jpg" alt="画像の説明">`
`hr`	区切り線を描画するための要素。	`<hr>`
`ul`	箇条書きリストを作成するための要素。	`<ul>` `<li>リスト1</li>` `<li>リスト2</li>` `</ul>`
`ol`	番号付きリストを作成するための要素。	`<ol>` `<li>リスト1</li>` `<li>リスト2</li>` `</ol>`
`table`	表を作成するための要素。	`<table>` `<tr>` `<td>セル1</td>` `<td>セル2</td>` `</tr>` `</table>`
`form`	フォームを作成するための要素。	`<form>` `<input type="text" name="name">` `<input type="submit" value="送信">` `</form>`
`input`	ユーザーの入力フィールドを作成するための要素。	`<input type="text" name="name">`
`button`	クリック可能なボタンを作成するための要素。	`<button>クリック</button>`
`span`	インライン要素をグループ化するための要素。	`<span>テキスト</span>`
`label`	入力フィールドのラベルを作成するための要素。	`<label for="name">名前:</label>` `<input type="text" id="name">`

hrタグと他のHTML要素との関係

hrタグは他のHTML要素と組み合わせて使用され、ページの構造を明確に示します。

例えば異なるセクションのヘッダー要素（h1-h6）の間にhrタグを挿入すれば、視覚的な区切りを作れます。

hrタグはブロックレベル要素なので、新しい行で表示されます。

hrタグの代替手段

このセクションでは、hrタグの代替手段としてCSSや他のHTML要素を使用した区切り線の作成方法について解説します。

具体的には以下のトピックを取り上げます。

CSSを用いた区切り線の作成方法
その他のHTML要素を用いた区切り線の作成方法

CSSを用いた区切り線の作成方法

hrタグの代わりにCSSを使用して区切り線を作成することも可能です。

例えば、borderプロパティを使用してdiv要素に線を追加することができます。以下に一例を示します。

<div style="border-bottom: 1px solid black;"></div>

この方法は、区切り線のスタイルにより詳細な制御を必要とする場合に特に役立ちます。

その他のHTML要素を用いた区切り線の作成方法

他のHTML要素を使用して、視覚的な区切りを作成することも可能です。

空のdiv要素を使用してスペースを作り出す
背景色を使用して区切りを作成する

<!DOCTYPE html>
<html>
<head>
  <style>
    .spacer {
      height: 20px; /* スペースの高さを指定 */
    }

    .separator {
      height: 2px; /* 区切り線の高さを指定 */
      background-color: black; /* 背景色を指定 */
    }
  </style>
</head>
<body>
  <h1>見出し1</h1>
  <p>ここに文章を記述します。</p>

  <div class="spacer"></div>

  <h2>見出し2</h2>
  <p>別の文章を記述します。</p>

  <div class="separator"></div>

  <h3>見出し3</h3>
  <p>さらに別の文章を記述します。</p>
</body>
</html>

ただし、これらの手段は視覚的な区切りを作成するものであり、hrタグのようにセマンティックな意味を持つものではない点を理解しておくことが重要です。