（最終更新日：2023年6月）
✔以下のような疑問を持つ方々に向けた記事となります
「HTMLのhrタグは何に使うのだろうか？」
「HTMLのhrタグの使い方を詳しく知りたい」
「HTMLでhrタグを用いた具体的な例を見てみたい」
✔この記事で解説する内容
- HTMLのhrタグの基本的な理解
- hrタグの使い方とその応用
- hrタグを用いたHTMLの実例
本記事では、HTMLのhrタグの基本的な使い方から、さまざまなオプションを活用した応用例まで、具体的な事例を交えて詳しく解説します。
ぜひ最後までご覧ください。
筆者プロフィール
【現職】プロダクトマネージャー
【副業】ブログ（月間17万PV）/YouTube/Web・アプリ制作
「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。
【当ブログで紹介しているサイト】
✔人に見せても恥ずかしくないコードを書こう
「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。
- 見るからにきれいなコードの書き方
- コードの分割方法
- 変数や関数の命名規則
エンジニアのスタンダートとすべき基準を一から解説しています。
何回も読むのに値する本なので、ぜひ手にとって読んでみてください。
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タグのようにセマンティックな意味を持つものではない点を理解しておくことが重要です。
hrタグのブラウザー互換性
このセクションでは、主要なブラウザーでのhrタグの振る舞いと、ブラウザー互換性を考慮したhrタグの使用について解説します。
具体的には以下のトピックを取り上げます。
- 主要ブラウザーでのhrタグの振る舞い
- ブラウザー互換性を考慮したhrタグの使用
主要ブラウザーでのhrタグの振る舞い
ほとんどの現代のブラウザーはhrタグをサポートしており、デフォルトでページ全幅の水平線を描画します。
しかし、ブラウザーによっては、hrタグのデフォルトのスタイルが異なることがあります。
そのため、一貫したスタイルを保つには、CSSを使用してhrタグをスタイルすることがおすすめです。
ブラウザー互換性を考慮したhrタグの使用
全てのブラウザーで一貫性を持つhrタグの表示を確保するために、CSSを使用してスタイルを設定しましょう。
古いブラウザーや一部の特定のブラウザーでは、hrタグの特性に対するサポートが不完全な場合があるからです。
ただしどのブラウザーでも、基本的な区切り線としての機能は広範囲にサポートされているでしょう。
まとめ
当記事では、HTMLのhrタグについて詳しく見てきました。
- hrタグの基本的な使い方
- その属性と使用例
- ブラウザー間の互換性
hrタグはWebページのセクションを区切るためのシンプルで便利なツールであり、適切に使用することでサイトの読みやすさとアクセシビリティを向上させることができます。
さらに深くHTMLを学ぶには、他のHTML要素やCSS、JavaScriptなどのWeb技術について学ぶことをおすすめします。
Web上には無料で利用できる教材が数多くあり、自分のペースで学ぶことが可能です。
また、プロジェクトを作成することで、学んだ知識を実際の問題解決に活用することができます。
前向きに挑戦し、新たなスキルを磨いていきましょう。