余白調整のためだけに安易にdivタグを増やすな、おじさんとの約束だぞ

Posted at 2025-01-01

はじめに

始めたばかりのころ、余白やレイアウトを整えるために子要素を持たない<div>タグを増やして高さや余白を当てて見た目を調整してしまう、そんな経験はありませんか？ちなみに私はめちゃめちゃ身に覚えがありすぎて、変な汗かきながら執筆しています。でも、今だからこそ言いたい。「余白調整のためだけに安易に<div>タグを増やすな」と。

なぜ増やすべきでないか

経験談ですがこういう事態に繋がることが多かったので

冗長なHTMLが出来上がっていた
HTMLの構造が複雑になり、可読性が下がります。自分のコードを見返したときに、「これはいったい何のために書いた<div>なんだ？」と悩んでいました。
ちなみに当時の私に「クラス名をspacerにする」というレベルの頭もなく、より煩雑なコードになっていました。
```
<div class="spacer"></div>
<div>
  <h2>素敵な見出し</h2>
  <p>素晴らしいコンテンツの数々</p>
</div>
<div>
  <h2>素敵な見出し</h2>
  <p>素晴らしいコンテンツの数々</p>
</div>
```
スタイルの挙動が予測しづらい
不要な<div>が増えるとそれだけ影響を与える要素が増えたり、スタイルの適用範囲が分かりづらくなっていきます。結果、CSSを書くのがどんどん難しくなるという事態を招くこともありました。
たとえばこういうflexの子要素に余白調整の<div>が記述されていたら少ししんどいかなと思います。
```
<div>　// display: flexを適用
    <div class="spacer"></div>
    <div>
        <h2>素敵な見出し</h2>
        <p>素晴らしいコンテンツの数々</p>
    </div>
    <div>
        <h2>素敵な見出し</h2>
        <p>素晴らしいコンテンツの数々</p>
    </div>
</div>
```
もちろん絶対にダメということは無くて、使うべきケースもあるかとは思います。たぶん。ただ先述した事態を招くことの方が多かったり、CSSへの苦手意識を生む原因にもなると感じています。そして何より、そもそものHTMLとCSSの役割に反しているためこのようなコードを書くべきではないです。

HTMLとCSSの役割って？

この記事でこれを一番言いたかったと言っても過言ではない。なに、めんどくさそうだって？あっ、こら待て、逃げるんじゃない。

みんな大好きMDNよると

HTML は、コンテンツの構造を定義するマークアップ言語です。

とありますね。我々が日夜お世話になっているMDN大明神のこのお言葉を無視してHTMLにコンテンツの構造とは言い難い<div>タグ、すなわち私が先ほどから死ぬほど繰り返し叫んでいる「余白調整のためだけの<div>タグ」を記述するのはいささか妙な話ではないだろうか。
え、怖い？それは一旦置いといて、じゃあ余白調整はどうするのかというと

CSS は、HTML の要素を選択的にスタイルにするために使うものです。

余白調整はこっちなんですね、ええ。私はなんと愚かだったのか。「これはこの用途で使うんやで」と言われているにも関わらずそれを無視した用途で使っていた。そのくせ自分の思ったようにCSSが効かないと、やれCSSは難しすぎるだのやれ人類には早すぎたなどと、自身を全く顧みず他責にばかり走っていた。~~実際難しくはあるんじゃないかと今でも思っている。~~

HTML conveys meaning, rather than presentation

そしてこれでもかと言わんばかりにまた他所から引用してくるんですが、ここでもHTMLは意味を伝えるものであって表現をするものではないとも言われていますね。

つまりHTMLはあくまでもコンテンツの内容や構造を表すものであって、それを見やすくするレイアウトや余白についてはCSSに寄せるべきということです。

まとめ

レイアウトや余白調整をHTML側に寄せるか、CSS側に寄せるかということでどちらも実装はできます。できるんですが、そもそもの決まり事に則っていない方法でやってたら、そりゃあどこかに皺寄せ（私の場合は管理が面倒になったのとCSSが書きにくくなったこと）は来ますよね。

いきなり厳密なタグの使い分けとかはハードルが高いですが、このあたりの言語としての原則、つまり余白調整などの見た目に関するものの責任をHTMLへは寄せずに書いていきたいですねっていうお話でした。

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up