CSSのレイアウトの崩れを見つける時に役立つChromeの機能拡張 -Pesticide
Post on:2014年4月30日
sponsors
ウェブ制作時の困ったは、CSSのレイアウトが思うようにいかない時。
そんな時に役立つ、ページ上の全ての要素のアウトラインを要素ごとに異なるカラーで表示する便利ツールを紹介します。
PesticideはChromeの機能拡張だけでなく、外部スタイルシートとしても提供されているのでローカル環境でブラウザを問わず利用できます。
Pesticideのインストール
Pesticideは2種類、利用方法があります。
- Chromeの機能拡張
- ローカル環境での使用（スタイルシートファイル）
Chromeの機能拡張
下記ページからPesticideをChromeにインストールします。
インストールが完了すると、上部のバーにPesticideボタンが表示されます。
右上のボタンでPesticideを起動
ローカル環境での使用（スタイルシートファイル）
下記ページからスタイルシートファイルをダウンロードします。
あとは、確認したいページに外部スタイルシートとして記述します。
<link rel="stylesheet" href="css/pesticide.css">
Pesticideの使い方
Chromeの機能拡張でも外部スタイルシートでも、動作に違いはありません。ページ上のレイアウトをチェックできます。
各要素ごとに異なるカラーでアウトラインを生成します。
レイアウトのパターン：ヘッダや見出しなど
レイアウトのパターン：コンテンツ
フロート周りや入れ子などのおかしくなりがちなとこもチェックできます。
当ブログで適用すると、こんな感じです。
Pesticideを適用
sponsors
