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. Web Information

    タイポグラフィを向上させるjQueryプラグイン15

    テキストやタイポグラフィに関する機能を向上させてくれる15のjQuer…

  2. Adobe Creative Cloud Cleaner Tool

    Web Information

    AdobeのCreative Cloudでインストールトラブルが起きた時は「CS Cleaner T…

    AdobeのCreative Cloudでインストールトラブルが起きた…

  3. coolHue

    Web Information

    クールなグラデーションがたくさん用意されたWebサイト「coolHue」

    coolHueはクールで素敵なグラデーションがたくさん用意されたWeb…

  4. 現時点の動画のURLをコピー

    Web Information

    YouTube動画で指定した時間から再生できるURLをコピーする方法

    YouTube動画のURLを友達などに伝えるときに「◯分◯秒から再生さ…

  5. CSS Dig

    Web Information

    CSSをプロパティから解析してくれるChrome拡張機能「CSS Dig」

    CSS DigというChrome拡張機能を使ってみました。今まであまり…

  6. iPhone画面を横向きで固定

    Web Information

    iPhone画面を横向きに固定してロックさせる方法

    iPhoneを使っていると画面が縦になったり横になったりすることがあり…

最近の記事

  1. ブラジルイパネマ
  2. 梅しば
  3. BM-IBCDH13RD
  4. 雪
  5. ホットのドリップ

アーカイブ

PAGE TOP