皆さんは、chrome拡張機能って使ったことありますか？
私は設定画面を探してる時に手当たり次第にアイコンを押していって開いたことはあります(笑)
プログラミング学習する時には使い方知ってた方がいい便利機能満載だそうです。
学習の最初のひと月は独学だったので、いろんな拡張機能を説明する動画を見ました。
その時はあると便利なのね。ふーん。
という感じ。どんなものかもわからないから、とりあえずある動画で紹介されている拡張機能を入れました。
でも、いいものは使いこなしてこそ便利機能。
私はまだ使いこなせてません(´;ω;｀)
ディベロッパーツール（検証ツール）もまだまだ努力しましょうレベルで。
宝の持ち腐れしてます。はい。。
そんな私が最近ネットの絶賛記事を読んで、
「え～？そんなこと言っても初級者は使えないんじゃないの～？」と思いつつ
でも、これあったら模写の時、確認の時、便利だよね。
使えなかったら使わなければいいし。と、だまされたと思って使ったら
その程度の腕の私でさえ「これすごーい！」て思った機能を紹介します。
それは CSS Peeper でっす！！
CSS Peeperを起動して、例えば気になる文字をクリックすると
ディスプレイ横に縦長のCSS Peeper画面が出てきて
フォントの大きさ、種類、色、背景色、行の高さ、文字間などなどが知れたりします
box-shadow（枠線に影をつけることができるCSS）が使われてるかどうかも出たりするし、
写真をクリックすると写真の大きさとか。
クリックしたまま（該当場所を指定したまま）画面幅を大きくしたり小さくしたりしても、
その部分の大きさなどが変わればそれがしっかり表示されます。
ディベロッパーツール（検証ツール）でも知れます。
でもねー。意外にハードル高いっす。検証ツールって。
あちこち見るしね。うっかりすると見ていた行を見間違えたりね。
目が忙しいし、ちかちかしてくる(笑)
該当箇所を検証ツール探すのが最初は。。今も少し大変＾＾；
やっと最近少しずつ苦手意識が薄れてきたくらいです。使いこなせるように頑張るけどね。
なので、中級どころか初級者でも気軽にCSSの手助けをしてくれる機能だと思いました。
chromeウェブストアでCSS Peeperで検索したら出てくるので、
画面右側の青いボタン「chromeに追加」をクリックしたらすぐ使えますよ～＾＾
chromeウェブストアはブラウザを立ち上げて、画面右側のジグソーパズルのようなシルエットアイコンをクリックしたら、拡張機能っていうドロップダウンメニューがでてきます。
このデバイスに入っている拡張機能はこれですよ。って。
私はさっき入れたので、CSS Peeper、入ってるでしょ？
で、一番下の段まで見ると、歯車みたいなアイコンと「拡張機能を管理」とありますね。
そこをクリックします。
そしたら、拡張機能がフルサイズのページになります。
画面左上、拡張機能の２つとなりに三本線（ハンバーガーメニュー）があるので、クリックします
すると、画面全体が暗くなって、ドロワーメニューがにゅっと出てきます。
その一番下、「chromeウェブストアを開きます」って書いてますね。
そこをクリックするとウェブストアが開きます。
左上のストアを検索というボックスにCSS Peeperと入力して、CSS Peeperを呼び出し、
CSS Peeperをクリックしたら、サムネイル状態から少し大きな画面に切り替わりますので
chromeに追加って書いてあるボタンを押します。
デバイスの拡張機能に追加できると、画像のように「chromeから削除します」となるので、
やっぱ使わなかったーって場合はここを押したら削除されます。
他の拡張機能もおんなじでーす。
ボタン一つで追加と削除ができるので、表示を読んで判断しまーす。
