CSSで未使用のセレクタを見つけて削除しちゃうよ!

一度リリースしたサイトがほったらかで済むならいいんですけど、度重なる仕様変更や機能追加でCSSがカオスにしてしまう人っていますよね〜。

はい、僕です!Tomicciです!

綺麗に書かれていないCSSに手を加えるとき、かなり大変だったりしますよね。
できるだけ日常的に綺麗に書く努力をしたいものです。

今回はCSSで未使用のセレクタを見つけて、削除する方法をご紹介します!
ブラウザのプラグインとかのツールもあるみたいですが、Google Chromeの開発者ツールに標準で搭載されているようなのでこれを使ってみます。

Google Chromeの開発者ツールを立ち上げる


みんなが大好きなChromeの開発者ツールを立ち上げます。
Macの場合は、ショートカットが「Command + Option + I」です。

続いて、「Audits」を選び、「Audits Present State」にチェックした状態で「Run」ボタンを押します。リロードしてる場合は「Reload Page And Audit On Load」を選択してもいいでしょう。

「Remove unused CSS rules」欄のCSSファイル名を展開すると、

使われていないCSSのプロパティが表示されます。
画像の例では、このページでは68%の記述が使われていないと出ていますね!

不要なCSSプロパティを削除する

このページでは使われていないCSSプロパティも、他のページでは使用されているかもしれません。
そういったものを、不要な記述と間違えて削除してしまわないように注意しましょう。

他のページのCSSや、JavaScriptに該当のCSSプロパティがないか、テキストエディタで検索などして本当に不要な値であれば削除するといいですね。

プロから直接学べるプログラミングスクールの紹介!PHPコースあり!

WordPressの勉強につまづいたら、マンツーマンでプロから習うのがオススメ

担当の指導者(メンター)が付いてくれるTechAcademyなら、分からないことをどんどん質問して解決できます!

WordPressコース

【参考記事】HTMLの勉強ならTechAcademy(テックアカデミー)のフロントエンドコースが短期集中でオススメ!

Web制作会社が立ち上げたWebデザイナー育成スクール Web塾超現場主義

Web制作に実際に携わっている講師陣が、現場で通用するスキルを伝授します!卒業後は転職支援、仕事紹介などを行っており、フリーランス独立する道を探すこともできそうです。

初心者の方はもちろん更なるスキルアップを目指す方も、現場のクリエイターと実務経験を積むことで、WEB業界への就職や自宅でSOHOとして活躍する近道となります。
Facebookアカウントでコメント

※本コメント機能はFacebookによって提供されており、この機能によって生じた損害に対してザ サイベースは一切の責任を負いません。

ABOUTこの記事を書いた人

とみっち

数年前までバンド活動してました。ブログ、サイト運営で食べてます。フリーランス歴7年のWebクリエイター。飄々と生きています。これでも育児頑張ってます。長野市出身。埼玉県川越市在住。【興味】音/Web/車(GolfV GTI等)/田舎/旅/酒 ※自然の音からデスメタルまで聴きます。@tomicci 詳しいプロフィール【運営サイト】 ザ サイベース おと風景