Responsive Inspector

Web Information

レスポンシブのサイトチェックに役立つChrome拡張機能「Responsive Inspector」

Responsive InspectorはレスポンシブWebデザインのサイトチェックをするのに役立つGoogle Chrome拡張機能です。これを使うことでブレイクポイントの確認やCSS内でメディアクエリが使われている箇所を確認することができます。

[ads_center]

Responsive Inspectorの使い方

Responsive Inspector – Chrome ウェブストア

インストールすると画面右上に赤いアイコンが表示されるので、チェックしたいWebサイトを開いた状態でこのアイコンをクリックします。

すると、こんな感じでブレイクポイントの一覧をチェックすることができます。

Responsive Inspector

ちなみに青色で表示されるのはmin-widthが使われている時。逆にmax-widthだとオレンジになったりします。

よく使いそうな機能は以下の3点です。

  • ブレイクポイント一覧の確認
  • メディアクエリが使われている該当部分のコード
  • ブラウザ幅の変更

メディアクエリが使われている箇所を確認するには、バーにマウスオーバーした際に右側に表示されるアイコンをクリックします。

メディアクエリが使われている箇所

すると、以下のようにCSS内で該当する部分のコードをハイライトで教えてくれます。かなり便利ですね。

該当部分をハイライト

また、バー自体をクリックするとそれに応じたブラウザ幅のサイズに変更できます。瞬時にそのブラウザ幅に変更することが可能なのでとても使い勝手が良いです。

このようにレスポンシブで構築されたサイトをチェックするのにとても優れたツールだと思います。これ1つで色んな機能を使うことができるので、効率良くWeb製作したい方は試してみてはいかがでしょうか。

自由なサイズやカラー指定でダミー画像を生成できる「PLACEHOLD.IT」前のページ

フルスクリーンでカッコいいローディングアニメーション・FakeLoader.js次のページFakeLoader.js

関連記事

  1. Animated SVG Image Slider
  2. Chromeの複数タブをまとめて閉じるショートカットキー

    Web Information

    Google Chromeで指定した複数タブをまとめて閉じるショートカットキー

    ちょっと便利だったのでメモがてらご紹介します。Google Chrom…

  3. Evernoteでノートブック削減

    Web Information

    Evernoteでノートブックを削減する方法

    Evernoteのノートブック削減の仕方でちょっと戸惑ったのでメモがて…

  4. Copy All Urls

    Web Information

    たくさんのWebページURLを一気にコピーするChrome拡張機能「Copy All Urls」

    現在ひらいているタブのWebページURLをまとめて一気にコピーしたいと…

  5. Web Information

    今後もお世話になりそうな無料写真素材サイトをまとめてみた

    無料の写真素材サイトってたくさんあって迷っちゃうっていう人は結構いるか…

  6. ブラウザをメモ帳にするやり方

    Web Information

    ブラウザのURL欄に一行入力するだけでメモ帳にすることができる

    とてもおもしろかったのでご紹介。ブラウザのURL欄にたった一行入力する…

最近の記事

  1. TR153
  2. cheero Flat 10000mAh with Power Delivery 18W CHE-112
  3. SV-S251
  4. スラウェシ トラジャ

アーカイブ

PAGE TOP