2018年03月28日(水)
Chrome デベロッパーツールの隠し機能が便利!CSSのセレクタ・プロパティ・値を1クリックで見つける方法
Chrome デベロッパーツールは便利ですけど、こんな便利な機能もあったのですね。
要素に適用されているCSSのセレクタ・プロパティ・値が、どのCSSファイルのどこに記述されているのか1クリックで見つけ出すことができる便利なテクニックを紹介します。
![]()
1クリックで見つけ出す方法は偶然、誤操作で見つけたそうです。
ツイートをきっかけに、オフィシャルページにショートカットとして追加されました。
隠し機能だったんでしょうか。使い方は、簡単です。
ページを開いて、Chrome デベロッパーツールを起動(command+option+I)し、調べたい要素を指定します。![]()
author:
コリス
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログ
‹ PREV![]()
22万円分の商用で使えるテクスチャや背景、ブラシ、エフェクト素材が、3,500円で購入できる期間限定セール
NEXT ›![]()
これ知ってる? Web屋が押さえておきたい海外の便利ツール25選
関連記事
Ads
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログコリスの記事『Chrome デベロッパーツールの隠し機能が便利!CSSのセレクタ・プロパティ・値を1クリックで見つける方法』についてまとめています。
この記事は特にChromeについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のコリスで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとコリスの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。