Web制作に関わるすべての人へ！おすすめのツール【CSS Peeper】

みなさんこんにちは！おさかなです！

今回は「CSS Peeper」について、書いていこうと思います！

それでは、レッツゴー！！！！！

Web制作に欠かせない、4つの機能！

・カラーコード
・フォント
・クラス名
・余白

これらはWeb制作をする上でとても必要な情報ですよね！
「このサイトの配色真似したい！」とか「このサイトのフォント素敵！」とか、色々なサイトを参考にしながら、自分のサイトを作りたいときも多いと思います！

(でも、このパーツどうやって作ってるか、わからないよ…。)

その悩み、一気に解決！「CSS Peeper」

ナビまる

そんな！おさかなには「CSS Peeper」がオススメだよ！

おさかな

ナビまる！

「CSS Peeper」

とは「Chrome拡張機能」の1つで、Webサイトを解析して

・OGP画像（Open Graph Protocol）
・タイトル
・bodyに設定されているfont-family
・Webサイトの配色

などを調べることができるツールです！

公式サイトはコチラ！

実際につかってみよう！

早速、使ってみましょう！
「Chromeウェブストア」で「CSS Peeper」を検索して追加してみてください！

こちらからもダウンロードできます！

※Chrome拡張機能の詳しい使い方はコチラ！(準備中)

アイコンをクリックすると…？
こんな感じで！「OGP画像」「タイトル」「フォント」といった感じで、Webサイトの情報がでてきます！
(おさかなはOGP画像が設定できていなかった…！笑)

※WordPressでOGP画像を設定する方法はコチラ！(準備中)

しずくのようなアイコンをクリックすると、「Webサイトに使用されている配色の一覧」が表示されます！
(カラーコードはもちろん、opacityまで！詳しく表示されるよ…！)

カメラアイコンをクリックすると、使用している画像の一覧が出てきます。
「Export All」をクリックすると画像を一括で保存することもできます！

「CSS Peeper」を起動した状態で、「特定の要素」をクリックすると、id,class名や余白、要素のサイズ、行間などを見ることができます…！

感想・まとめ

今回は「CSS Peeper」について、書いていきました…！

いかがだったでしょうか？

最近はかなり便利ツールが増えてきて、どれを使おうか迷ってしまうかもしれませんが、まずはこの「CSS Peeper」に挑戦してみるのはどうでしょうか？！
Web制作に関わる人なら何かと便利だと思うので、是非使ってみてください！

それでは今回はこの辺で！

ここまで読んでくださり、ありがとうございました！

おさかなでした！