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. Googleブログ検索

    Web Information

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

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

  2. Nexus 5の自動回転を止める設定

    Web Information

    Nexus 5で画面の自動回転を止める設定方法

    Nexus 5で画面の自動回転を止める設定方法をご紹介します。縦画面で…

  3. iPad Airのテンプレート素材(PSD)

    Web Information

    デザインやモックアップに役立ちそうなiPad Airのテンプレート素材(PSD)

    iPad Airのテンプレート素材(PSD)がとてもよかったのでメモが…

  4. Web Information

    Yahoo!知恵袋もRSS登録することができるだっていうのを最近知った

    Yahoo!知恵袋もRSS登録することができるんですね。最近知りました…

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

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

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

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP