CSSのレイアウトの崩れを見つける時に役立つChromeの機能拡張 -Pesticide

ウェブ制作時の困ったは、CSSのレイアウトが思うようにいかない時。
そんな時に役立つ、ページ上の全ての要素のアウトラインを要素ごとに異なるカラーで表示する便利ツールを紹介します。

PesticideはChromeの機能拡張だけでなく、外部スタイルシートとしても提供されているのでローカル環境でブラウザを問わず利用できます。

サイトのキャプチャ

Pesticide
Pesticide -GitHub

Pesticideのインストール

Pesticideは2種類、利用方法があります。

  • Chromeの機能拡張
  • ローカル環境での使用(スタイルシートファイル)

Chromeの機能拡張

下記ページからPesticideをChromeにインストールします。

インストールが完了すると、上部のバーにPesticideボタンが表示されます。

サイトのキャプチャ

右上のボタンでPesticideを起動

ローカル環境での使用(スタイルシートファイル)

下記ページからスタイルシートファイルをダウンロードします。

あとは、確認したいページに外部スタイルシートとして記述します。

<link rel="stylesheet" href="css/pesticide.css">

Pesticideの使い方

Chromeの機能拡張でも外部スタイルシートでも、動作に違いはありません。ページ上のレイアウトをチェックできます。

各要素ごとに異なるカラーでアウトラインを生成します。

サイトのキャプチャ

レイアウトのパターン:ヘッダや見出しなど

サイトのキャプチャ

レイアウトのパターン:コンテンツ

サイトのキャプチャ

フロート周りや入れ子などのおかしくなりがちなとこもチェックできます。

当ブログで適用すると、こんな感じです。

サイトのキャプチャ

Pesticideを適用

sponsors

top of page

©2018 coliss