横線の引き方
2 つの内容のまとまりの間に <hr> を置きます。終了タグはありません。
初期状態では、線はコンテナの横幅いっぱいに伸び、上下に少し margin があり、細いグレーの inset の枠線 (明るい縁と暗い縁) で描かれます。
<hr> は horizontal rule の略です。HTML では話題の区切り、つまりセクションの中での話題や場面の転換を意味します。スクリーンリーダーは区切りとして読み上げます。見出しの下やカードの周りなど、装飾のための線がほしいだけなら、その要素の CSS の枠線で描きましょう。
CSS で hr にスタイルを付ける
初期の見た目は枠線で作られているので、<hr> にスタイルを付ける確実な方法は、枠線を消して自分で 1 本引くことです。
| 変えたいもの | 使うもの |
|---|---|
| 色 | border-top: 2px solid #2563eb (border: none の後に) |
| 太さ | その枠線の幅 (6px など) |
| 線の種類 | solid、dashed、dotted、double |
| 長さ | width: 40% (中央に置くには margin-inline: auto も) |
| 端を丸くする | 枠線の代わりに height + background + border-radius |
| 周りの余白 | margin |
hr に color: blue だけを指定しても、現在のブラウザでは線の色が変わりますが、初期の inset スタイルで陰影が付き、高さも 2px のままです。枠線をリセットすれば、指定したとおりの線になります。
hr の古い属性
古いコードでは、タグ自体に属性を付けています。
<hr size="4" width="50%" color="red" noshade align="left">
size、width、color、noshade、align は廃止されています。古いページが正しく表示されるようにブラウザは今も適用しますが、無効な HTML で、後から変更するのも大変です。上の CSS に置き換えましょう。
中央に文字の入った区切り線
2 つのログインボタンの間にある「または」の線は <hr> ではありません (hr には文字を入れられません)。flex の行で、単語の両側に線を引いています。
::before と ::after の 2 つの部分が、それぞれ flex: 1 で空きスペースの半分を占め、上の枠線を引きます。or を長い単語に変えると、線が縮んで収まります。
縦線
<hr> の縦線版はありません。縦線は要素の片側の枠線か、flex の行の中の細い要素で描きます。
border-inline-start はテキストの始まり側に線を引きます。英語では左、アラビア語やヘブライ語では右になるので、どちらの方向でもレイアウトが崩れません。
よくある間違い
</hr>と書く。<hr>は空要素です。<hr>か<hr />だけで十分です。- 装飾のために
<hr>を使う。 スクリーンリーダーは 1 本ずつ読み上げます。見た目だけの線は CSS で描きましょう。 colorだけでスタイルを付ける。border: noneで枠線をリセットし、border-topを指定しましょう。<br>やアンダースコアで線を描く。<hr>か枠線を使いましょう。<br>の用途は 改行 のページを参照してください。- 廃止された属性を使う。
size、width、color、noshadeは CSS に移しましょう。
よくある質問
HTML で横線を引くには？
<hr> タグを単独で書きます。終了タグのない空要素で、コンテナの横幅いっぱいに線を引きます。
hr の色を変えるには？
初期の枠線を消して、自分で線を引きます: hr { border: none; border-top: 2px solid #2563eb; }。color だけを指定しても色は変わりますが、初期の inset スタイルのせいで陰影のある 2 色の線のままになります。
hr を太くするには？
枠線の幅を指定します: hr { border: none; border-top: 4px solid #111827; }。古いチュートリアルにある size 属性はブラウザでは今も動きますが廃止されているので、CSS を使いましょう。
hr は何の略ですか？
Horizontal rule (水平線) の略です。現在の HTML では、段落の間の話題や場面の転換を表す区切りを意味します。スクリーンリーダーは区切りとして読み上げます。
HTML で縦線を引くには？
HTML に縦線のタグはありません。border-inline-start: 2px solid #e5e7eb のように要素の片側に枠線を付けるか、flex の行の中に背景色を付けた細い要素を置きます。
