MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

How CSS works

この翻訳は不完全です。英語から この記事を翻訳 してください。

CSS (Cascading Style Sheets) を利用すると、すばらしい外見のウェブページを作成できますが、その裏側ではどのように動作しているのでしょう?この記事は、CSS とは何か、ウェブブラウザーが HTML を Document Object Model (DOM) に切り替える方法、CSS が DOM のパーツに適用される方法、とても基本的な文法例、実際に CSS をウェブページ内に含める方法を説明します。

前提条件: 基本的なコンピューターリテラシー、基本的なソフトウェアのインストールファイル操作 の基本的な知識、HTML の基本(Introduction to HTML の学習)。
目的:

CSS とは何か、どのように動作するかを基礎的なレベルで学ぶ。

CSS とは何か?

前述した通り、CSS は文書がユーザーにどう表示されるかを指定する言語です — スタイル、レイアウトなど。

文書 は、普通は マークアップ言語 を使用したテキストファイルです — HTML が最も一般的なマークアップ言語ですが、SVGXML のような他のマークアップ言語に出くわしたこともあるでしょう。

ユーザーに対してドキュメントを 表示 することは、閲覧者に対して利用できる形式に変換することを意味します。FirefoxChromeInternet Explorer のような ブラウザー は、文書を視覚的に、例えば、コンピューターの画面、プロジェクターやプリンター上に表示するよう設計されています。

CSS はどのように HTML に作用するか?

ウェブブラウザーは、CSS 規則 を文書に適用して、表示され方に作用します。CSS 規則は、以下の形式です:

  • プロパティ のセットで、HTML コンテンツが表示される方法を更新するための値を持ちます。例えば、親要素の 50% の幅で、背景を赤にする
  • セレクター、プロパティの値を更新して適用したい要素を 選択 (セレクト) します。例えば、HTML 文書内のすべての段落に CSS を適用する

CSS 規則のセットは、スタイルシート 内でウェブページの見た目を決定します。次の記事ので、CSS の文法がどのようになっているかについて詳しく学べます — CSS 文法

CSS の簡単な例

上述の説明は、意味を持っているかもしれませんし、持っていないかもしれません。簡単な例を使って明確にしましょう。まず、<h1><p> が含まれる単純な HTML 文書を使います (スタイルシートは <link> 要素を使用して HTML に適用されていることに注意してください):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

2 つの規則だけが含まれたとても簡単な CSS の例を見てみましょう:

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

一つ目の規則は、h1 セレクターで始まり、<h1> 要素にプロパティの値が適用されることを意味します。規則内には 3 つのプロパティと値が含まれます (それぞれのプロパティ/値のペアは 宣言 と呼ばれます):

  1. 一つ目のペアで、テキストの色を青に設定します。
  2. 二つ目は、背景色を黄色に設定します。
  3. 三つ目は、1 ピクセルの幅、実線 (点線、破線などではない)、黒色の枠線を引きます。

二つ目の規則は、p セレクターで始まり、<p> 要素にプロパティの値が適用されることを意味します。1 つのプロパティと値が含まれ、テキストの色を赤に設定します。

ウェブブラウザーでは、上のコードで以下の出力が生成されます:

A simple webpage containing a header of Hello World, and a paragraph that says This is my first CSS example

これはそれほどきれいではありませんが、少なくとも CSS がどのように動作するかの考え方がわかります。

実習: 初めての CSS 記述

では、自分で CSS を少し書いてみましょう。以下の「入力」領域を使い、編集可能な例で行いましょう。上の例で見たものに似たやり方で、簡単な HTML と、CSS プロパティを使用します。簡単な宣言を CSS に追加して、HTML のスタイリングをしてください。

入力を間違えた場合、リセット ボタンを使用して、いつでもリセットできます。行き詰った場合は、答えを見る ボタンを押して、解答を確認してください。

How does CSS actually work?

When a browser displays a document, it must combine the document's content with its style information. It processes the document in two stages:

  1. The browser converts HTML and CSS into the DOM (Document Object Model). The DOM represents the document in the computer's memory. It combines the document's content with its style.
  2. The browser displays the contents of the DOM.

About the DOM

A DOM has a tree-like structure. Each element, attribute and piece of text in the markup language becomes a DOM node in the tree structure. The nodes are defined by their relationship to other DOM nodes. Some elements are parents of child nodes, and child nodes have siblings.

Understanding the DOM helps you design, debug and maintain your CSS because the DOM is where your CSS and the document's content meet up.

DOM representation

Rather than a long, boring explanation, let's take an example to see how the DOM and CSS work together.

Let's assume the following HTML code:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

In the DOM, the node corresponding to our <p> element is a parent. Its children are a text node and the nodes corresponding to our <span> elements. The SPAN nodes are also parents, with text nodes as their children:

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"

This is how a browser interprets the previous HTML snippet —it renders the above DOM tree and then outputs it in the browser like so:

Applying CSS to the DOM

Let's say we added some CSS to our document, to style it. Again, the HTML is as follows:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

If we apply the following CSS to it:

span {
  border: 1px solid black;
  background-color: lime;
}

The browser will parse the HTML and create a DOM from it, then parse the CSS. Since the only rule available in the CSS has a span selector, it will apply that rule to each one of the three spans. The updated output is as follows:

How to apply your CSS to your HTML

There are three different ways to apply CSS to an HTML document that you'll commonly come across, some more useful than others. Here we'll briefly review each one.

External stylesheet

You've already seen external stylesheets in this article, but not by that name. An external stylesheet is when you have your CSS written in a separate file with a .css extension, and you reference it from an HTML <link> element. The HTML file looks something like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

And the CSS file:

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

This method is arguably the best, as you can use one stylesheet to style multiple documents, and would only need to update the CSS in one place if changes were needed.

Internal stylesheet

An internal stylesheet is where you don't have an external CSS file, but instead place your CSS inside a <style> element, contained inside the HTML head. So the HTML would look like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

This can be useful in some circumstances (maybe you're working with a content management system where you can't modify the CSS files directly), but it isn't quite as efficient as external stylesheets — in a website, the CSS would need to be repeated across every page, and updated in multiple places if changes were required.

Inline styles

Inline styles are CSS declarations that affect one element only, contained within a style attribute:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

Please don't do this, unless you really have to! It is really bad for maintenance (you might have to update the same information multiple times per document), and it also mixes your presentational CSS information with your HTML structural information, making the CSS harder to read and understand. Keeping your different types of code separated and pure makes for a much easier job for all who work on the code.

The only time you might have to resort to using inline styles is when your working environment is really restrictive (perhaps your CMS only allows you to edit the HTML body.)

What's next

At this point you should understand the basics of how CSS works, and how browsers deal with it. Next, you'll move on to learn about CSS syntax.

ドキュメントのタグと貢献者

 このページの貢献者: dskmori
 最終更新者: dskmori,