How CSS works

今回は、CSSとは何か。どのようにHTMLに影響するか。どのように動作するか。DOMについて。CSSをどのようにHTMLに適用するか。
について、説明していく。

今回は以下の記事を利用した。


What is CSS?

CSSとは、Cascading Style Sheetsのイニシャルである。これは、ドキュメントをユーザーにどのようにみせるかを決める言語のことである。特に、どのようなスタイル、レイアウト等など。

ドキュメントとは、マークアップ言語を使って構成されたテキストファイルのことである。 HTMLは主なマークアップ言語であるが、他にも、SVGXMLがある。

ユーザーにドキュメントを見せることは、それを利用可能な形に変えることを意味している。 Firefox, Chrome or Internet ExplorerのようなBrowsersでは、視覚的にドキュメントをデザインされる。例えば、パソコンのスクリーンやプロジェクターやプリンタなどである。

How does CSS affect HTML?

Web browserはCSSのルールをドキュメントに適応する。CSSのルールは以下から作られている。

properties、これはHTMLの内容がどのようにディスプレイされるかをアップデートする。例えば、要素の幅を50%にする、背景を赤にするなど。

selector、これは要素を選ぶものである。例えば、CSSのルールをすべてのparagraphに適応するなど。

A quick CSS example

<h1><p> を含むHTMLドキュメントを見てみよう。

CSSの2つの例を見てみよう。

一つ目は、h1 についてである。それは、3つのpropertyとvalueがある。
1行目:テキストの色を青に

2行目:背景を黄色に

3行目:1pixelの黒枠を

二つ目は、p についてである。テキストの色を赤にする。

これらのコマンドより、以下の結果が表示される。

Active learning: Writing your first CSS

以下のボックスを用いて、インプットできる。いくつかのサンプルを加えよう。

もしミスをしたら、Resetボタンを押してリセットしよう。

HTML Input

CSS Input

Output


How does CSS actually work?

ブラウザがドキュメントを表示したとき、ドキュメントの内容をスタイル情報を結びつける。2つのステージにドキュメントはすすむ。

  1. ブラウザがHTMLとCSSをDOMに変える。
  2. ブラウザはDOMの内容を表示する。

About the DOM

DOM(Document Object Model)とはxmlやhtmlの各要素、たとえば<p>とか<img>とかそういった類の要素にアクセスする仕組みのことである。
DOMには、3つの構造がある。メークアップ言語のテキストの要素、性質は DOM nodeになる。そのnodeは、他のDOMnodeとの関係に定義される。

DOMがCSSとドキュメントの内容がどこで合うかということなので、DOMを理解することはCSSをデザインする、デバックする、維持するのを助ける。

DOM represe ntation

どのようにDOMとCSSがともに動くかを例を通して見てみよう。

DOMで、<p>との関係したnodeは親である。子はテキストnodeまた<span>と関連したnodeのことである。そのSPANnodeは親である。

これは、どのようにブラウザがHTMLsnippetを通訳するかである。

Applying CSS to the DOM

CSSをドキュメントに加える。

以下のようにCSSを適応する。

ブラウザはHTMLを分析・DOMを作る。その後、CSSを分析する。


How to apply your CSS to your HTML

CSSをHTMLに適応する方法は3つある。

External stylesheet

external stylesheetはCSS

CSSファイル:

この方法が ベストである。

Internal stylesheet

internal stylesheetとは、CSSファイルを含まないものである。その代わりに<style>の中にCSSを使う。

これは、有効な場面がある。しかし、Externalstylesheetほど有効ではない。

Inline styles

Inline stylesは、要素を影響するCSS宣言である。

しなければならないとき以外は、これはしないように!!おすすめしません。これは本当に悪い。CSSの情報とHTMLの構造情報をミックスしている。CSSを読んだり理解することを余計に難しくする。

最後に

これで今回の記事を終わります。

Like what you read? Give Takayuki Horisawa a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.