15. How CSS works — Learn web development | MDN

Tatsuya Asami

7 min readJul 17, 2018

【所要時間】

1時間28分(2018年7月17日)

【概要】

・CSSとは何か学ぶ。
・どうやってHTMLをDOM(Document Object Model)に変換するか。
・どうやってCSSがDOMに適用できるか。
・基礎的なシンテックスや、実際にCSSがウェブページでどのように使われているか。

【要約・学んだこと】

・CSS(Cascading Style Sheets)はウェブページの見た目を作るものである。

・What is CSS?

ドキュメントは通常markup languageを使ったテキストファイルで構成される。
HTMLは最も一般的なmarkup languageで、SVGやXMLといったものもある。

ユーザーにドキュメントを見せるということは、閲覧者が使用可能な状態に変換することで、FirefoxやChromeなどのブラウザはモニタやプリンターに表示するようデザインされている。

・How does CSS affect HTML?

ウェブブラウザはドキュメントがどのように表示されるかCSSルールを適用する。
CSSルールは

・Propaties : 背景や、サイズなどのHTMLコンテンツの更新などを設定する数値の特性。
・Selector : HTMLドキュメント全てにCSSルールを適用するかどうかといった、更新された特性値を選択するelementを選ぶ。

これらから成り立つ。
CSSルールはstylesheetに含まれるCSSルールは、ウェブページの外観を決める。詳しくはCSS Syntaxを参照。

・A quick CSS example

<!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>

スタイルシートの中身は

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

p {
  color: red;
}

h1のテキストが青、背景が黄色、枠が幅1pxの黒のソリッド
pのテキストが赤

というのを意味する。

・Active learning: Writing your first CSS
CSSを書いてみよう。

<h1>Hello World!</h1><p>This is a paragraph.</p><ul>
 <li>This is</li>
 <li>A list</li>
</ul>
h1 {
color: red;
background-color: blue;
border: 2px solid green;}p {
color: blue;
}li {
background-color: pink;
}

このようになった。

・How does CSS actually work?

ブラウザがHTMLとCSSをDOM(Document object Model)に変換する。DOMはコンピュータメモリにあるドキュメントを表し、ドキュメントの中身とスタイルを結合する。
ブラウザがDOMの中身を表示する。

・About the DOM

DOMはツリー構造を持っている。マークアップ言語それぞれのelement, attribute, テキストは、ツリー構造のDOMノードとなる。ノードは他のノードの関係で定義される。子ノードの親ノードになるelementsもあり、子ノードは兄弟ノードも持つ。

DOMはCSSとドキュメントが出会う場所なので、デザインやデバッグを助け、CSSを維持する。

・DOM representation

下記のHTMLコードは

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

DOMでは

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

のようになる。PはSPANの親ノード、SPANはてtextの親ノードとなる。
ブラウザはこのようにHTMLコードを解釈して、ブラウザに出力する。

・Applying CSS to the DOM
先ほどのHTMLにCSSを加えると、ブラウザはHTMLを解析し、DOMを作成し、CSSを解析する。

・How to apply your CSS to your HTML

CSSをHTMLドキュメントに適用する方法は3種類ある。

External stylesheet
CSSを .css という拡張子で、別ファイルとして作成する。そして<link>elementからそのファイルを参照するやり方。

<!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>

この<link rel="stylesheet" href="style.css"> で

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

p {
  color: red;
}

このcssフィアルを参照する。もし何か変更する場合でもCSSを更新するだけでいいので、最適な方法。

2. Internal stylesheet
HTML headの中に<style>elementを入れるやり方。

<!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>

CSSファイルを直接修正できないcontent management systemで働くときなどで使いやすい方法である。しかし、もし修正が必要な場合、全てのページで繰り返し修正しなければならない。

3. Inline styles
１つのstyle attribute内に含まれる１つのelementだけに影響を与えるやり方。

<!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>

メンテナンスが大変なため、このやり方はやらない方がいい。読んで理解するのも難しい。

【わからなかったこと】

特になし

【感想】

学生時代部活のホームページ作っていた時に、Internal stylesheetで作っていたが、external stylesheetの方法を知ってやり直したのを思い出した。