HTML水平線：<hr>タグでウェブページのコンテンツを優雅に分割する

html リスト横並び

この記事では、HTMLで水平分割線を追加するために使用される<hr>タグについて、その使用方法、属性、スタイル設定、例などを詳しく説明します。

1. `<hr>`タグ：水平線を定義する

<hr>タグは、HTMLにおいて、コンテンツ（例えば、主題、段落、引用されたコンテンツなど）を視覚的に分離するために水平線を作成するために使用されます。

<hr>タグは、以下のグローバル属性をサポートしています。

属性	説明
`accesskey`	要素へのショートカットキーを設定します。
`class`	要素のクラス名を設定します。
`contenteditable`	要素が編集可能かどうかを指定します。
`contextmenu`	要素のコンテキストメニューとして使用する<menu>要素のIDを指定します。
`dir`	要素内のテキストの方向を指定します。
`draggable`	要素がドラッグ可能かどうかを指定します。
`dropzone`	ドラッグアンドドロップ操作中に要素が受け入れるデータのタイプを指定します。
`hidden`	要素を非表示にするかどうかを指定します。
`id`	要素に一意のIDを設定します。
`lang`	要素の言語を指定します。
`spellcheck`	要素の内容のスペルチェックを行うかどうかを指定します。
`style`	要素にインラインスタイルを適用します。
`tabindex`	要素のタブオーダーを指定します。
`title`	要素のタイトルを設定します。
`translate`	要素の内容を翻訳するかどうかを指定します。

CSSプロパティを使用して、<hr>タグのスタイル（線の太さ、色、幅、配置など）を制御することができます。

例：


hr {
  border: 0;
  height: 2px;
  background-image: linear-gradient(to right, #ccc, #333, #ccc);
}

異なるテーマや段落のコンテンツを分割する：長い記事やページでは、<hr>タグを使用して異なるコンテンツブロックを分割し、コンテンツの可読性を向上させることができます。
引用されたコンテンツを区別する：外部コンテンツを引用する際に、<hr>タグを使用して原文コンテンツと区別することができます。
視覚効果を高める：<hr>タグは、ウェブページに視覚的な階層を追加し、より美しくすることができます。

<hr>タグは、シンプルで実用的なHTMLタグであり、ウェブページのコンテンツを簡単に分割し、ウェブページの視覚効果を高めるのに役立ちます。