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検索で日付や期間指定をして検索結果を表示する方法

    Googleで調べたいものを検索した時に「どうも古い情報しか出てこない…

  2. Web Information

    Google Chromeで今見ているページのツイート数を知ることができる拡張機能「Twitterつ…

    何気に便利じゃないですかね。Google Chromeで今見ているペー…

  3. Videolicious

    Web Information

    iPhoneで動画を複数つなぎ合わせて簡単に作品を制作できるアプリ「Videolicious」

    iPhoneで複数の動画を簡単につなぎ合わせて作品を制作することができ…

  4. 新刊チェッカー for Kindle

    Web Information

    Kindleの最新情報(セールや新刊)が分かるiPhoneアプリ「新刊チェッカー for Kindl…

    Kindle(キンドル)のセールや新刊などの最新情報をiPhoneから…

  5. Web Information

    iPhoneでアラームを設定するやり方

    今まで特にiPhoneでアラームを使う機会がなかったんですが、先日ちょ…

最近の記事

  1. mill オイルヒーター
  2. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP