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拡張機能だと思います。

ClassyCountdownスタイリッシュな円形カウントダウンのjQueryプラグイン「ClassyCountdown」前のページ

フォーム内にあるplaceholderの利便性を高めてくれるjQueryプラグイン「FlowupLabels.js」次のページ

関連記事

  1. Animated SVG Image Slider
  2. Google翻訳の音声や使用例

    Web Information

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

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

  3. Googleブログ検索

    Web Information

    Googleブログ検索がなくなったと思ったらまだちゃんとあった

    Googleブログ検索を検索結果ページから絞り込んでよく利用していたん…

  4. LOCKJOY(ロックジョイ)

    Web Information

    待ち受けを見てロック解除でポイントが貯まるLOCKJOY(ロックジョイ)を使ってみた

    iPhoneで待ち受けを見てロックを手順通り解除するだけでポイントが貯…

  5. Web Information

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

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

最近の記事

  1. TR153
  2. cheero Flat 10000mAh with Power Delivery 18W CHE-112
  3. SV-S251
  4. スラウェシ トラジャ

アーカイブ

PAGE TOP