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. グラデーションクリエーター

    Web Information

    カラフルなグラデーションのCSSを作成できるChrome拡張機能「グラデーションクリエーター」

    グラデーションクリエーターというChrome拡張機能を使ってみました。…

  2. iPhoneのテザリングをBluetoothでMacと接続

    Web Information

    iPhoneのテザリングをBluetoothでMacと接続する方法

    先日、ちょっとテザリングをしなきゃいけない状況になったのでその時のやり…

  3. Web Information

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

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

  4. Web Information

    音を鳴らしたくない場所で便利!iPhoneのアラームをバイブだけに設定するやり方

    例えば電車の中やカフェなんかで、ちょっとだけ仮眠しようとした時にiPh…

  5. Web Information

    iPhoneの「選択項目の読み上げ」機能を使ってテキストやメモを音声で聞くやり方

    iPhoneでもテキストやメモを選択して音声で聞くことができるっていう…

  6. Web Information

    Webデザインを参考にする時に役立つWebデザインギャラリーのまとめ

    毎回Webデザインで悩み始めるとその都度よさげなギャラリーサイトなんか…

最近の記事

  1. Aモーニングセット
  2. 白トリュフの塩パンやメロンパンなど
  3. 東京都現代美術館
  4. スーリア バターチキン
  5. そそそ 明太クリームそうめん

アーカイブ

PAGE TOP