chrome拡張機能をひとつ CSS Peeper

皆さんは、chrome拡張機能って使ったことありますか？
私は設定画面を探してる時に手当たり次第にアイコンを押していって開いたことはあります(笑)

プログラミング学習する時には使い方知ってた方がいい便利機能満載だそうです。
学習の最初のひと月は独学だったので、いろんな拡張機能を説明する動画を見ました。
その時はあると便利なのね。ふーん。
という感じ。どんなものかもわからないから、とりあえずある動画で紹介されている拡張機能を入れました。

でも、いいものは使いこなしてこそ便利機能。
私はまだ使いこなせてません(´;ω;｀)
ディベロッパーツール（検証ツール）もまだまだ努力しましょうレベルで。
宝の持ち腐れしてます。はい。。

そんな私が最近ネットの絶賛記事を読んで、
「え～？そんなこと言っても初級者は使えないんじゃないの～？」と思いつつ
でも、これあったら模写の時、確認の時、便利だよね。
使えなかったら使わなければいいし。と、だまされたと思って使ったら
その程度の腕の私でさえ「これすごーい！」て思った機能を紹介します。

それは　CSS Peeper　でっす！！

CSS Peeperを起動して、例えば気になる文字をクリックすると
ディスプレイ横に縦長のCSS Peeper画面が出てきて
フォントの大きさ、種類、色、背景色、行の高さ、文字間などなどが知れたりします
box-shadow（枠線に影をつけることができるCSS）が使われてるかどうかも出たりするし、
写真をクリックすると写真の大きさとか。
クリックしたまま（該当場所を指定したまま）画面幅を大きくしたり小さくしたりしても、
その部分の大きさなどが変わればそれがしっかり表示されます。

ディベロッパーツール（検証ツール）でも知れます。
でもねー。意外にハードル高いっす。検証ツールって。
あちこち見るしね。うっかりすると見ていた行を見間違えたりね。
目が忙しいし、ちかちかしてくる(笑)
該当箇所を検証ツール探すのが最初は。。今も少し大変＾＾；
やっと最近少しずつ苦手意識が薄れてきたくらいです。使いこなせるように頑張るけどね。

なので、中級どころか初級者でも気軽にCSSの手助けをしてくれる機能だと思いました。

chromeウェブストアでCSS Peeperで検索したら出てくるので、
画面右側の青いボタン「chromeに追加」をクリックしたらすぐ使えますよ～＾＾

chromeウェブストアはブラウザを立ち上げて、画面右側のジグソーパズルのようなシルエットアイコンをクリックしたら、拡張機能っていうドロップダウンメニューがでてきます。
このデバイスに入っている拡張機能はこれですよ。って。
私はさっき入れたので、CSS Peeper、入ってるでしょ？
で、一番下の段まで見ると、歯車みたいなアイコンと「拡張機能を管理」とありますね。
そこをクリックします。