RWDの定番チェックツールとして期待できる「Responsive Inspector」が便利かも

Advertisement

レスポンシブWebデザインで作ったサイトをチェックするための定番ツールになりそうな「Responsive Inspector」というChrome拡張機能が先日リリースされていたので、ちょっとご紹介。なんとこの拡張機能、1つのツールで以下の3つができてしまいます。

  1. ページに設置されたメディアクエリの確認
  2. ブラウザのウィンドウ幅の変更
  3. ページ全体のスクリーンショット

過去にいろいろなツールを使ってきましたが、この3つの機能をまとめてできるのはかなり嬉しいツールですね。まだβ版で、スクリーンショットはJPGしか保存ができませんが、開発者サイトのコメント欄には、次のリリースではPNGでも保存できるようにしたいと書いてありました。今後の機能改善にも期待できそうです。使い方も以下のように簡単です。

メディア・クエリの確認

インスペクターを開くと、以下のように閲覧しているページに設定されているメディアクエリが色のついたバーで表示されます。

オレンジ … max-widthを使ったメディアクエリ
グリーン … min/max-widthの両方を使ったメディアクエリ
ブルー ….. min-widthを使ったメディアクエリ

このブログではmin-widthしか使っていないので、以下のようにブルーのバーしか表示されませんが、min/maxの両方の条件が指定されいるメディア・クエリはグリーン、maxのみが指定されているものはオレンジで表示されます。

以下の画像はThe Next WebでResponsive Inspectorを使った際の表示ですが、min、min/max、maxの3つのタイプのメディア・クエリが使われているのが一目でわかります。

ウィンドウ幅の変更

ウィンドウ幅の変更をするためには、以下の2つの方法があります。

  1. メディアクエリのバーをクリックする
  2. ルーラーから幅変更アイコンをクリックする

メディアクエリのバーをクリック

上の画像にあるメディアクエリを表すバーをクリックすると、メディアクエリが指定されている幅にブラウザのウィンドウ幅が変更されます。

ルーラーから幅変更アイコンをクリック

以下のルーラーの部分にマウスオーバーすると以下のようにアイコンが2つ表示されます。

ルーラー上でカーソルを左右に動かすと、表示される幅が変更されるので、変更したいウィンドウ幅にあわせて左側のアイコンをクリックすると、そのサイズにブラウザのウィンドウ幅が変更されます。

ページ全体のスクリーンショット

ページ全体のスクリーンショットは、ウィンドウ幅の変更と同じ要領で行えます。ルーラーにマウスオーバーした際に表示される右側のカメラ・アイコンをクリックすると、ページ全体のスクリーンショットを作ってくれます。

残念ながら、いまのところJPGでしか保存できませんが、開発者がPNGで保存するオプションを追加する旨をコメント欄に書いていたので、次のリリースに期待したいところです。ちなみに撮ったスクリーンショットは、オンラインのポートフォリオ共有サイト「Behance」にも直接共有できるそうです。

ということで、レスポンシブWebデザインで作ったウェブサイトの定番チェックツールになりそうなChrome拡張機能の「Responsive Inspector」でした。インストールは以下のChrome Web Storeからどうぞ。開発者サイトにはツールの紹介ビデオもありました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です