---
title: CSS カスケード入門
slug: Web/CSS/Cascade
tags:
  - CSS
  - CSS カスケードと継承
  - Reference
  - カスケード
  - ガイド
  - スタイル
  - スタイルシート
  - レイアウト
translation_of: Web/CSS/Cascade
---
<div>{{CSSRef}}</div>

<p><strong>カスケード</strong>は、異なるソースから来るプロパティ値を組み合わせる方法を定義するアルゴリズムです。これは<em>カスケーディング</em>スタイルシートという名前で強調されているように、 CSS の中心を占めるものです。<span class="seoSummary">この記事では、カスケードとは何か、 {{Glossary("CSS")}} <a href="/ja/docs/Web/API/CSSStyleDeclaration">宣言</a>をカスケードする順番、そしてウェブ開発者にどのように影響するかを説明します。</span></p>

<h2 id="Which_CSS_entities_participate_in_the_cascade" name="Which_CSS_entities_participate_in_the_cascade">どの CSS エンティティがカスケードに関係するか</h2>

<p>CSS 宣言のみが、つまりプロパティ/値の組だけが、カスケードに加わります。つまり、宣言以外のエンティティを含む <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>、例えば<em>記述子</em>を含む {{ cssxref("@font-face")}} などは、カスケードには加わりません。これらの場合、カスケードには全体としての @-規則のみがカスケードに加わります。ここで、 <code>@font-face</code> は <code><a href="/ja/docs/Web/CSS/@font-face/font-family">font-family</a></code> 記述子で識別されます。いくつかの <code>@font-face</code> 規則に同じ記述子が定義されていた場合は、全体から見て、最も適切な <code>@font-face</code> が考慮されます。</p>

<p>大部分の @-規則 — {{cssxref("@media")}}, {{cssxref("@document")}}, {{cssxref("@supports")}} の中など — に含まれる宣言はカスケードに加わりますが、 {{cssxref("@keyframes")}} に含まれる宣言は加わりません。 <code>@font-face</code> と同様に、 @-規則全体のみがカスケードアルゴリズムによって選択されます。</p>

<p>最後に、 {{cssxref("@import")}} および {{cssxref("@charset")}} は特定のアルゴリズムに従い、カスケードアルゴリズムには影響を与えないことに注意してください。</p>

<h2 id="Origin_of_CSS_declarations" name="Origin_of_CSS_declarations">CSS 宣言のオリジン</h2>

<p>CSS カスケードアルゴリズムの役割は、 CSS プロパティの正しい値を決定するために CSS 宣言を選択することです。 CSS 宣言は、 <strong>{{anch("User-agent stylesheets", "ユーザーエージェントスタイルシート")}}</strong>, <strong>{{anch("Author stylesheets", "ページ作成者スタイルシート")}}</strong>, <strong>{{anch("User stylesheets", "ユーザースタイルシート")}}</strong> など、さまざまなものに由来します。</p>

<p>スタイルシートはこれらの異なる起源に由来しますが、それらは範囲が重複しています。これを機能させるために、カスケードアルゴリズムはそれらの相互作用を定義します。</p>

<h3 id="User-agent_stylesheets" name="User-agent_stylesheets">ユーザーエージェントスタイルシート</h3>

<p>ブラウザーには、任意の文書に既定のスタイルを提供する基本的なスタイルシートがあります。これらのスタイルシートには<strong>ユーザーエージェントスタイルシート</strong>という名前が付けられています。実際のスタイルシートを使用するブラウザーもあれば、コードでシミュレートするブラウザーもありますが、最終的な結果は同じです。</p>

<p>一部のブラウザーでは、ユーザーがユーザーエージェントスタイルシートを変更することができます。ユーザーエージェントスタイルシートに関するいくつかの制約は HTML 仕様書によって設定されていますが、ブラウザーにはまだ多くの自由度があります。つまり、ブラウザーごとに大きな違いがあります。開発プロセスを簡素化するために、ウェブ開発者は多くの場合、 CSS リセットスタイルシートを使用して、特定のニーズに合わせて変更を開始する前に、共通のプロパティ値を既知の状態にします。</p>

<h3 id="Author_stylesheets" name="Author_stylesheets">ページ作成者スタイルシート</h3>

<p><strong>ページ作成者スタイルシート</strong>は、スタイルシートの最も一般的な種類です。これらは、特定のウェブページまたはサイトのデザインの一部としてスタイルを定義するスタイルシートです。ページの作成者は、1つ以上のスタイルシートを使用して文書のスタイルを定義します。スタイルシートは、ウェブサイトの外観 (テーマ) を定義します。</p>

<h3 id="User_stylesheets" name="User_stylesheets">ユーザースタイルシート</h3>

<p>ウェブサイトのユーザー (または読者) は、ユーザーの希望に合わせて使い勝手を調整するように設計された独自の<strong>ユーザースタイルシート</strong>を使用して、多くのブラウザーでスタイルを上書きすることを選択できます。</p>

<h2 id="Cascading_order" name="Cascading_order">カスケード順</h2>

<p>カスケードアルゴリズムは、文書の各要素の各プロパティに適用する値を見つける方法を決定します。</p>

