hr要素とは？意味をわかりやすく簡単に解説

text: XEXEQ編集部

hr要素とは

hr要素はHTML(HyperText Markup Language)において水平線を挿入するために使用される要素です。hr要素を使用することで、文章中に区切り線を引くことができ、内容の区分けを視覚的に分かりやすく表現できます。

hr要素は空要素(empty element)の一つであり、開始タグのみを記述し、終了タグは必要ありません。つまり、<hr>と記述するだけで、水平線が挿入されるのです。

hr要素は主に文章の題目と本文の間、または段落と段落の間などに使用されます。hr要素を適切に使用することで、文章の構成を明確にし、読み手にとって理解しやすい文章となります。

また、hr要素にはデフォルトのスタイルが適用されていますが、CSSを使用することでデザインを自由にカスタマイズすることも可能です。例えば、水平線の太さや色、上下の余白などを調整できます。

hr要素はHTML4.01ではpresentational要素として定義されていましたが、HTML5ではsemantic要素として再定義されました。これにより、hr要素の使用目的が明確になり、アクセシビリティの向上にも寄与しています。

hr要素の使い方とサンプルコード

hr要素の使い方に関して、以下3つを簡単に解説していきます。

hr要素の基本的な記述方法
hr要素をCSSでスタイリングする方法
hr要素を用いた実践的なコード例

hr要素の基本的な記述方法

hr要素は単独で使用する空要素です。したがって、開始タグのみを記述し、終了タグは不要となります。以下はhr要素の基本的な記述方法を示したコード例です。

ここは段落1です。
<hr>
ここは段落2です。

上記のコードでは二つの段落の間にhr要素を挿入しています。これにより、段落1と段落2の間に水平線が引かれ、内容が区切られます。hr要素を使用するだけで、簡単に区切り線を挿入できるのです。

hr要素をCSSでスタイリングする方法

hr要素はデフォルトのスタイルが適用されていますが、CSSを使用することで、その見た目を自由にカスタマイズできます。以下はhr要素のスタイルをCSSで変更する例です。

hr {
  border: none;
  border-top: 3px solid #ccc;
  margin: 20px 0;
}

上記のCSSコードではhr要素のデフォルトのボーダーを削除し、上部にのみ3pxの灰色の実線を適用しています。また、上下に20pxのマージンを設定し、他の要素との間隔を調整しています。このように、CSSを使うことで、hr要素の見た目を自由に変更できます。

hr要素を用いた実践的なコード例

次に、hr要素を実際のウェブページで使用する際の具体的なコード例を紹介します。以下は記事の見出しと本文の間にhr要素を挿入し、区切りを付ける例です。

記事のタイトル
<hr>
記事の本文はここから始まります。
記事の本文が続きます。

このコード例では

要素で記事のタイトルを表示し、その直後にhr要素を挿入することで、タイトルと本文の間に区切り線を引いています。このように、hr要素を適切な位置に配置することで、文章の構成を明確にし、読みやすさを向上させることができるでしょう。

hr要素とアクセシビリティについて

hr要素とアクセシビリティに関して、以下3つを簡単に解説していきます。

hr要素がアクセシビリティに与える影響
hr要素に関する、WAI-ARIAの役割と属性
hr要素を使用する際のベストプラクティス

hr要素がアクセシビリティに与える影響

hr要素は視覚的に区切りを付けるための要素ですが、アクセシビリティの観点からも重要な役割を果たします。スクリーンリーダーなどの支援技術を使用している場合、hr要素は区切りを示すランドマークとして認識されます。

つまり、hr要素を適切に使用することで、視覚障害者などの利用者に対しても、文章の構成を伝えることができるのです。ただし、hr要素を過剰に使用すると、かえって理解の妨げになる可能性があるため、適切な使用が求められます。

hr要素に関する、WAI-ARIAの役割と属性

WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications)はウェブアクセシビリティを向上させるための仕様です。hr要素に対してはWAI-ARIAの役割(role)や属性(attribute)を指定することができます。

例えば、role="separator"を指定することで、hr要素が区切りとしての役割を持つことを明示できます。また、aria-label属性を使用して、区切りの目的や内容を説明することも可能です。これらの属性を適切に使用することで、アクセシビリティの向上に寄与できるでしょう。

hr要素を使用する際のベストプラクティス

hr要素を使用する際は以下のようなベストプラクティスを意識することが大切です。まず、hr要素は文章の構成を明確にするために使用し、装飾的な目的では使用しないようにしましょう。

また、hr要素を連続して使用するのは避け、適切な間隔を保つことが重要です。さらに、hr要素にはWAI-ARIAの属性を指定し、アクセシビリティに配慮することが推奨されます。これらのベストプラクティスを意識することで、hr要素を効果的かつ適切に使用できるでしょう。

hr要素に関するTips・便利な使い方

hr要素に関するTips・便利な使い方について、以下3つを簡単に解説していきます。

hr要素とCSSを組み合わせた装飾的な区切り線の作成方法
hr要素を使ったナビゲーションの区切り
hr要素とJavaScriptを組み合わせたインタラクティブな効果

hr要素とCSSを組み合わせた装飾的な区切り線の作成方法

hr要素はデフォルトでは単純な水平線を表示しますが、CSSを使用することで、より装飾的な区切り線を作成できます。例えば、グラデーションを用いたり、アイコンを組み合わせたりすることで、ユニークで視覚的に魅力的な区切り線を実現できるでしょう。

以下はCSSを使用してhr要素に装飾を施す例です。

hr {
  border: none;
  height: 20px;
  background: linear-gradient(to right, #f0f0f0, #ccc, #f0f0f0);
  position: relative;
}

hr::before {
  content: "◆";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  color: #ccc;
  font-size: 20px;
}

hr要素とJavaScriptを組み合わせたインタラクティブな効果

hr要素とJavaScriptを組み合わせることで、インタラクティブな効果を実現できます。例えば、hr要素をクリックすることで、関連するコンテンツを表示・非表示にするアコーディオンメニューなどを作成できるでしょう。

以下はJavaScriptを使ってhr要素にクリックイベントを追加し、関連するコンテンツの表示・非表示を切り替える例です。

const hrs = document.querySelectorAll('hr');
const contents = document.querySelectorAll('.content');

hrs.forEach((hr, index) => {
  hr.addEventListener('click', () => {
    contents[index].classList.toggle('active');
  });
});

このように、hr要素とJavaScriptを組み合わせることで、よりインタラクティブで魅力的なウェブページを作成できます。hr要素の可能性は多岐に渡るため、創意工夫次第で様々な効果を生み出せるでしょう。

※上記コンテンツはAIで確認しておりますが、間違い等ある場合はコメントよりご連絡いただけますと幸いです。