あるウェブサイトのCSSを見る時に、皆どうやって見ているんでしょうか？ 色んな方法・ツールがあると思いますが、今回はweb developerの機能から。
CSSが分割されており複数のcssをimportしているような形が多いと思うんですが、そんな時にもこのツールは役に立ちます。ツールバーにこのweb developerのバーが加わり、そのCSSメニューから「CSSを表示する」を選ぶだけでCSSをhtmlとしてブラウジング出来、さらにimportされているファイルはハイパーリンクとして表示されるので複数のCSSファイルで構成されている場合なんかも便利ですね。
CSSだけでなくCookie、Javascript、画像、ソース表示など色んな機能がありますが、CSSをクローズアップするとこんな事ができます。
- CSSを無効にする
- メディアタイプ指定のCSSを表示する
- CSSを表示する
- スタイル情報を表示する
- スタイルシートを追加する
- CSSを編集する
- ボーダーボックス計算式を使う
単にCSSを表示するだけでなく「CSSを編集する」などはサイドバーに各CSSファイルがタブ形式で表示され、それを編集するとその内容がリアルタイムでブラウジングに反映されCSSを勉強したり開発などでも使い道がありそうですね。
インストールはInfoxiaのページから(web developer 1.0.2)
http://www.infoaxia.com/tools/webdeveloper/download.html
コメントする