くまだどうも、くまだです。
Web制作・コーディングする上で私が使っているChromeの拡張機能をいくつか紹介します。でもたぶん私が使っているのはWeb制作界隈では当たり前、よく見かけるやつで目新しいものはないとだけ先に言っておきます笑
拡張機能ではないですが、Zeplinというツールが便利です。
個人的に使っている拡張機能
- WhatFont
- GoFullPage
- HTMLエラーチェッカー
- PerfectPixel
- UI Build Assistant（IT大学）
- WordPress Theme Detector and Plugin Detector
- Responsive Viewer
それぞれの詳しい使い方は説明しませんが、さらっと紹介していきます。
Webサイトで使われているフォントを判別できる「WhatsFont」
見出しで説明しきっていますが、Webサイトで使われているフォントを調べることができます。Webサイト内の調べたいフォントのところをクリックすると↓のような感じで、使われているフォントの情報を見ることができます。
オシャレなサイトを見つけて、そこのフォント何を使っているんだろうな～というときに使えます。
Webサイトをまるごと画像化「 GoFullPage 」
Webサイトを上から下までスクリーンショットして一枚の画像化します。モック画像として作るのには超使ってます。
コーディングしたHTMLのエラーをチェック 「HTMLエラーチェッカー」
HTMLの閉じタグ忘れやタグが余分に多い・少ないなどある場合、個数で教えてくれます。コーディングが終わったらその都度チェックします。
常にONの状態にしておけば、ずっと監視してくれます。
ピクセルパーフェクトなコーディングができる「PerfectPixel」
Web制作コーダーなら必須になってくるかも？
先ほど紹介したGoFullPageで書き出したモック画像を使って、検証ツール上でモック画像を透かして見ることができます。あとはその上から重ねるようにコーディングしていけば、ピクセルパーフェクト。
ピクセルパーフェクトに関しては↓でもさらっと書いてます。
余白やレイアウトが可視化される「 UI Build Assistant 」
要素間の余白が可視化されるので、検証ツールと組み合わせてみると開発しやすいです（個人的には）。
UI Build Assistant をONにすると↓みたいな画面になります。あとはこの状態で検証ツールで開発。
つねにつけているわけではないですが、けっこう便利です。
WordPressのテーマとプラグインを調べる「WordPress Theme Detector and Plugin Detector」
WordPressサイトの使用テーマや使っているプラグインを調べることができます。
このくまぶろぐのテーマも使っているプラグインも丸わかりです。
レスポンシブの端末幅をまとめて確認「 Responsive Viewer 」
複数の端末幅をまとめて確認することができます（ちょっと重いですが、、、）
左側から見たい端末を選択すれば、右側に追加されます。上の画像みたいに複数の端末幅を一度に確認できます。
まとめ
Web制作で使っているChromeの拡張機能をさらっと紹介しました。なにかのお役に立てれば幸いです。
今回は画像が多めでした。
ここまで読んでくださりありがとうございました。