<hr>タグの解説
<hr>は、段落に区切りを与えて水平線（罫線）を引く時に使用します。この要素は、かつて画面に横幅一杯の線を引くためだけに使用されていましたが、現在は意味論的に一区切りつけたい箇所に適用します。
文章には見出しと段落があり、取り扱う項目に応じて章や節を分けます。<hr>の配置に適しているのは、段落と段落の間です。章や節を見た目で区別したい場合は、それぞれの要素をCSS（スタイルシート）で装飾して下さい。
<hr>は、あくまで閑話休題を表すものであり、視覚的な効果は二次的なものです。これ自体でひとつの完結した要素になるため、終了タグを記述する必要はありません。また、ブロックレベル領域を確保して横いっぱいに広がるので、自動的に改行を行います。
初期値では、影の付いた立体的な線で表示されます。属性を与える事で、ある程度自由な見た目に設定出来ますが、現在はCSSによる装飾を推奨します。
HTML4までは、水平線が描画されるという見た目だけの定義でしたが、HTML5のアップデートで話題やテーマの区切りを示す要素としての位置づけに変更されました。同じページの中で複数の話題を扱う場合には、<article>や<section>を分けるなどして、より正しい文章構造を意識しましょう。
<hr>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- この要素は空要素です。開始タグのあとに終了タグを記述する必要はありません。
- この要素は文章のアウトラインに影響を与えませんが、段落に一区切りをつける意味論的な役目があります。
<hr>要素に指定できる属性
color（非推奨）- 線の色を指定出来ます。CSSを採用して下さい。
width（非推奨）- 線の幅をpxや％で指定します。CSSを採用して下さい。
size（非推奨）- 線の太さをpxや％で指定ます。CSSを採用して下さい。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<hr>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。特にスタイルシートを何も指定しない場合、使用しているブラウザの既定値で表示されます。
<hr>
この要素を設置する箇所は段落と段落のあいだです。文章の流れが一区切りつくタイミングが適切と言えます。文章の流れが続いている箇所には設置しないようにしましょう。
<p>同じセクションに属する段落。</p>
<hr>
<p>同じセクションに属する段落。</p>
セクションを越えるような場所で区切り線を引きたい場合は、CSSを活用しましょう。以下の例は意味論的に適切ではありません。
<section>
<h2>セクションの見出し</h2>
<p>セクションの内容。セクションの内容。</p>
<p>セクションの内容。セクションの内容。</p>
</section>
<hr>
<section>
<h2>セクションの見出し</h2>
<p>セクションの内容。セクションの内容。</p>
<p>セクションの内容。セクションの内容。</p>
</section>
<hr>の罫線はどのように引かれているのか
<hr>の見た目の初期値は灰色の水平線です。多くの場合、そこに数ピクセルの縦幅と窪みが与えられています。CSSを使うと、この見た目を自由にカスタマイズできます。まずは、この要素がどのような仕組みで描画されているのかを確認してみましょう。
<hr>に高さを加えると、空白のボックスが広がり、辺が内側に影を落としている状態に見えます。これは既定値にborder-style: inset;が設定されているためです。では、線のタイプをsolidにして色を変えると、どうなるでしょうか。
<div class="sample-block">
<p>height=10px / border=blue</p>
<hr class="hr1">
<p>height=20px / border=green</p>
<hr class="hr2">
<p>height=30px / border=red</p>
<hr class="hr3">
</div>
.sample-block p {
margin: 0;
font-size: small;
}
.sample-block .hr1 {
block-size: 10px;
border: 1px solid blue;
}
.sample-block .hr2 {
block-size: 20px;
border: 1px solid green;
}
.sample-block .hr3 {
block-size: 30px;
border: 1px solid red;
}
上記の結果を見ると<hr>は透明な中身のない箱であることが分かります。そこに既定値で内側に影が落ちる線が設定されているため、凹んだ横棒に見えるのです。つまり、これは<div>の中にコンテンツを何も配置せずに、そのまま閉じた状態のものと同じ感覚で装飾できることを意味します。そのため、先程のサンプルに背景色を足すと、以下のように枠線の中身が塗りつぶされます。
<hr>の装飾を変えてみる
ここまでの解説を踏まえて、CSSで<hr>の色々な装飾パターンを作成してみましょう。以下の例は、段落の区切りを点線に変えて幅を調節したものになります。
<div class="sample-block">
<p>段落の内容です。文章の内容が書かれています。段落の内容です。文章の内容が書かれています。段落の内容です。文章の内容が書かれています。</p>
<hr>
<p>段落の内容です。文章の内容が書かれています。段落の内容です。文章の内容が書かれています。段落の内容です。文章の内容が書かれています。</p>
</div>
.sample-block hr {
inline-size: 80%;
margin: 1.5rem auto;
border: none;
border-block-start: 1px dotted #666;
}
borderを一旦リセットしているのは、既定値でブロックの四辺に枠線が引かれているからです。次の行で改めて一箇所にのみ点線を表示するように上書きしています。サイト全体で装飾された<hr>を使う場合は、共通のCSSで<hr>の枠線を消してしまっても良いでしょう。
続いて、小説の閑話休題に見られる〝約モノ〟と呼ばれる記号を使った表現に変えてみましょう。以下の例を見て下さい。このような装飾に変えたとしても、文章の構造自体は全く変わっていない点に注目して下さい。
<div class="sample-block">
<p>段落の内容です。文章の内容が書かれています。段落の内容です。文章の内容が書かれています。段落の内容です。文章の内容が書かれています。</p>
<hr>
<p>段落の内容です。文章の内容が書かれています。段落の内容です。文章の内容が書かれています。段落の内容です。文章の内容が書かれています。</p>
</div>
.sample-block hr {
margin: 1.5em auto;
border: none;
text-align: center;
}
.sample-block hr::after {
content:"※ ※ ※ ※ ※";
font-size: small;
}
CSSのcontentプロパティは、置換要素と言って文章上の意味に影響を与えません。そのため、文章そのものの純度を求められるような小説や論文の場合に適していると言えます。
区切り線の色々な装飾サンプル
CSSで装飾できる区切り線のデザインパターンをまとめて紹介します。ブラウザの初期値をリセットするために、共通のセレクタで境界線や高さの値を全て0にしてから、改めて各プロパティを調整しています。
共通するセレクタの値は以下の通りです。この装飾が個別の指定よりも詳細度が高くならないように:where()擬似クラスでhrセレクタを囲っています。
.sample-block {
/* 親要素が持つ値 */
padding: 1rem;
background-color: #eee;
color: #999;
}
.sample-block :where(hr) {
/* リセット */
height: 0;
padding: 0;
border: 0;
/* 行間の調整 */
margin-block: 1em;
}
1：シンプルな区切り線
シンプルな区切り線は以下のプロパティを指定します。難しい記述は特にありません。線の色をサイトに合わせて調整するだけです。
/* 1：シンプルな区切り線 */
.hr-simple {
border-block-start: 1px solid #aaa;
}
2：破線
破線にする場合はborder-styleの値をdashedに変えます。
/* 2：破線 */
.hr-dashed {
border-block-start: 1px dashed #aaa;
}
3：点線
点線にする場合はborder-styleの値をdottedに変えます。
/* 3：点線 */
.hr-dotted {
border-block-start: 1px dotted #aaa;
}
4：二重線
二重線にする場合はborder-styleの値をdoubleに変えます。二重線の間隔を広げたい場合は、上辺と底辺にsolidの線を与えて、<hr>の高さで調整する方法を採用して下さい。
/* 4：二重線 */
.hr-double {
border-block-start: 3px double #aaa;
}
5：立体的に凹んだ線
立体的に凹んだ線を表現する場合は、borderプロパティを上下二辺に指定して、上辺の色を暗く、底辺の色を明るくすると凹んでいるように見えます。影になる色はcurrentColorで文字色を引用しています。親要素で一括操作したい場合は、inheritに変更するなど調整を加えて下さい。
/* 5：立体的に凹んだ線 */
.hr-concave {
border-block-start: 1px solid currentColor;
border-block-end: 1px solid #fff;
}
6：立体的に隆起した線
立体的に隆起した線を表現する場合は、borderプロパティを上下二辺に指定して、上辺の色を明るく、底辺の色を暗くすることで尖っているように見えます。
/* 6：立体的に隆起した線 */
.hr-raised {
border-block-start: 1px solid #fff;
border-block-end: 1px solid currentColor;
}
7：グラデーション
区切り線をグラデーションで表現する場合は、border-imageプロパティを使って、linear-gradient関数を操作します。グラデーションは擬似的に画像として扱うため、生成されたグラデーションをスライスして枠線に表示させています。
/* 7：グラデーション */
.hr-gradation {
border-block-start: 3px solid currentColor;
border-image-source: linear-gradient(90deg, transparent 10%, rgb(0 0 0 / 0.25) 25% 75%, transparent 90%);
border-image-slice: 1;
}
8：斜線による区切り線
区切り線を斜線で表現する場合は、グラデーション関数の繰り返し機能を使います。こちらは枠線の代わりに<hr>の高さを指定して、背景画像にrepeating-linear-gradientで生成したグラデーションを画像として貼り付けます。背景を敷き詰めるタイルの幅をbackground-sizeで定め、斜線の角度や太さをbackground-imageで整えて下さい。
/* 8：斜線による区切り線 */
.hr-diagonal {
block-size: 1em;
background-image: repeating-linear-gradient(45deg, #aaa 0, #aaa 1px, transparent 0, transparent 50%);
background-size: 0.5em 0.5em;
}
9：文字つきのラベルを重ねた区切り線
区切り線の上に文字つきのラベルを表示させる場合の記述方法です。ここで紹介するのは、擬似要素で線と文字の両方を生成するやり方です。最初は<hr>そのものに高さを与えて、位置指定ができるようにpositionプロパティを指定します。
線は::before擬似要素で生成し、ボックスの中央に位置を調整します。文字ラベルを表示させるボックスは::before擬似要素で生成します。線と重なる領域を背景色の継承値で上書きし、透明の余白があるかのように見せています。
/* 9：文字装飾のある区切り線 */
.hr-label {
position: relative;
block-size: 1.5em;
background-color: inherit;
color: inherit;
text-align: center;
overflow: visible;
}
.hr-label::before {
content: "";
display: block;
position: absolute;
inset-block-start: 0.5lh;
block-size: 1px;
inline-size: 100%;
background-color: currentColor;
color: inherit;
}
.hr-label::after {
content: "TOPICS";
display: inline-block;
position: relative;
padding-inline: 1em;
background-color: inherit;
color: inherit;
}