この前、別のブログを編集中にフッター部分の下に謎の余白ができてしまうというエラーが起こったんだが、最終的に解決できたので、これについての原因と対策を書き残しておこうと思う。

原因

フッターの下に余白ができる理由は要素の位置が原因らしい。具体的には、チェックボックスを隠すために「position: absolute; left: -50vw;」で画面外に設定したことだった。

これをブログ記事内の要素に設定すると、チェックボックスを記事表示部分の「left: -50vw;」に移動させるという命令になるため、ズレた部分がフッター下に余白として表示されてしまったらしい。

ヘッダーナビなど側の部分でこのチェックボックスを隠すテクニックを使うのは問題ないようだが、これをブログ記事などのコンテンツ部分で使ってしまうと無駄な余白として表示エラーが発生してしまうようだ。

対策

チェックボックスを隠すためには画面外に移動させるよりも「display: none;」で要素そのものを非表示にするほうが簡単だ。なので、チェックボックスのCSSで「display: none;」を設定したことで、このエラーを回避することができた。

最初から「display: none;」を使わなかった理由

最初から「display: none;」を使わなかったのは、別に「display: none;」を知らなかったからというワケではなく、最近巷で「display: none;」を使うとSEOにおいて評価を下げる原因になるといわれているからだ。評価を下げられる理由は、隠しテキストや隠しコンテンツの有無がサイトの評価を下げる要因になっているかららしい。

しかし、レスポンシブデザインなど「特定の条件下で表示・非表示を切り替える」というユーザビリティに配慮した意図で「display: none;」を使うことについては問題ないようだ。これは検索ロボットがソースコードを参照して判断するらしい。

自分も専門家ではないので、正直言って全然詳しくないのだが、巷でこういう情報を目にしたので一応これに配慮してなるべくユーザビリティの配慮しない隠し要素の設定は控えているってだけ。とりあえず、自作テンプレートはこの辺の事情を鑑みて「display: none;」を使うことにしている。

参考記事：SEO対策の基本（おまけ：display:none; はブラックハットか？）