path: root/files/ja/learn/css/first_steps/how_css_works/index.html

---
title: CSS はどう働くか？
slug: Learn/CSS/First_steps/How_CSS_works
tags:
  - Beginner
  - CSS
  - DOM
  - Learn
translation_of: Learn/CSS/First_steps/How_CSS_works
---
<p>{{LearnSidebar}}<br>
 {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p>

<p class="summary">CSS の基本と目的、簡単なスタイルシートの書き方を学んできました。このレッスンでは、ブラウザーが CSS と HTML を実際にウェブページとして表示していくさまを見ていきます。</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">前提条件:</th>
   <td>基本的なコンピューターリテラシー、 <a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされていること</a>、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの操作方法</a>についての基本的な知識、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a>を学習のこと)。</td>
  </tr>
  <tr>
   <th scope="row">目的:</th>
   <td>
    <p>ブラウザーが CSS と HTML を解析する方法、およびブラウザーが解釈できない CSS に遭遇したときに何が起こるかを理解する。</p>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="How_does_CSS_actually_work" name="How_does_CSS_actually_work">CSS は実際にはどう機能するのか？</h2>

<p><font>ブラウザーがドキュメントを表示するとき、ブラウザーはそのコンテンツをスタイル情報と結合する必要があります。</font><font>以下にリストしたいくつかの段階でドキュメントが処理されます。</font><font>これはブラウザーがウェブページを読み込むときに起こることを単純化したものであり、各ブラウザーで処理は異なるものの、おおよそ何が起こるかを示しています。</font></p>

<ol>
 <li>ブラウザーが HTML をロードします（ネットワークから受信するなど）。</li>
 <li>{{Glossary("HTML")}} が {{Glossary("DOM")}} (<em>Document Object Model</em>) に変換されます。DOM はコンピューターのメモリー内のドキュメントです。次のセクションで詳述します。</li>
 <li><font>その後ブラウザーは埋め込まれた画像やビデオなどの HTML ドキュメントにリンクされているリソースと CSS を取得します。</font><font>JavaScript はもう少し後に処理されるため、ここでは簡略化のため説明しません。</font></li>
 <li><font>ブラウザーは取得した CSS を解析し、要素、クラス、ID などセレクタの種類ごとに分類します。見つけたセレクターに基づいて、DOM のどのノードにどのルールを適用するかを決定し、スタイルを適用します（この中間ステップはレンダーツリーと呼ばれます）。</font></li>
 <li>レンダーツリーは、ルール適用後の構造にレイアウトされます。</li>
 <li>ページが画面に表示されます（この段階はペイントと呼ばれます）。</li>
</ol>

<p>簡単に図に表すと次のとおりです。</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/11781/rendering.svg" style="height: auto; max-width: 635px; width: 100%;"></p>

<h2 id="About_the_DOM" name="About_the_DOM">DOM について</h2>

<p><font><font>DOM にはツリーのような構造があります。</font><font>マークアップの各要素、属性、およびテキスト</font><font>は、ツリー構造の </font></font>{{Glossary("Node/DOM","DOM ノード")}} <font><font>になります。</font><font>ノードは他の DOM ノードとの関係によって定義されます。</font><font>要素は子ノードの親であり、子ノードには兄弟があります。</font></font></p>

<p><font>DOM は CSS とドキュメントのコンテンツが出会う場所であるため、DOM を理解すると CSS の設計、デバッグ、および保守に役立ちます。</font><font>ブラウザーの開発者ツールによって、どのルールが適用されるかを確認するために、アイテムを選択することで DOM にナビゲートされます。</font></p>

<h2 id="A_real_DOM_representation" name="A_real_DOM_representation">DOM の実際</h2>

<p>長く退屈な説明ではなく、例を用いて実際の HTML が DOM に変換される様子を見てみましょう。</p>

<p>以下のような HTML があります。</p>

<pre class="brush: html notranslate">&lt;p&gt;
  Let's use:
  &lt;span&gt;Cascading&lt;/span&gt;
  &lt;span&gt;Style&lt;/span&gt;
  &lt;span&gt;Sheets&lt;/span&gt;
&lt;/p&gt;
</pre>

<p><font><font>この場合 DOM では </font></font><code>&lt;p&gt;</code><font><font> 要素が親ノードです。子には、テキストノードと 3 つの </font></font><code>&lt;span&gt;</code><font><font> 要素をノードとして</font></font><font><font>持ちます。一方で </font></font><code>SPAN</code><font><font> ノードは親でもあり、テキストノードを子に持ちます。</font></font></p>

<pre class="notranslate">P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"
</pre>

<p>ブラウザーは上述の HTML をこのように解釈し、DOM ツリーを以下のようにレンダリングし出力します。</p>

