FlexboxやFloatでレイアウトが崩れてしまう原因がすぐに見つかるChromeの機能拡張- Pesticide

Post on:2016年8月31日

sponsors

CSSのレイアウトで思うようにいかない時に、最初に確認すべきことはページ上のすべての要素がどのようにレイアウトされているかです。これを知るには、各要素が区別できるように、要素ごとに異なるカラーのアウトラインをつけると便利です。

ページ上のすべての要素に、要素ごとに異なるカラーのアウトラインをつけ、親子関係も一目で分かる便利なChromeの機能拡張を紹介します。

以前当ブログで紹介したことがありますが、バージョンアップされており、更に便利になっています。

Pesticideは、2つの方法で利用できます。

外部スタイルシートとしても提供されているので、ローカル環境でブラウザを問わず利用することもできます。

簡単なのでChromeにインストールし、さっそくPesticideで当ブログのレイアウトを検証してみました。

コリスにPesticideを適用

Pesticideのボタンをクリックするだけで、HTMLの各要素がアウトラインで囲まれます。アウトラインのカラーは各要素ごとに異なるのがいいですね。

コンテンツとサイドバーのラッパーのように、同じ要素だとカラーも同じになってしまい、どこまで影響されているのか分かりません。しかし、Pesticideではそれがどこまで影響されているのかも一目で分かります。

ラッパーを選択

例えばラッパーの要素をホバーすると、ラッパー部分にシャドウがつきます。

さらに、子要素を選択すると、その子要素すべての親にシャドウがつきます。

子要素を選択

入れ子などおかしくなりがちな箇所も、どのレベルで入れ子になっているか、同じレベルでの入れ子なのかも一目瞭然です。

各要素のアウトラインのカラーは、下記のように設定されています。
スタイルシートファイルで利用する時はカラーを簡単に変更できます。

長いので、全要素の一部です。