Skip to main content

HTML HRタグとはどのようなものですか?

FLASH動画の挿入 / ホームページビルダー15動画解説 (六月 2026)

FLASH動画の挿入 / ホームページビルダー15動画解説 (六月 2026)
Anonim

HRタグは、Web文書でページ全体に水平線を表示するために使用されます。また、水平の規則と呼ばれることもあります。いくつかのタグとは異なり、このタグは終了タグを必要としないので、入力するだけです 行を挿入します。

この行は、ページの全幅に渡って配置され、行の太さ、位置、色を表すデフォルトの属性を持ちますが、必要に応じてこれらの設定を変更できます。

ページのCSSを編集することで、HTML5ドキュメントの水平線の特性を編集できます。 HTML4の水平線は、文書のHTML側で変更されました。

HRタグは意味論的ですか?

HTML4では、HRタグはセマンティックではありませんでした。意味要素は、ブラウザと開発者が容易に理解できるという意味でその意味を記述する。 HRタグは、ドキュメントに単純な行を追加する単なる方法でした。行を表示したい要素の上端または下端の境界線のみをスタイリングすると、要素の上部または下部に水平線が配置されますが、一般的に、HRタグはこの目的のために使いやすくなりました。

HTML5からは、HRタグが意味を持つようになりました。これで、段落レベルのテーマブレークが定義されました。これは、新しいページや他のより強い区切り文字を保証しないコンテンツの流れの中断です。たとえば、ストーリー内でシーンが変更された後にHRタグが見つかるか、リファレンスドキュメントのトピックが変更されたことを示すことができます。

HTML4とHTML5のHR属性

HTML4では、HRタグに次のような単純な属性を割り当てることができます。 整列、幅、 そして ノシード 。アライメントは次のように設定できます。 左 , センター , 右 または 正当化する 。幅は、水平線の幅をページ全体の線を延長するデフォルトの100%から調整します。ザ ノシード 属性は影付きの色ではなく単色の線を描画します。

これらの属性はHTML5では時代遅れです。 HTML5ドキュメントでHRタグのスタイルを設定するには、代わりにCSSを使用する必要があります。

これは、インラインCSS(HTMLと共にドキュメントに直接挿入されるスタイル)を使用して水平線を10ピクセル高くなるようにスタイル設定するHTML5の例です。


HTML5で水平線をスタイル設定するもう1つの方法は、別個のCSSファイルを使用してHTML文書からリンクする方法です。 CSSファイルでは、次のようなスタイルを記述します。

hr {高さ:10px}

HTML4と同じ効果を得るには、HTMLコンテンツに属性を追加する必要があります。水平線のサイズを変更する方法は次のとおりです。 サイズ 属性:


CSSとHTMLの間の水平線のスタイリングには、もっと自由度があります。

のみ 幅 そして 高さ スタイルはすべてのブラウザで一貫しているため、他のスタイルを使用する場合は試行錯誤が必要な場合があります。デフォルトの幅は、常にWebページまたは親要素の幅の100%です。ルールのデフォルトの高さは2ピクセルです。