委員会発足の経緯
ことはひとつのwordpressサイトで始まりました。
クライアントのサイトを修正中、なぜか得体のしれぬ余白がサイトの一番下、フッターのさらにその下にありました。
検証ツールで確認してもpaddingやmarginなどの余白があるわけでもない。
htmlのほうで全角スペースが入っているわけでもない。
気になる。
はてさて。
悪さをしていたのはreset.css
htmlを見ると、ほぼすべての要素にafterが付いていることに気が付きます。
え…？と思って確認すると、reset.css由来で以下のスタイルがついていました。
div:after{
content: "";
display: block;
clear: both;
}
いやいやそんなまさかと思ってこのcontentを消してみると、見事に余白が消えました。
お前だったのか…
なんでこうなっていたのか考察
最近リニューアルしたサイトであるとは聞いていましたが、この疑似要素の書き方は float の解除用のスタイル「clearfix」です。
詳しくはこちらを参照↓
いつどの要素にfloatがかかってもいいように、全部のdivにこれをつけたのかな…と推測しますが、個人的には絶対やめたほうがいい書き方だと思いました。
- 他の要素に:afterをつけたいときに打ち消さないといけない
- 今回の様に謎の余白が生まれる可能性がある
- 空白の疑似要素は見つけにくいので修正に時間がかかる
上記の理由から、運用面でとっても扱いにくくなります。
特にwordpressのサイトの場合、プラグイン等の影響でソースコードにはdiv要素がいっぱい生まれることも多いです。
その全部に疑似要素が付くせいで、疑似要素の数が大変なことに…
clearfixを使う場合は、clearfix用のクラスを作って、そのクラスが付与されたときだけこの疑似要素が反映されるようにしましょうね(´・ω・`)
この時代（2026年）にこのトラップがあると思わずに、余白を消すのに30分近くかかりまんた
謎の余白がある、という人は、すべてのdivに疑似要素がついていないか確認しましょう
良い疑似要素ライフを！
