CSS Dig

Web Information

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

CSS DigというChrome拡張機能を使ってみました。今まであまり見たことがなかった新しい方法で解析してくれます。これは結構便利ですね。CSSのプロパティを選択してそれがどこでどのように使用されているのかをチェックすることができます。

[ads_center]

CSS Digの使い方

CSS Dig

CSS Dig

ChromeにCSS Digをインストールするとツールバーにアイコンが追加されます。CSSを解析したいページを開いた状態でそのアイコンをクリックすると以下のような画面が表示されます。

CSS Dig

そのページで読み込まれているスタイルシートが表示されます。デフォルトでは全部にチェックがついているので、解析したくないスタイルシートがあればチェックを外しておけばOKです。

準備が出来たらSTART DIGGINGというボタンをクリックします。すると以下のようにCSSで使われているプロパティの一覧が表示されます。

CSSプロパティの一覧

あとは調べたいプロパティを選択すれば右側にあるパネルにそのプロパティがどのように使用されているかが表示されます。

プロパティの詳細

こんな感じで簡単にプロパティの詳細情報を調べることができるので、とても便利です。シンプルな使い方なので、いつでも気軽にチェックすることができますね。

Webサイトを制作する時には入れておいて損はないChrome拡張機能だと思います。

関連記事

  1. Web Information

    Google +1(プラスワン)ボタンを今更ながら設置してみた

    当ブログには現在Twitter、Facebook、はてなブックマークの…

  2. Web Information

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

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

  3. KindleでEメールアドレスを追加
  4. Web Information

    ホームページを直感的で簡単に作成できるWixの新エディタを使ってみた【PR】

    プロが作ったようなホームページを簡単に作成できるウェブサイトビルダー「…

  5. Bootstrap Vertical Carousel
  6. Web Information

    はてなブックマークでブクマした時に自動でTwitterへ投稿する連携方法

    はてなブックマークで好きな記事をブクマした時に自動でTwitterへ投…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP