https://qwerty.work/tags/%E3%82%AB%E3%83%90%E3%83%AC%E3%83%83%E3%82%B8/ Recent content in カバレッジ on qwerty.work Hugo -- gohugo.io ja-JP Mon, 11 Apr 2022 14:23:31 +0900 https://qwerty.work/post/2022/04/css-cleanup/ Mon, 11 Apr 2022 14:23:31 +0900 https://qwerty.work/post/2022/04/css-cleanup/ <h2 id="余計なスタイルシートのルールは削除したい">余計なスタイルシートのルールは削除したい </h2><p>WEBサイトを複製して制作した際に、過去の不要なCSSが残骸として残ってしまいますが、どれを残して、どれを削除すればよいか分からなくなり、そのまま残してしまうことがあります。使用しないルールをそのまま溜め込むと、ファイル容量が大きくなるので、どうにか簡単にお掃除できないかな？と探してみると、方法が見つかったのでメモ。</p> <h2 id="ブラウザのデベロッパーツールを使う方法">ブラウザのデベロッパーツールを使う方法 </h2><p>詳しい方法は以下のサイトが参考になります。</p> <div class="link-card"> <a href="https://thesaibase.com/unused-css/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://thesaibase.com/unused-css/" alt="https://thesaibase.com/unused-css/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://thesaibase.com/unused-css/</span> <span class="link-card-url">https://thesaibase.com/unused-css/</span> </div> </a> </div> <h3 id="chromeの場合">Chromeの場合 </h3><p>ChromeのデベロッパーツールF12を開き、[**]-[more tool]-[Coverrage]から使用されていないルールを確認できます。</p> <h3 id="edgeの場合">Edgeの場合 </h3><p>Edgeでも同様に開発者ツールF12を開き、[**]-[そのツール]-[カバレッジ]から確認することができます。</p> <p>ここで不要なルールがわかったとしても、手動で削除いしていくしかなさそうです。必要なルールだけを書き出す方法は見当たりませんでした。（やり方があるのかもしれませんが、わかりませんでした。）</p> <h2 id="その他のツールは">その他のツールは？ </h2><p>もっと簡単にDreamweaverの「HTMLのクリーンアップ」みたいに、Dreamweaver上でできないかな？と探してみましたが、見当たりませんでした。</p>