レスポンシブなサイトの各横幅での表示を一気に確認できるChorme拡張機能「Emmet Re:View」が超絶便利!

レスポンシブなサイトの表示を一気に確認できるChrome拡張Emmet Re:Viewが超便利

レスポンシブWEBデザインの確認はパターンが多すぎて確認が途中で嫌になっちゃう。よっひー(@yosiakatsuki)です。

スマホ・タブレット・PC…表示の確認がなかなか大変なレスポンシブWEBデザインの確認。

そんな大変な作業でも「Emmet Re:Vew」というChorme拡張機能を使えばだいぶラクができると思うので、1度試しに使ってみてはいかがでしょう。

Chorme拡張機能「Emmet Re:Vew」

見ているサイトのCSSからブレークポイントを見つけて自動でブレークポイント毎のプレビューしてくれるという素晴らしい拡張機能。

サイトのブレークポイント毎の確認ができる

1クリックでサイトのレスポンシブな表示パターンをすべて一気にプレビューできるのはホント便利です!

「Emmet Re:Vew」

拡張機能の追加

まずはChrome拡張機能の追加から。

プレビューはボタンをクリックするだけ!

Chrome拡張機能の追加が完了したら、確認したいサイトを表示して、「Emmet Re:View」のボタンをクリックします!

実行は拡張機能のボタンを押すだけ

すると、CSSからブレークポイントを読み取って、しきい値毎のプレビューを作成してくれます!

しきい値毎のプレビューを作成してくれる

プレビューがどの横幅で表示されているかは、プレビュー下の表示で確認できます。

表示されている画面幅はプレビュー下部で確認

よっしーのひとこと

よっひー

僕はいつもブラウザの横幅をゴニョゴニョやって確認していましたが、この拡張機能はほんと便利ですね!

表示幅によって項目が変わるナビゲーションの確認がだいぶラクになります。これはヤミツキ。

ではまた。