WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： マークアップ >CSS

コーディングをしている時に、CSSの記述をしていく中で、だんだんとCSSが増えていき本来そのページ内で使用しなくてもいい記述が混在してきてしまうことがありませんか？それを一つづつ見て消していく作業はなかなか骨が折れる作業ですよね。。
でも不要な記述は消してファイル容量を軽くしたり、綺麗なソースコードにしておきたい・・・という方におすすめのツールをご紹介します。
※GoogleChrome専用のツールになります。

【Coverage】機能を設定しよう

まず初めに、【Coverage】機能を使えるようにするための設定をしていきます。

まず、右上にあるメニューをクリックし「その他のツール」から「デベロッパーツール」を選択します。

そうするとデベロッパーツールの画面が表示されるので、さらにメニューをクリックします。

【More tools】をクリックし、【Coverage】を選択します。

画面下の方に、【Coverage】が追加されました！
追加されただけではツールが動かないので、「click the reload button to reload and start capturing coverage.」をクリックします。

※初めて起動する方は「click the record button ● to start capturing coverage.」が出てくるかと思います。同様にクリックをして機能を動作させましょう。

使用していないCSSセレクタのチェック方法

「Coverage」の機能を動作させたら、このようにページ内で読み込んでいるファイルを表示してくれます。
横棒グラフのようなものが表示されていますが、この赤と青の色分けがポイントになります！

赤は閲覧中のページで使用していない要素があることを示しており、青は閲覧中のページで使用している要素があることを示しています。
説明用の画像内では、parts.cssにカーソルをあわせて確認をしています。

現在閲覧しているページで、使用している要素と使用していない要素両方ありますが、不要な記述であれば削除をしてファイルを少しでも軽くしてあげましょう。
Coverageツールを使用することで、効率的に必要な記述かどうか確認することができるので便利ですね！

まとめ

人力では大変な作業もこういったツールを活用することで、あっという間に確認することができますね。
Chromeをインストールしてあればどなたでも使えますのでぜひ活用してみてください！

【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)