path: root/files/ja/tools/css_coverage/index.html

---
title: CSSカバレッジ
slug: Tools/CSS_Coverage
tags:
  - Experimental
  - Firefox
  - ガイド
  - ツール
  - 初心者
translation_of: Tools/CSS_Coverage
---
<p>{{ToolsSidebar}}</p>

<div class="note">
<p>この機能は実験的なもので、Firefoxではまだ利用できません。</p>
</div>

<p>CSSカバレッジは、Firefox開発者向けのコマンドセットで、使い古されていないCSSを指摘し、初期レンダリングに必要なCSSファイルの部分を示すことで、乱雑なCSSを解くのに役立ちます。</p>

<p>これらのツールは、「使用」の定義が複雑であるため、多少実験的ですが、実際に何が起こっているかを理解する手助けとなることが期待されます。</p>

<p>それらが一般的に使用される方法は次のとおりです。</p>

<ul>
 <li>カバレッジトラッカーを開始("<code>csscoverage start</code>")する</li>
 <li>あなたのウェブサイトの代表的なページにアクセスする</li>
 <li>トラッカーを停止("<code>csscoverage stop</code>")し、スタイルエディタで未使用のルールを表示する</li>
 <li>各ページに表示されるルールを含むレポートを表示("<code>csscoverage report</code>")する</li>
</ul>

<p>もう1つのコマンド("<code>csscoverage oneshot</code>")では、効果的に実行("<code>csscoverage start; csscoverage stop</code>")できます。</p>

<h2 id="「使用」が意味するのは">「使用」が意味するのは?</h2>

<h3 id="TLDR">TL;DR:</h3>

<p>CSSカバレッジは、以下の例の<span style="color: #008000;"><code>tag#id.class</code></span>セレクタが一連のWebページに存在するかどうかを確認します。</p>

<pre class="brush: css">@media thing {
  tag#id.class:hover {
    foo: bar;
  }
}</pre>

<h3 id="なぜ">なぜ?</h3>

<p>あなたのCSSに次のものが設定されているとします。テスト中にマウスがスパンに入っていない場合。 ルールは使用されるでしょうか？</p>

<pre class="brush: html">&lt;style&gt;
  span:hover {
    color: purple;
  }
&lt;/style&gt;

&lt;span&gt;Test&lt;/span&gt;
</pre>

<p>技術的には <code>span:hover</code> は、「テスト」という言葉がいつも紫色ではなかったという点で使われていませんでした。しかしながら CSS のカバレッジは実際にルールが関連性があるか無関係かを調べることです。また <code>span:hover</code> は明らかにページとの関連性があります。</p>

<p>同様に、あなたのCSSが次のものを持っているとします：</p>

<pre class="brush: html">&lt;style&gt;
  @media tv {
    span {
      color: purple;
    }
  }
&lt;/style&gt;

&lt;span&gt;Test&lt;/span&gt;
</pre>

<p>関連性を測定するには、テレビを自分の環境に接続する必要がありますか？</p>

<p>しかし、「使用」は関連性だけではありません...<br>
 次のルールは適切ですか？</p>

<pre class="brush: html">&lt;style&gt;
  span { }
&lt;/style&gt;

&lt;span&gt;Test&lt;/span&gt;
</pre>

<p>ページに影響を及ぼさず安全に削除できるため、関連性がないと主張することができます。</p>

<p>しかし、次のものはどうでしょうか？</p>

<pre class="brush: html">&lt;style&gt;
  span {
    -o-text-curl: minor;
  }
&lt;/style&gt;

&lt;span&gt;Test&lt;/span&gt;
</pre>

<p>それが使用されているかどうかを知っているかどうかは、おそらく検索エンジンと分析技術の使用を必要とし、おそらくサイトのサポートされているブラウザのバージョンに関する知識です。 これらはすべて特異点までこのツールの範囲を超えているとみなされます。</p>

<p>以下の例で div ルールが "used" とみなされる理由についても説明します。</p>

<pre class="brush: html">&lt;style&gt;
  div { color: red; }
  span { color: blue; }
&lt;/style&gt;

&lt;div&gt;&lt;span&gt;Test&lt;/span&gt;&lt;/div&gt;
</pre>

<p>div ルールはページの最終的なレンダリングには影響しないので未使用だと主張できますが、この代替定義を検討してください：</p>

<pre class="brush: html">&lt;style&gt;
  div { color: red; border: none; }
  span { color: blue; }
&lt;/style&gt;
</pre>

<p>ボーダールールが使用されているかどうかを知ることは難しく、他にもさまざまなバリエーションがあります。 「使用」の定義をさらに複雑にする不透明度、可視性および色変換を考慮する。 物事を単純にするために、 "use"はセレクタが要素にマッチすることを意味します。</p>

<p>明らかに、テスト中にタッチしたスタイルシートに、テスト中に見られない特定のページだけのルールが含まれている場合は、そのルールが使用されているにもかかわらず、そのルールを「未使用」としてマークします。 実際にCSSファイルからルールを削除する前に、二重チェックの価値があります。</p>

<h2 id="警告">警告</h2>

<p>知っておくべきこと：</p>

<ul>
 <li>URL はテストの期間を通して参照されるたびに同じバイトセットを返すものとします。</li>
 <li><a href="/ja/docs/Web/CSS/Alternative_style_sheets">代替スタイルシート</a>をトラッキングしません。</li>
</ul>

<h2 id="バグ">バグ</h2>

<p>私たちはいくつかの重要なバグに取り組んでいます：</p>

<ul>
 <li>現在、スタイルシートを追加するなど、JavaScript による CSSOM の変更を追跡していません。<a href="https://bugzil.la/1007533">bug 1007533</a> を参照してください。</li>
 <li>スタイルエディタのマークアップはライン単位で行われていますが、現在はソースマップを処理していないため、圧縮された CSS でこれを実行すると混乱します。<a href="https://bugzil.la/1007073">bug 1007073</a> を参照してください。</li>
 <li>@keyframe の情報はプリロード要約に含まれません。<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1034062">bug 1034062</a> を参照してください。</li>
</ul>

<h2 id="代替候補">代替候補</h2>

<p>Firefox を使わずに未使用のCSSを見つけるのに役立つ複数のツールがあります。</p>

<ul>
 <li><a href="https://www.jitbit.com/unusedcss/">Unused CSS</a> <em>は再帰的にサイトをクロールして未使用の CSS セレクタを検出します。広告のない無料のオンラインツールです。</em></li>
 <li><a href="https://github.com/purifycss/purifycss">PurifyCSS </a>はインストール後にコンソールツールとして使用できる NPM パッケージです</li>
 <li><a href="https://unused-css.com/">unused-css.com </a>別のオンラインツール。これは無料ではありません。</li>
</ul>