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

プログラミング

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

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

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

想定読者
・Web制作に携わるデザイナー、エンジニアの方
・配色などの、Webサイトの情報を知りたい方

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制作に関わる人なら何かと便利だと思うので、是非使ってみてください!

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

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

おさかなでした!

 

【おさかなび-osakanav-】では、この記事の感想!おさかなへの応援メッセージ!おさかなに聞きたい事、質問!記事にしてほしい内容!などを大募集中!

「氏名」「メールアドレス」「内容」の3点をご記入の上「osakana1699@gmail.com」までご応募ください!

 

この記事は役に立ちましたか?

タイトルとURLをコピーしました