仕事の時短に便利な拡張機能をご紹介

みなさん、こんにちは。
1児の母になって戻ってきました。久方ぶりです。
すっかり真夏になって、水道の蛇口をひねればお湯が出てくるほど暑い季節になってきましたね。
私が小学生の頃は、水泳の授業では冷たいシャワーに凍えていた記憶がありますが、
昨今は暑すぎてプール中止もあると聞いて、驚きです。
みなさんも無理せず健康第一で、過ごしましょう！

さて、子どもが産まれてから親バカになってバカ度は日々更新中ですが、
労働もしっかりせねばと励んでいる日々です。

時短勤務で働く身として、仕事はテキパキ・短時間で済ませたい気持ちでいっぱいの私。
そんなWEBデザイナーに便利なChrome拡張機能をご紹介します。

Responsive Viewer

WEB制作時、コーディングでレスポンシブ対応のページの各画面幅を確認する時、
Chromeの検証でデバイスモードにして確認するも、見れるのは選択したデバイス１つだけ…
ひと画面で複数の幅のデバイスサイズで見たい！そんなアナタに！
Responsive Viewerはとってもおすすめ。
これさえあれば、最小サイズのスマホから最大サイズまで確認しながらコーディングが出来ます。
しかも、タブレットサイズ・PCサイズも一緒に見れるしスクロールの同期で同時に閲覧可能です。
何て便利なんだ！ぜひ使ってみてください。
Responsive Viewer

User-Agent Switcher for Chrome

WEB制作ではChrome、IE、Safariなど、各ブラウザでの見え方もコーディングで確認が必要です。
Chromeでは正常なのに、IE・Safariで崩れてる…など、近年では少なくなった気もしますが、
念のため確認を忘れない事も大事です。
でも、使用しているPCはWindowsで、Safariなんて見れない！
もしくは、MacだからIEなんて見れない！という方におすすめ。
User-Agent Switcher for Chrome
この拡張機能を使えば、ボタン一つでブラウザ環境を切り替えることができ、
手軽に確認できる事ができます。

PixelParallel by htmlBurger

さて、次に紹介するのはデザインとの比較ができる拡張機能です。
デザインからコーディングを起こして、デザインを比較する時、
ページとデザイン画を横に並べて確認…ってしてませんか？
この拡張機能は、Chlomeで表示したページにデザイン画を重ねて見ることができます！
1px単位で重ね合わせることができるので、完璧なデザイン再現をする事が可能です。
文字落ちなどの細かい箇所まで合わせるのは難しい点もありますが、
この拡張機能を利用することで、ほぼほぼデザイン通りにコーディングする事が可能です。
PixelParallel by htmlBurger

コーディングの記述もスピード感がないと期日に間に合わないよ～；；
と慌ててしまうのですが、確認作業がスムーズだとミスの修正もしやすく、
完成度も高くなることでしょう。

いかがでしたか？便利だと思ったらぜひ使ってみてくださいね！