<ol>
 <li>最初に、さまざまな起源からすべての規則をフィルタリングして、特定の要素に適用されるルールのみを保持します。つまり、セレクターが指定された要素と一致し、適切な <code>media</code> @-規則の一部である規則を意味します。</li>
 <li>次に、これらのルールをその重要度、つまり、 <code>!important</code> が後に続くかどうか、およびその起源に従って並べ替えます。カスケードは上流から下流に向けて行われます。つまり、ユーザー定義のスタイルシートによる <code>!important</code> の値は、ユーザーエージェントスタイルシートによる通常の値よりも優先されます。
  <table class="standard-table">
   <thead>
    <tr>
     <th scope="col"></th>
     <th scope="col">起源</th>
     <th scope="col">重要性</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>1</td>
     <td>ユーザーエージェント</td>
     <td>normal</td>
    </tr>
    <tr>
     <td>2</td>
     <td>ユーザー</td>
     <td>normal</td>
    </tr>
    <tr>
     <td>3</td>
     <td>作成者</td>
     <td>normal</td>
    </tr>
    <tr>
     <td>4</td>
     <td>アニメーション</td>
     <td></td>
    </tr>
    <tr>
     <td>5</td>
     <td>ユーザーエージェント</td>
     <td><code>!important</code></td>
    </tr>
    <tr>
     <td>6</td>
     <td>作成者</td>
     <td><code>!important</code></td>
    </tr>
    <tr>
     <td>7</td>
     <td>ユーザー</td>
     <td><code>!important</code></td>
    </tr>
    <tr>
     <td>8</td>
     <td>トランジション</td>
     <td></td>
    </tr>
   </tbody>
  </table>
 </li>
 <li>同等の場合は、どれを選択するかに値の<a href="/ja/docs/Web/CSS/Specificity">詳細度</a>が考慮されます。</li>
</ol>

<h2 id="Resetting_styles" name="Resetting_styles">スタイルの初期化</h2>

<p>コンテンツのスタイルの変更が完了した後で、それ自体を既知の状態に戻す必要がある状況に陥ることがあります。アニメーションやテーマの変更などの場合に起こるかもしれません。 CSS プロパティ {{cssxref("all")}} を使用すると、 CSS 内の (ほぼ) すべてのものを既知の状態に素早く戻すことができます。</p>

<p><code>all</code>では、すべてのプロパティを初期 (既定) 状態、前のレベルのカスケードから継承した状態、特定の起源 (ユーザーエージェントスタイルシート、作成者スタイルシート、またはユーザースタイルシート) のいずれかに直ちに復元することを選択できます。または、プロパティの値を完全にクリアすることもできます。</p>

<h2 id="CSS_animations_and_the_cascade" name="CSS_animations_and_the_cascade">CSS アニメーションとカスケード</h2>

<p><a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>は、 {{cssxref("@keyframes")}} @-規則を使用して、状態間のアニメーションを定義します。キーフレームはカスケードされません。つまり、 CSS は常に単一の {{cssxref("@keyframes")}} から値を取得し、複数の値を混合することはありません。</p>

<p>複数のキーフレームが適用された場合は、最も重要な文書で定義されている最新のものを選択しますが、すべてを組み合わせることはありません。</p>

<h2 id="Example" name="Example">例</h2>

<p>さまざまなオリジンにまたがる CSS の複数のソースを含む例を見てみましょう。ここには、ユーザーエージェントスタイルシート、2つの作成者スタイルシート、ユーザースタイルシート、および HTML 内のインラインスタイルがあります。</p>

<p><strong>ユーザーエージェント CSS:</strong></p>

<pre class="brush:css;">li { margin-left: 10px }</pre>

<p><strong>作成者 CSS 1:</strong></p>

<pre class="brush:css;">li { margin-left: 0 } /* 初期化のため */</pre>

<p><strong>作成者 CSS 2:</strong></p>

<pre class="brush:css;">@media screen {
  li { margin-left: 3px }
}

@media print {
  li { margin-left: 1px }
}
</pre>

<p><strong>ユーザー CSS:</strong></p>

<pre class="brush:css;">.specific { margin-left: 1em }</pre>

<p><strong>HTML:</strong></p>

<pre class="brush:html;">&lt;ul&gt;
  &lt;li class="specific"&gt;1&lt;sup&gt;st&lt;/sup&gt;&lt;/li&gt;
  &lt;li&gt;2&lt;sup&gt;nd&lt;/sup&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>

<p>この場合、 <code>li</code> および <code>.specific</code> 規則内の宣言を適用する必要があります。 <code>!important</code>として宣言されている宣言はないため、優先順位は、ユーザースタイルシートまたはユーザーエージェントスタイルシートの前の作成者スタイルシートです。</p>

<p>ここでは3つの宣言が競合しています。</p>

<pre class="brush:css;">margin-left: 0</pre>

<pre class="brush:css;">margin-left: 3px</pre>

<pre class="brush:css;">margin-left: 1px</pre>

<p>最後のものは (画面上で) 無視され、最初の2つは同じセレクターを持つため、同じ詳細度があります。したがって、次に選択されるのは同じ詳細度のうちの最後のものです。</p>

<pre class="brush:css;">margin-left: 3px</pre>

<p>カスケードアルゴリズムは詳細度アルゴリズムの前に適用されるため、ユーザー CSS で定義された宣言はより高い詳細度を持ちますが、選択されないことに注意してください。</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS4 Cascade")}}</td>
   <td>{{Spec2("CSS4 Cascade")}}</td>
   <td>プロパティをカスケードレベルに戻すことができる {{CSSxRef("revert")}} キーワードを追加。</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Cascade")}}</td>
   <td>{{Spec2("CSS3 Cascade")}}</td>
   <td>カスケードオリジンの上書を削除。 W3C 標準で使用されなかったため。</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS2.1", "cascade.html", "the cascade")}}</td>
   <td>{{Spec2("CSS2.1")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("CSS1", "#the-cascade", "the cascade")}}</td>
   <td>{{Spec2("CSS1")}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">とても簡単な CSS カスケードの紹介</a></li>
 <li>{{CSS_Key_Concepts}}</li>
</ul>