HTMLで水平線を引く方法:hrタグの基本と属性一覧
HTMLの<hr>タグは「horizontal rule(水平罫線)」とも呼ばれ、ページ上に水平線を引くために使用されるタグです。文章の話題が変わる区切りや、セクションとセクションの間に視覚的な分割を入れたい場合に活用できます。
hrタグで使われていた主な属性
<hr>タグでは、かつて以下の属性がサポートされていました。ただし、これらはすべて非推奨(Deprecated)となっており、現在はスタイルの指定にCSSを使うことが推奨されています。
| 属性 | 値 | 説明 |
| align | left right center |
非推奨 − 水平線の表示位置(左寄せ・右寄せ・中央揃え)を指定します。 |
| noshade | noshade | 非推奨 − 多くのブラウザで標準的に表示される影(立体感のある装飾)を解除します。 |
| size | ピクセル または % | 非推奨 − 水平線の高さ(太さ)を指定します。 |
| width | ピクセル または % | 非推奨 − 水平線の幅を指定します。 |
サンプルコード
次のコードを実行すると、HTMLで水平線を追加する基本的な動作を確認できます。
<!DOCTYPE html>
<html>
<head>
<title>HTML hr Tag</title>
</head>
<body>
<p>このテキストの後に水平線が表示されます</p>
<hr />
<p>もう1本の水平線</p>
<hr />
</body>
</html>
補足:現代のWeb制作ではCSSを使おう
HTML5では、上記のalign・size・width・noshade属性は廃止されています。線の色や太さ、幅、余白などを細かく調整したい場合は、CSSのborderプロパティやheight、background-colorなどを使用しましょう。また、<hr>タグは終了タグを持たない空要素のため、HTML5では<hr />のようにスラッシュを付けずに<hr>と記述しても問題ありません。
-
HTML Webページにオーディオプレーヤーを追加する方法
HTMLでのオーディオ再生の基本Webページに音声を埋め込むには、HTMLの<audio>要素を使用します。この要素にcontrols属性を追加すると、再生・一時停止・音量調整などができるオーディオプレーヤーがブラウザ上に表示されます。対応している音声フォーマットHTMLの<audio>要素でサポートされている主な音声フォーマットは以下の3つです。MP3(audio/mpeg)― 最も広く使われている形式で、ほぼすべてのブラウザで再生可能Wav(audio/wav)― 非圧縮の高音質形式だが、ファイルサイズが大きくなりがちOgg(audio/ogg)― オープンソースの
-
HTML DOMのinsertBefore()メソッドの使い方を徹底解説
insertBefore()メソッドとはHTML DOMのinsertBefore()メソッドは、すでに存在する子ノードの直前に、新しいノードを挿入するためのメソッドです。リストの先頭に項目を追加したい場合など、DOM操作で要素の挿入位置を細かく制御したいときに非常に便利です。構文insertBefore()メソッドの基本的な構文は以下の通りです。node.insertBefore(newNode, existingNode)パラメータこのメソッドには、以下の2つのパラメータを指定します。パラメータ説明newNode先頭に追加したい、新しく作成した子ノードですexistingNodeすでに存在