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. Chromeのブックマークバーの表示・非表示を切り替えるショートカットキー
  2. Web Information

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

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

  3. Web Information

    かなり便利なCSSフレームワーク「960 Grid System」を使ってみた

    ちょっと前から気になっていたCSSフレームワーク「960 Grid S…

  4. Web Information

    iPhoneでストップウォッチを使うにはデフォルトアプリ「時計」が便利

    iPhoneでストップウォッチを使うにはデフォルトで入っているアプリ「…

  5. KindleでEメールアドレスを追加
  6. Chromeで翻訳する方法

    Web Information

    Chromeで外国語のWebサイトのページを翻訳する方法

    Chromeで普段使用する言語以外の外国語のWebサイトにアクセスする…

最近の記事

  1. KMC-80BK
  2. 味噌ラーメン〜旨辛にんにく味噌〜
  3. STP-XH70
  4. 久保田城

Instagram始めました

Facebookページ

PAGE TOP