<p>{{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}</p>

<div class="hidden">
<pre class="brush: css notranslate">p {margin:0;}</pre>
</div>

<h2 id="Applying_CSS_to_the_DOM" name="Applying_CSS_to_the_DOM">DOM への CSS 適用</h2>

<p>ドキュメントに CSS を追加して、スタイルを設定したとします。先ほどと同じ以下の HTML を使います。</p>

<pre class="brush: html notranslate">&lt;p&gt;
  Let's use:
  &lt;span&gt;Cascading&lt;/span&gt;
  &lt;span&gt;Style&lt;/span&gt;
  &lt;span&gt;Sheets&lt;/span&gt;
&lt;/p&gt;</pre>

<p>CSS は以下のものを適用します。</p>

<pre class="brush: css notranslate">span {
  border: 1px solid black;
  background-color: lime;
}</pre>

<p><font><font>ブラウザーは HTML 解析によって DOM を作成したのちに、CSS を解析します。CSS には唯一 </font></font><code>span</code><font><font> セレクターしかないため、ブラウザーは CSS を非常に迅速にソートできます。<br>
 3 つ の </font></font><code>&lt;span&gt;</code><font><font> </font><font>にそのルールを適用し</font><font>、最終的な視覚的表現を画面にペイントします。</font></font></p>

<p><font><font>結果、次のとおり出力されます。</font></font></p>

<p>{{EmbedLiveSample('Applying_CSS_to_the_DOM', '100%', 55)}}</p>

<p>次のモジュールの <a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a> ではブラウザーの開発者ツールを使用した CSS のデバッグと、ブラウザーが CSS を解釈する方法について詳しく学習します。</p>

<h2 id="What_happens_if_a_browser_encounters_CSS_it_doesnt_understand" name="What_happens_if_a_browser_encounters_CSS_it_doesnt_understand">ブラウザーが解釈できない CSS に遭遇したらどうなるのか？</h2>

<p><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS#Browser_support">以前のレッスン</a>では、<font>ブラウザーがすべての新しい CSS を実装するわけではないことを述べました。また</font><font>多くの人が最新バージョンのブラウザーを使用しているわけでもありません。</font><font>CSS は常に開発されており、ブラウザーがまだ認識できないような CSS セレクターや宣言に遭遇するとどうなるか疑問に思われるかもしれません。</font><br>
 <br>
 その答えは何もせず、CSS の次の部分に移動するということです。</p>

<p><font>ブラウザーがルールを解析しているときに、理解できないプロパティまたは値に遭遇した場合、ブラウザーはそれを無視して次の宣言に進みます。こういうことは、</font><font>プロパティまたは値のスペルが間違っている場合や、プロパティまたは値が新しすぎてブラウザーがまだサポートしていない場合に起こりえます。</font></p>

<p>同様に、ブラウザーが理解できないセレクターを検出した場合もそのルール全体を無視し、次のルールに進みます。</p>

<p><font>次の例では、色にイギリス英語のスペルを使用しているため、プロパティが正しくありません（訳注: color を誤って colour としてしまっている）。よって段落は青くなっていません。ただし、他の CSS はすべて適用されています。</font><font>無効な行のみが無視されます。</font></p>

<div id="Skipping_example">
<pre class="brush: html notranslate">&lt;p&gt; I want this text to be large, bold and blue.&lt;/p&gt;</pre>

<pre class="brush: css notranslate">p {
  font-weight: bold;
  colour: blue; /* colorプロパティのスペルが正しくありません */
  font-size: 200%;
}</pre>
</div>

<p>{{EmbedLiveSample('Skipping_example', '100%', 200)}}</p>

<p><font>この動作は非常に有用です。ブラウザが新しい CSS を理解しないとしてもエラーは発生しないということを理解した上で、新しい CSS を拡張機能として使用できるということを意味します。ブラウザーは新しい機能を取得するかしないかのどちらかになります。</font>カスケードが機能する方法と、同じ特定性を持つ2つのルールがある場合、ブラウザはスタイルシートの中で出会った最後の CSS を使うという事実と相まって、新しい CSS をサポートしていないブラウザにも代替案を提供することができます。</p>

<p><font><font>とりわけ新しいゆえに必ずしもサポートされているというわけではない、という値を使用する場合に有用です。例えば、一部の古いブラウザーは </font></font><code>calc()</code><font><font> をサポート</font><font>して</font><font>いません</font><font>。ボックスに対して予防的にピクセル単位の幅を指定しておき、その後 </font></font><code>calc()</code><font><font> で </font></font><code>100% - 50px</code><font><font> の幅を指定した場合、</font></font><font><font>古いブラウザーは前者（ピクセル指定）を使用し、理解できない </font></font><code>calc()</code><font><font> を無視します。かたや新しいブラウザーはピクセル指定を理解はできるものの、あとに記述された </font></font><code>calc()</code><font><font> の方を採用します</font><font>。</font></font></p>

<pre class="brush: css notranslate">.box {
  width: 500px;
  width: calc(100% - 50px);
}</pre>

<p>以降のレッスンで、さまざまなブラウザーをサポートするための多くの方法を検討していきます。</p>

<h2 id="And_finally" name="And_finally">最後に</h2>

<p>このモジュールはほぼ完了です。ただしもうひとつだけやっておいてほしいことがあります。次の記事の<a href="/ja/docs/Learn/CSS/First_steps/Using_your_new_knowledge">新しい知識を使う</a>にて実際のスタイリングをとおして CSS の腕試しをおこないます。</p>

<p>{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p>

<h2 id="In_this_module" name="In_this_module">このモジュール内</h2>

<ol>
 <li><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS">CSS とは何か？</a></li>
 <li><a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a></li>
 <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS の構造化</a></li>
 <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">CSS はどう働くか？</a></li>
 <li><a href="/ja/docs/Learn/CSS/First_steps/Using_your_new_knowledge">新しい知識を使う</a></li>
</ol>