ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

便利 ! 使われていないCSSの記述を見つけ出す方法(Google chrome使用)

2016年12月12日
chromecss

コーディング作業で、主に元々の制作者がだれか分からないような運用案件でよくあるかと思うのですが、「あれ?このcssの記述いらなくない?」ということってありますよね。

そんな時に、Google chromeを使って、サイト内で使われていないcssを簡単に見つけ出す方法があるのでご紹介します。

コーディング経験者なら普段から使っているであろう、デベロッパーツールの要素の検証で確認することができるので、その使い方を下記に記載します。

不要なcssの記述があるか調べたい対象サイトをブラウザで開き、要素の検証(ブラウザ上で右クリックをしたらあります)を開きます。

css_delete010

Elements、Console、Sources、、、など出てくるかと思いますが、その中にあるAuditsという項目があるので、それをクリック。

css_delete03

Run、Clearというボタンが出てくるので、Runをクリックする

css_delete04

「Remove unused CSS rules」使われていないcssという項目があるので、その矢印をクリック

css_delete05

cssファイルごとに、使われていない記述のパーセンテージが表示されるので、調べたいcssファイルの矢印をクリック

css_delete06

すると、使われていないcssセレクタが確認できるので、あとは削除していくだけ!

この時に注意しなくてはいけないのは、他のページと共有でcssを使っている場合は、削除したことによって、表示崩れなどの影響が出てしまう可能性があるので要確認して削除するようにする。

これで無事、不要なcssの記述を削除できますね!

関連記事

  • 超簡単!cssを使って背景画像のみ透過にする方法2016年11月5日 超簡単!cssを使って背景画像のみ透過にする方法
  • 【css】文章中に改行がある時に、行頭を揃える小ワザ2016年8月17日 【css】文章中に改行がある時に、行頭を揃える小ワザ
  • 【css】ウィンドウ幅いっぱいの画像背景を指定する方法2016年1月20日 【css】ウィンドウ幅いっぱいの画像背景を指定する方法
  • 【css】アニメーションとして使える transition について2016年1月23日 【css】アニメーションとして使える transition について
  • Chromeで文字コード確認・変更ができない!? そんな時の解決方法!2017年7月1日 Chromeで文字コード確認・変更ができない!? そんな時の解決方法!

スポンサードリンク

  • 最近の投稿

    • test 投稿test 投稿2023年2月8日
    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
  • カテゴリー

    • AMP (3)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.