こんにちは。
札幌でweb制作を行なっている石田です。
今年ももう11月と1年はあっという間ですね！
北海道では毎年10月末頃に1度雪が降っていたような気がしますが、
今年はまだ降っていないので、11月半ば頃に降るような気がします。
本題ですが、今回はGoogle Chromeで使用できるweb制作に便利な拡張機能を紹介します。
拡張機能でできることは多々あり、とても便利なのでぜひ参考にしていただけたらと思います。
それでは紹介していきます。
目次
CSSViewer
閲覧しているサイトのカーソルを合わせた箇所のタグやスタイルなどが確認できます。
フォントなど気になった際にデベロッパーツールを開かなくても確認できるためよく使用します。
HTMLエラーチェッカー
HTMLの記述で開始タグ・終了タグ忘れがないか確認できます。
何行目の何のタグが抜けているかも教えてくれるためとても重宝しています。
GoFullPage
サイトを1ページまるごとスクリーンショット撮ることができます。
Chromeのデベロッパーツールからも1ページのスクリーンショットを撮ることは可能ですが、変になることがあるため、私はGoFullPageで撮るようにしています。
サイト内にスクロールして表示される箇所がある場合はサイトの下までスクロールし、全て表示させる必要があります。
Window Resizer
ブラウザの画面幅を指定した幅に変更することができます。
コーディングの修正などで「画面幅◯◯pxで崩れる」などの指摘があった場合は指摘のあった画面幅に容易に変更することができ、デベロッパーツールを開いて画面幅を設定しながら修正する必要がなくなります。
修正以外にも、ipadの画面幅にしてコーディングするときによく使います。
Wappalyzer
サイトで使用されているフレームワーク・ライブラリ・CMSなどを確認することができます。
例えば、オンラインショップがなにを使用して構築されているのかや、サイト何になんのサービスが使用されているかなどが簡単に確認できます。
HTML5 Outliner
HTMLのアウトラインを確認することができます。
アウトラインとは、検索エンジンから見たWebページの構造を表すものです。
詳しくは検索してみてください。
PerfectPixel
コーディング時のブラウザとデザインデータを重ね合わせ、パーフェクトピクセルによるコーディングができます。
デザインデータの幅と画面幅を合わせてコーディングする必要があります。
デザインデータの要素間の余白とコーディング時の余白は実際には異なることが多いため、拡張機能やZeplinというアプリを使用してコーディングした方が良いと思っています。
以上、おすすめの拡張機能でした！
是非参考にして気に入ったものがあれば使用していただけたらと思います！
では！
