現場で差がつく！`hr`要素のスタイリング、あなたは「ただの線」で終わらせていないか？
こんにちは。フロントエンドの現場に長くいると、「たかが `
` されど `
`」という言葉を身にしみて感じることがあります。
HTMLの仕様において、`
` は「主題の切り替わり」を示すセマンティックな要素です。しかし、CSSで装飾しようとした途端、多くのエンジニアが「なぜか思った通りの高さにならない」「ブラウザごとに微妙に余白が違う」という泥沼にハマります。
今日は、そんな `
` を手なずけ、デザインの意図を完璧に体現するための「現場の流儀」を解説します。
—
ブラウザが裏側でやっている「厄介な挙動」
まず、敵を知ることから始めましょう。`
` はブラウザごとにデフォルトスタイルが大きく異なります。
- IE時代の遺産: 多くのブラウザは、いまだに `border` と `background-color`、そして `height` が複雑に絡み合うレガシーな実装を抱えています。
- User Agent Stylesheetの罠: ChromeやSafariでは、`
` にはデフォルトで `border-style: inset` や `border-width: 1px` が設定されていることが多いです。これが、CSSで「線が消えない」「色が変えられない」という問題を引き起こす最大の原因です。
これを真っ向から受け止めるのではなく、「まずは全てを剥ぎ取る」のが、私たちプロの作法です。
—
実践：モダンで美しい「hr」を作るベストプラクティス
現場で最も汎用性が高いのは、`border`を完全に消して、`height`と`background-color`で線を制御する手法です。これにより、線種（実線・点線など）だけでなく、アニメーションやグラデーションも思いのままになります。
そのまま使えるリセット＆スタイリングコード
/ 1. まずはブラウザデフォルトの装飾を徹底的に排除 /
hr {
display: block; / 念のためブロック要素として定義 /
border: none; / borderを消さないと色が反映されないブラウザがある /
margin: 2rem 0; / 文脈に応じて適切な余白を /
height: 1px; / 線の太さを指定 /
background-color: #e0e0e0; / 線の色を指定 /
}
/ 2. デザインバリエーションの例：繊細な区切り線 /
.hr-subtle {
height: 2px;
background: linear-gradient(to right, transparent, #ccc, transparent);
}
/ 3. デザインバリエーションの例：太めのアクセントライン /
.hr-accent {
height: 4px;
background-color: #333;
width: 50px; / あえて短くしてアクセントに /
margin-left: auto;
margin-right: auto;
}
—
現場で「膝を打つ」ための注意点
コードを書いて終わりではありません。シニアエンジニアがチェックするポイントは、その先の実用性です。
1. アクセシビリティを忘れない
`
` は意味のあるタグです。もし単なる「装飾的な線」を引くためだけに使うのであれば、`aria-hidden=”true”` を付与することを検討してください。スクリーンリーダーが意味のない区切り線で読み上げを止めてしまうのを防ぐためです。
2. `height` と `margin` の相性
`
` の `height` を大きくした場合、その分だけ上下の余白が食われます。全体のレイアウト崩れを防ぐには、`box-sizing: content-box`（デフォルト）であることを念頭に置き、`margin` で上下の呼吸を整えるのが鉄則です。
3. レスポンシブへの配慮
モバイル表示では余白を詰め、デスクトップでは広めにとる。これはCSSの基本ですが、`
` のような区切り要素こそ、`clamp()` 関数を使って動的に余白を調整すると、プロっぽい仕上がりになります。
/ 画面幅に応じて余白を可変させる（モダンな手法） /
hr {
margin: clamp(1.5rem, 5vw, 3rem) 0;
}
—
まとめ：技術は「意図」のためにある
`hr` は単なる「線」ではありません。コンテンツの文脈を切り替える、読者の視線をリセットする重要な役割を担っています。
「とりあえず線が引ければいいや」と安易にデフォルトのまま放置するのではなく、プロジェクトのトーン＆マナーに合わせて、今回紹介したような制御を行ってみてください。細部へのこだわりこそが、あなたの作るサイトを「どこか安っぽいもの」から「洗練されたプロダクト」へと昇華させる鍵になります。
さあ、エディタを開いて、プロジェクトのCSSをクリーンに書き換えてみましょう！また次の現場でお会いしましょう。
コメント