FireFoxの開発ツール

webブラウザ「Firefox」の開発ツール機能が使いやすい。

HTML/CSSってmarginやpaddingやら使って画面の見た目を変えていくんだけど、はじめてさわると、「padding: 14px」とか設定してもそれが画面の見た目にどれくらい影響を与えているのかわかりにくい。

そこでfirefoxの開発ツール

これを使うと視覚的にmarginやpaddingの設定がわかる。

さらにweb画面からパラメータをかえて、それによって画面の見た目がどう変わるかもすぐに確認できる。

他にも色々な機能が使えるんだろうけど、とりあえず余白がどうなるかがわかるのが初心者にはとてもわかりやすくて嬉しい機能だと思う。

よければ皆さんも使ってみてください。

7月28日追記

chromeの検証機能でも同じようなことができるっぽい