はみ出る要素をやっつけろ！CSSのデバッグテク

Web開発をしていると遭遇するはみ出る要素。
モバイル用の表示など画面サイズを小さくすると発生するWebページが横スクロールできてしまう厄介なやつです。

特にレスポンシブデザインを採用している場合によく遭遇することでしょう。

パッと見ではどの要素が原因なのか分かりづらく、退治するのに苦労した記憶があります。

そんなはみ出る要素を視覚的に分かりやすく発見できるCSSのデバッグテクニックのご紹介。

視覚的に発見出来るようにする

今までは、デベロッパーツールを使って要素一個一個にカーソルを合わせて、あれでもないこれでもないと頑張って探していたヤツもCSSファイルに次の一行追加してやるだけでパッと見ですごく分かりやすくなります。

*{outline:1px solid #0000FF}

何をやったかと言うと*(全称セレクタ)を利用して全ての要素にoutline(枠)をつけました。

これをつけてやることで、どの要素がはみ出ているのか一目瞭然です！！(幸せ)

ページのデザインに応じて色を変更すると見やすいと思います。

サンプル

次のチェックボックスにチェックを入れるとこのページに上記のCSSを適用できます。

アウトラインを有効化する

ページの要素に青い枠がついたでしょうか？

終わりに

今回紹介したoutlineを用いた方法はWeb開発の現場では割と有名な方法なんだとか。
筆者はWebフロントをメインにやっている訳ではなかったので知らなかったのですが、これでだいぶCSSのスタイルの調整が楽になりました。
このサイトの改修の際にも積極的に使っていきたいテクです。