このページでは、CSS がブラウザでどのように動作するかについて解説します。 サンプル文書を解析して、そのスタイルの証左について明らかにします。
解説 : どのように CSS は動作するのか
Mozilla が文書を表示するとき、文書の内容とスタイル情報を組み合わせる必要があります。つまり、文書を 2 段階を経て処理します。
- 最初の段階では、Mozilla はマークアップ言語と CSS をDOM (Document Object Model) に変換します。DOM は文書をコンピュータのメモリ内に保持します。そして、文書をそのスタイルと組み合わせます。
- 2 段階目で、Mozilla は DOM を表示します。
マークアップ言語は、文書の構造を示すのにタグを利用します。タグはほかのタグをその開始から終了までの間に含むようなコンテナになりえます。
DOM は木構造を持ちます。それぞれのタグとマークアップ言語内の文章は、木構造のノード となります。DOM のノードはコンテナではありません。しかし、子ノードの親にはなりえます。
ノードはタグに相当し、エレメント とも呼ばれます。
あなたのサンプル文書の中で、<P> タグとその終了タグである </P> タグはコンテナを生成します。
<P> <STRONG>C</STRONG>ascading <STRONG>S</STRONG>tyle <STRONG>S</STRONG>heets </P> DOM では、この P ノードは親になります。子は、STRONG ノードとテキストノードになります。 STRONG ノードはそれ自身が親になり、子ノードとしてテキストノードを持つこととなります。 P ├─STRONG │ └─"C" ├─"ascading" ├─STRONG │ └─"S" ├─"tyle" ├─STRONG │ └─"S" └─"heets" |
DOM を理解することでデザインの助けや、CSS のデバッグとメンテナンスの助けになります。これは、DOM が CSS を文書に適用するときに利用されるからです。
実例 : DOM を解析する
DOM を解析するには、特別なソフトは必要ありません。 Mozilla の DOM Inspector (DOMi) を DOM の解析に利用できます。
あなたの Mozilla ブラウザであなたのサンプル文書を開いてください。
ブラウザのメニューバーから、ツール (B) – DOM インスペクタ (N)、もしくは、ツール – Web 開発 – 調査 を開いてください。
| もしあなたの Mozilla ブラウザが DOM Inspector をもっていなければ、ウェブツールコンポーネントをインストールしているかを確認してください。そして、その後このチュートリアルに戻ってください。
もし、DOM Inspector をインストールしたくなければ、この節をとばして、次のページに行ってください。 この節を飛ばすことは、この後のチュートリアルには影響しません。 |
DOMi にて、あなたの文書のノードを矢印をクリックすることで開いてください。
ノート HTML ファイル内に空白を入れると、DOMi ではいくつかの空白テキストノードができますが、無視してかまいません。
結果の一部分は次のように見えるはずです。ただし、どのノードを開いたかによりますが。
│ ▼╴P │ │ │ ▼╴STRONG │ │ └#text │ ├╴#text │ ►╴STRONG │ │ |
あるノードを選択したとき、DOM Inspector の右側のペインでそのノードについてより詳細を見ることができます。 たとえば、テキストノードを選択すると、DOM Inspector は右側のペインでテキストを表示します。
エレメントノードを選択した場合、DOM Inspector は選択したものを解析し、右側のペインに大量の情報を表示します。スタイル情報もその情報に含まれます。
| CSS をなぜ用いるかで作成したサンプルを開いてDOM Inspector で、STRONG ノードをクリックしてください。
DOM Inspector の右側のペインでどのノードの文字色が赤で通常の文字列よりも太字に設定されているか、を見つけだしてください。 |
次は ?
このページを理解するのが難しかったり、コメントがあれば、この記事の 議論 ページで述べてください。
実際に試してみたなら、すでにエレメントの最終スタイルを作り出すのに、一ヶ所以上からのスタイル情報が利用されていることをみたでしょう。
次のページでは、それらについてより詳細を説明しています。 接続と継承