「余白のために ` ` を書く」のは、もう終わりにしよう。
現場でコードレビューをしていると、今でもたまに見かける光景があります。要素と要素の間に「ちょっとした余白」が欲しいからといって、`
` を連打したり、意味のない `
` をレイアウト調整のためだけに差し込んだりする手法。
正直に言います。それ、フロントエンドエンジニアとしての「美学」と「アクセシビリティ」の両方を損なっています。
今日は、なぜ空の `
` や不用意な `
` が悪手なのか、そして我々が明日から取るべき「プロの代替案」について、ブラウザの裏側の挙動を交えて解説しましょう。
—
1. なぜ「空の要素」はスクリーンリーダーを混乱させるのか
まず、ブラウザのエンジンがどう動いているかを想像してください。
我々が書いた HTML は、ブラウザによって解析され、DOM ツリーが構築されます。スクリーンリーダー（読み上げソフト）は、この DOM ツリーを辿り、意味のある要素（セマンティックなマークアップ）だけをユーザーに伝えます。
空の ` ` の罪
`
` 要素は「段落」を意味します。しかし、中身が空っぽの `
` に遭遇したとき、スクリーンリーダーによっては「空の段落」と読み上げたり、あるいは無視したりします。ユーザーからすれば、「何もない場所で、わざわざ空の段落がある」という無駄な情報を押し付けられることになり、これがナビゲーションのストレスになります。
` ` の誤用
`
` は「テーマの区切り」を示す要素です。本来、コンテンツの文脈が切り替わる境界線に置くべきものであって、デザイン上の「ただの横線」を引くために使うものではありません。これをレイアウト調整に使うと、読み上げ時に「水平線です」といった不要なアナウンスが入り、文脈の連続性を断ち切ってしまいます。
—
2. 実務で使える「賢い余白」の作り方
「余白が欲しいだけなのに、CSS でマージンを指定するのが面倒」という気持ちはわかります。しかし、そのショートカットが負債になるのです。
ベストプラクティス：CSSの論理プロパティを活用する
最近の現場では、`margin` を直接叩くよりも、コンポーネントごとの「スペーサー（余白管理）」を設計するのが主流です。
以下は、HTML を汚さずに CSS だけで美しく余白を制御する実践的なアプローチです。
/ プロが使うスペーサーの考え方 /
.u-spacer-m {
/
margin-top を直接指定するのではなく、
コンポーネント間の余白を管理するユーティリティクラスを作る
/
margin-block-start: 1.5rem;
}
/ もし「区切り線」が必要なら、hrではなくCSSのborderで実装する /
.c-divider {
border: none;
border-top: 1px solid #ccc;
margin: 2rem 0;
/
これでスクリーンリーダーは「線」として解釈せず、
CSS上の装飾としてのみ機能します
/
}
—
3. どうしても「空っぽ」が必要な時の逃げ道
稀に、CMS の仕様やレガシーなテンプレートエンジンで「どうしても構造上要素が必要」という場面があるかもしれません。その場合は、`aria-hidden` を活用してスクリーンリーダーの存在を消し去るのが、最後の手段です。
—
結論：コードは「意図」を語るべき
HTML は、「何が書いてあるか（コンテンツの構造）」をブラウザとユーザーに伝えるための言語です。レイアウトはあくまで CSS の仕事。
- `
` は文章の段落のために使う。
- `
` は文脈の区切りに使う。
- 余白はクラス名やレイアウト用のラッパー（CSS Grid/Flexbox）で制御する。
この原則を守るだけで、あなたの書くコードは驚くほどクリーンになり、アクセシビリティ対応のレベルも一段階引き上がります。
「とりあえず空の p タグで調整」という妥協は、今日で終わりにしましょう。コードの裏側に宿る「意図」を大切にするエンジニアこそが、次世代のフロントエンドを牽引していくはずです。
何か分からないことがあれば、いつでもチームの Slack で聞いてください。コードベースを綺麗に保つ戦いは、日々の積み重ねがすべてですよ！
コメント