「Pesticide for Chrome」を使って CSS のレイアウトのチェックをする
「Vuetify.js」のキャッチアップをしている過程で，どうやら「CSS Flexbox」のキャッチアップも必要だと思い，進めているのですが CSS が崩れているかのチェックや実際はどのようなレイアウトでスタイルされているのかを確認するのが少し面倒になってきました...
そこで良い感じなツールが無いかを探してみた所，「Pesticide for Chrome」がどうやら便利そうだとわかったため 今回はこの拡張機能についてまとめていきます．
使い方
とても簡単です．まずはここからインストールをします．
CSS のレイアウトのチェックをしたいページにアクセスします．今回は私のブログのページを対象にします． https://bake0937.hatenablog.com/archive
この虫マークを押すと...
こんな感じで線が表示され，どのように CSS が当たっているのかがわかります！！！
Dev ツールを併用すればクラス名も表示されるので，見たいスタイルを Pesticide for Chrome で明確にした上で確認できるようになりました．
まとめと所感
今回は Pesticide for Chrome を使って CSS のレイアウトのチェックをする方法についてまとめました．いやぁ...そもそも今まで Float で CSS を書いていたのにいつの間にか CSS Flexbox や CSS Grid Layout など色々なレイアウト手法なんてあったんですね．最近やっと気が付きました...(というより，今まであまり意識していなかったというのが合ってそうですが...)
Rails の View をちょこちょこメンテする日々が続いていて，HTML や CSS の書き方が少し抜けてきたのを実感しているためこちら書籍を読んで復習し直してます． 指示書に従ってコーディングする本とのことで実践的だと思い，買ってみました．
通しでやってみて，良さそうな本だったら書評を書こうと思います．
