忘れ去られたタグ「hr」を見直す――セマンティクスと装飾の境界線を再定義する
現場でコードレビューをしていると、`hr`要素を単なる「線を描くための装飾ツール」として扱っている場面によく遭遇します。CSSで`border-top`を引いた`div`で代用したり、逆に`hr`に対して無理やり`height`を与えてデザインの微調整に使ったり……。
しかし、HTMLの仕様書（WHATWG）を紐解けば、`hr`は「段落レベルでの主題の変わり目（thematic break）」を示すれっきとした意味論的な要素です。今回は、この地味ながらも強力な`hr`要素を、実務レベルで正しく、かつ美しく使いこなすための知見を共有しましょう。
なぜ「div」や「border」ではダメなのか
「見た目が同じならいいじゃないか」というのは、Webサイトがドキュメントであることを忘れた甘い考えです。
`hr`は、スクリーンリーダーなどの支援技術に対して「ここで話題が切り替わりました」というシグナルを送ります。単なるデザイン上の区切り線であればCSSの`border`で十分ですが、物語の章の変わり目、あるいはブログ記事内でのセクションごとのトピック転換など、構造上の断絶を示すには`hr`が不可欠です。
ブラウザの内部処理において、`hr`はデフォルトで`display: block`として扱われ、UAスタイルシートで特定の余白やボーダーが設定されています。これを「リセットして消す」のではなく、「意味を活かしたまま、今のデザインに馴染ませる」のがシニアの流儀です。
実務で使える「汚さない」hrスタイリング
多くの開発者が陥る罠は、`hr`に強力な`margin`や`height`を当てすぎて、後からのレイアウト調整を困難にすることです。以下のサンプルコードは、アクセシビリティを損なわず、かつモダンなデザインに柔軟にフィットさせるための構成案です。
/ リセットではなく、hrの「意味」を活かしたスタイリング /
hr.thematic-break {
/ 視覚的な重さを取り除く /
border: 0;
height: 1px;
/ コンテキストに応じた余白の確保 /
margin: 3rem 0;
/ 背景色で表現することで、flexbox環境下でも崩れにくい /
background-color: var(–color-border-subtle, #e5e7eb);
/ 意味論的な区切りであることを明示的に扱う場合 /
display: block;
}
/ さらにこだわりたいなら：アイコンや装飾を追加する /
hr.thematic-break–fancy {
position: relative;
overflow: visible;
border: 0;
margin: 4rem 0;
}
hr.thematic-break–fancy::before {
content: “…”; / 文学的な区切りを演出 /
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: white;
padding: 0 1rem;
color: #666;
font-size: 1.5rem;
}
現場で「hr」を選択するべきタイミング
私がチームメンバーに伝えているのは、「この区切り線を取っ払ったら、ユーザーは話が繋がっていると誤解するか？」という問いかけです。
- 使うべきケース: 記事内のセクション遷移、書籍の章の終わり、あるいはフォームの入力項目において、関連性の低いグループを分けるとき。
- 避けるべきケース: 単なるリストのアイテム間の区切り（これは`li`の`border`で十分）、あるいはサイドバー内のウィジェットの境界（これはコンテナのレイアウトで解決すべき）。
まとめ：意味論をデザインの味方につける
`hr`をただの「線」としてではなく、「情報の断絶」というメタデータとして扱うことで、ドキュメントの構造はより強固になります。
フロントエンドの仕事は、単に画面をピクセル単位で再現することではありません。ブラウザというエンジンに対し、コンテンツの「意味」を正しく翻訳して伝えることこそが、私たちが提供すべき価値です。次に`hr`を使うときは、ぜひその線が「何を分断しているのか」を少しだけ考えてみてください。その小さな思慮深さが、保守性の高い、堅牢なコードベースを築く礎になります。
それでは、また次回のTipsでお会いしましょう。実装を楽しんで！
コメント