VIDEO LESSON

HTMLのhrタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:31動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04エイチティーエムエルタグ編の六十六本目は、エイチアール、タグです。
0:08このタグは、文章の話題が切り替わることを表す、区切りの要素です。
0:13ブラウザーでは横線として表示されるので、見た目はただの線に見えますが、大切なのは線そのものではなく、
0:18ここで話が変わるという意味の方です。
0:23物語で場面が変わるときや、説明のテーマが切り替わるときに使います。
0:28今回は、意味に合った使い方と、見た目だけの線との違いを、初心者の方にも分かるように順番に解説します。
0:35線の向こう側で話が変わる感覚を、まずは掴んでください。
0:39基本の書き方を確認します。
0:41エイチアールは、書き方がとてもシンプルで、開始タグだけを書きます。
0:46終了タグはなく、中に文章を入れることもありません。
0:49このように、中身を持たない要素を空要素と呼びます。
0:53段落と段落の間に一行置くだけで、話題の区切りが完成します。
0:57スラッシュを付けた書き方を見かけることもありますが、現在のエイチティーエムエルでは、
1:01エイチアールとだけ書くのが標準です。
1:05まずはこの形を覚えましょう。
1:07閉じタグを探して悩む必要がないのも、初心者にとって嬉しいポイントです。
1:12この一行だけで区切りが伝わる点が、このタグの分かりやすさです。
1:16エイチアールの意味を、もう少し詳しく見てみましょう。
1:21仕様では、段落レベルでの話題の転換を表すとされています。
1:26たとえば、物語の中で場面が切り替わったり、説明のテーマが前半と後半で変わったりする場面です。
1:33画面の例では、一日目の話から二日目の話へ移る間に置いています。
1:39一方で、章全体を大きく分ける場合は、セクションや見出しで構造を作る方が適しています。
1:46エイチアールは、その中でも比較的小さな、文章の流れの中の区切りに使うものだとイメージしてください。
1:54意味を意識すると、置く場所に迷わなくなります。
1:58小説やブログの場面転換を思い浮かべると、使い方のイメージがつかみやすくなります。
2:05使う場面と、使わない場面を整理します。
2:08使ってよいのは、話題や場面、テーマが本当に切り替わるときです。
2:13反対に、カードの枠線を引きたい、デザインとして線が欲しい、余白の代わりに線を入れたい、
2:19といった見た目だけが目的の場合は、エイチアールは適しません。
2:25そうした装飾の線は、シーエスエスのボーダーで表現するのが正解です。
2:30迷ったときは、線を消しても意味の区切りが必要かどうかを考えてください。
2:36意味が必要ならエイチアール、見た目だけならシーエスエス、という分け方が判断の軸になります。
2:43この判断が身に付くと、文書の意味が格段に伝わりやすくなります。
2:48属性について確認します。
2:50エイチアールには、この要素専用の必須属性はありません。
2:54必要に応じて、どの要素にも使える共通のグローバル属性を使います。
2:58たとえば、クラスはシーエスエスで見た目を整えるときの目印に、アイディーは文書の中で一つだけの識別子として使えます。
3:06昔のエイチティーエムエルでは、アラインやサイズといった見た目用の属性もありましたが、
3:10現在は廃止されており、使ってはいけません。
3:14線の太さや色を変えたいときは、属性ではなくシーエスエスで指定するのが現代のルールです。
3:20クラス名は内容が分かる名前にすると、あとからの修正も楽になります。
3:25記事の活用事例を読み解きます。
3:27例では、まず段落で、前半はエイチティーエムエルを学ぶと書きます。
3:30次にエイチアールを一行置いて、続く段落で、ここから後半のシーエスエスの話題だと続けます。
3:36たったこれだけですが、読み手にも、プログラムにも、ここで話題が変わることが伝わります。
3:41実際に試すときは、練習用のファイルにこのコードを貼り、ブラウザーで再読み込みして横線が表示されることを確認してください。
3:48さらに開発者ツールのエレメンツで、段落と段落の間にエイチアールが正しく入っているかを見ると、
3:51構造の理解が深まります。
3:55短い例ですが、区切りの意味がはっきり伝わる良い見本になっています。
3:59表示される横線の見た目は、シーエスエスで自由に整えられます。
4:04画面の例では、クラスを指定したエイチアールに対して、標準の枠線を一度消し、
4:11上側だけに青い二ピクセルの線を引き直し、前後に余白を付けています。
4:17点線にしたり、幅を短くして中央に寄せたりといったアレンジも、すべてシーエスエスで行います。
4:26ここで大切なのは役割分担です。
4:29話題の転換という意味はエイチアールが持ち、色や太さといった見た目はシーエスエスが持つ。
4:37この分担を守ると、あとからデザインだけを変更することも簡単になります。
4:43線を目立たせすぎず、文章の流れを邪魔しない調整がコツです。
4:49よくある間違いを三つ紹介します。
4:52一つ目は、見た目だけの罫線として使ってしまうことです。
4:57カードの区切り線などはボーダーで表現しましょう。
5:01二つ目は、終了タグを書いてしまうことです。
5:05エイチアールは空要素なので、閉じタグは不要です。
5:09三つ目は、余白や装飾の代わりに何本も並べることです。
5:14話題が何度も切り替わっているという、誤った意味になってしまいます。
5:20いずれもブラウザーでは線が表示されてしまうため、見た目では間違いに気付きにくい点が落とし穴です。
5:29置く前に、意味の区切りかどうかを一度立ち止まって確認しましょう。
5:34チェックリストとして覚えておくと、公開前の見直しに役立ちます。
5:40アクセシビリティの視点も押さえておきましょう。
5:43エイチアールは、画面読み上げなどの支援技術では、セパレーター、つまり区切りとして扱われます。
5:50そのため、本当に話題が切り替わる場所に使えば、目で見ていない利用者にも、
5:53話の区切りが正しく伝わります。
5:57逆に、装飾目的でたくさん置くと、読み上げのたびに不要な区切りが挟まり、内容が分かりにくくなります。
6:03装飾の線をシーエスエスで表現すれば、読み上げには現れません。
6:07誰にとっても伝わるページにするためにも、意味で使い分けることが大切です。
6:12見た目の線一本にも、意味があるかどうかで大きな違いが生まれます。
6:17ブラウザー互換性を確認します。
6:19記事が参照するエムディーエヌのデータでは、エイチアール要素は、クロームが一以降、
6:25エッジが十二以降、ファイアフォックスが一以降、サファリが三以降と、主要ブラウザーのごく初期から対応しています。
6:32そのため、表示できないブラウザーを心配する必要はまずありません。
6:37仕上げには、話題の転換という目的に合っているかを意味から見直し、三百二十ピクセル程度の狭い画面や文字拡大でも、
6:42線や前後の文章が欠けていないかを確認しましょう。
6:48モバイルの実機でも一度表示を確かめると安心です。
6:51対応状況に不安がない分、意味の正しさに集中できるタグと言えます。
6:56最後にまとめです。
6:57エイチアールのポイントは三つでした。
6:59一つ目、エイチアールは話題の転換を表す空要素で、終了タグはなく、段落と段落の間に一行だけ置くこと。
7:05二つ目、見た目だけの罫線や装飾には使わず、そうした線はシーエスエスのボーダーで表現すること。
7:11三つ目、線の色や太さや余白を変えたいときも属性ではなくシーエスエスで指定し、
7:15意味と見た目を分担させることです。
7:18練習として、長い文章のファイルを開き、本当に話題が切り替わる場所を一つ見つけて、
7:22エイチアールを置いてみてください。
7:25お疲れさまでした。
7:26意味のある区切りを一つ置けるようになれば、このタグは卒業です。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

hrタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。話題の転換を表します。見た目だけの罫線ならCSSの border を検討します。

解説記事・サンプルコードを読む：HTMLのhrタグとは？属性・使い方・ブラウザー互換性と活用例 →