Inspector」というChrome拡張機能が先日リリースされていたので、ちょっとご紹介。なんとこの拡張機能、1つのツールで以下の3つができてしまいます。ページに設置されたメディアクエリの確認ブラウザのウィンドウ幅の変更ページ全体のスクリーンショット過去にいろいろなツールを使ってきましたが、この3つの機能をまとめてできるのはかなり嬉しいツールですね。β版で、スクリーンショットはJPGしか保存ができませんが、開発者サイトのコメント欄には、次のリリースではPNGでも保存できるようにしたいと書いてありました。今後の機能改善にも期待できそうです。使い方も以下のように簡単です。メディア・クエリの確認インスペクターを開くと、以下のように閲覧しているページに設定されているメディアクエリが色のついたバーで表示されます。min-widthを使ったメディアクエリこのブログではmin-widthしか使っていないので、以下のようにブルーのバーしか表示されませんが、min/maxの両方の条件が指定されいるメディア・クエリはグリーン、maxのみが指定されているものはオレンジで表示されます。Inspectorを使った際の表示ですが、min、min/max、maxの3つのタイプのメディア・クエリが使われているのが一目でわかります。ウィンドウ幅の変更ウィンドウ幅の変更をするためには、以下の2つの方法があります。メディアクエリのバーをクリックするルーラーから幅変更アイコンをクリックするメディアクエリのバーをクリック上の画像にあるメディアクエリを表すバーをクリックすると、メディアクエリが指定されている幅にブラウザのウィンドウ幅が変更されます。ルーラーから幅変更アイコンをクリック以下のルーラーの部分にマウスオーバーすると以下のようにアイコンが2つ表示されます。ルーラー上でカーソルを左右に動かすと、表示される幅が変更されるので、変更したいウィンドウ幅にあわせて左側のアイコンをクリックすると、そのサイズにブラウザのウィンドウ幅が変更されます。ページ全体のスクリーンショットページ全体のスクリーンショットは、ウィンドウ幅の変更と同じ要領で行えます。ルーラーにマウスオーバーした際に表示される右側のカメラ・アイコンをクリックすると、ページ全体のスクリーンショットを作ってくれます。残念ながら、いまのところJPGでしか保存できませんが、開発者がPNGで保存するオプションを追加する旨をコメント欄に書いていたので、次のリリースに期待したいところです。ちなみに撮ったスクリーンショットは、オンラインのポートフォリオ共有サイト「Behance」にも直接共有できるそうです。Inspector」でした。Storeからどうぞ。開発者サイトにはツールの紹介ビデオもありました。author「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。ウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。使ったときに戸惑ったことのまとめレスポンシブなデザインにするなら知っておきたい。コメントをキャンセルメールアドレスが公開されることはありません。