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製作したい方は試してみてはいかがでしょうか。

関連記事

  1. iPhoneのスクリーンショットを片手で撮る

    Web Information

    iPhoneのスクリーンショットを片手で撮る方法(AssistiveTouch活用)

    iPhoneのスクリーンショットを片手で撮りたいと思う時ってありますよ…

  2. Feedlyでカテゴリーのフォルダ名を変更

    Web Information

    Feedlyでカテゴリーのフォルダ名を変更するやり方

    Feedlyでカテゴリーのフォルダ名を変更するやり方をメモしておきます…

  3. Web Information

    Google検索を英語だけの結果で表示させる簡単な方法

    Google検索をする時に日本であまり情報が少ないものを検索することが…

  4. Google翻訳の音声や使用例

    Web Information

    Google翻訳で音声や単語の使用例を確認できるのがとても便利

    Google翻訳を何気なく使っていて気づいたんですが、音声や単語の使用…

  5. Web Information

    Gmailでゴミ箱に捨てたメールを元に戻す(復元)やり方

    ちょっと分かりづらかったのでメモしときます。Gmailでゴミ箱に捨てた…

  6. YouTube動画をループ再生する方法

    Web Information

    YouTube動画をカンタンにループ再生(リピート)する方法

    YouTubeでお気に入りの動画などを見ているときに、ループ(リピート…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP