レスポンシブレイアウト

レスポンシブレイアウトをチェックするのに便利な「WebDeveloper」アドオンはクロームにもあった

2014.05.06
この記事は約3分で読めます。

レスポンシブレイアウトをチェックするWEBサイトのレスポンシブデザインをチェックする便利なツールがあった。WEBサイトをパソコンやタブレット、スマフォで閲覧した場合にどのように見えるのかを一度に調べることができる「WebDeveloper」というアドオンである。これまでファイヤーフォックスでは使ったことはある。しかし、今はメインのブラウザがクロームになっているのでしばらく使っていなかった。それが、クロームのアドオン（拡張機能）に「WebDeveloper」があり、「WebDeveloper」で「view-responsive-layouts」というボタンをクリックするだけで、今閲覧しているWEBサイトのPC画面やスマフォ画面の一覧を表示してくれるという優れた機能があった。

「WebDeveloper」の「view-responsive-layouts」では６種類の画面サイズを同時にチェックできる。

６種類の画面サイズを同時にチェックできる

上記の画面例は「マメジン」のサイトを表示した例である。
６種の画面サイズは以下のとおり

  • Mobile portrait (320×480)
  • Mobile landscape (480×320)
  • Small tablet portrait (600×800)
  • Small tablet landscape (800×600)
  • Tablet portrait (768×1024)
  • Tablet landscape (1024×768)

Web Developer のchromeアドオン紹介の画面
（https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhmより）

webdeveloperchromeアドオン

「WebDeveloper」のインストール方法

「WebDeveloper」をグーグルクロームにインストールする手順は以下のとおり。

  • ブラウザの右上にある三本線のアイコンをクリックする
  • プルダウンメニューが表示されたらその中にある「設定」をクリックする
  • 設定画面の左側にある「拡張機能」をクリックする
  • 拡張機能一覧の画面になるので一番下までスクロールし「他の拡張機能を見る」をクリックする
  • chromeウェブストアの画面になり「ストアを検索」の窓に「WebDeveloper」と打ち込みenterを押す
  • 検索結果一覧の「アプリ」の下の「拡張機能」の一番上に「WebDeveloper」があるはずなのでその右横にある「＋無料」をクリックする
  • 新たしい拡張機能の確認というメッセージが表示されたOKをクリックする
  • 無事にインストールされたら、アドレスバーの右横に歯車アイコンが表示されるはず

webdebeloperインストール後の状態

「WebDeveloper」の利用方法

「WebDeveloper」でレスポンシブレイアウトをチェックする方法は以下のとおり。

  • レスポンシブレイアウトをチェックしたいWEBサイトを表示させる
  • アドレスバー右横の歯車アイコンをクリックする
  • 「Resize」→「View Responsive Layouts」をクリックする

すると、そのWEBサイトを６つの画面サイズで表示した場合の画面６つが表示される。
（上記のマメジンWEBサイト閲覧の例のとおり）

「WebDeveloper」は他にも様々な機能があるが、この「View Responsive Layouts」だけでも十分に役に立つ。便利なアドオンなので入れておいてはどうだろう。