HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

CSS デバッグ | 影響範囲を確認 | 視覚化する

CSSのデバッグというのは、ひどく厄介。どのクラスが継承されているかなんて、目で追いかけるとどうしても見落としが発生し、ドツボにはまる。
 
可視化できたらどんなに楽になるか・・・で探してみた。なんと世の中の多くのWEBデザイナーが苦しんでいるはずなのに、その情報が見つからない。検索ワードに問題があるのかしらないけれど。
 
で、やっと見つけた。なんと、FireFIXのプラグインにあったのだ。
 

Webdeveloper

[box color=”lgreen” icon=”fa-download fa-lg”]ダウンロード先→http://www.infoaxia.com/tools/webdeveloper/index.html[/box]
 
インストールは、必ずローカルに送り付けられてからになる。
 
インストールすると、ナビゲーションがすごいことになるけど、まぁファイヤーフォックスをデフォルトブラウザで使うことはないので気にしない。FireFoxは、常にデバッグ専用なのだ。そんだけデバッグプラグインが充実してるってことだけど(笑)
 

ページの呼び出し

解析するターゲットのページを呼び出します。
2014y10m07d_031541943
 

ブロック枠の表示

ターゲットのページを呼び出してから、ブロックの枠を表示させる(させなくてもいいけど、気分的に見やすい・・かも)
2014y10m07d_031641156
 

CSS情報表示

ナビゲーションバーのCSSからCSS情報の表示を選ぶ
2014y10m07d_031552995
 

見方

例として「ソースコードを表示するPLUGIN」の h2 タグの文字列をクリックすると下図のように表示される。
css-debug01
css-debug02

スポンサーリンク

スポンサーリンク

カテゴリー