[h1] Cascading Style Sheetの例

CSSの意味

Cascading Style Sheetのサンプルページです。

このページを生かすには、HTMLのソースとリンク先のCSSファイルとを、ブラウザによるレンダリング結果と見比べながら確認してみると良いでしょう。

Cascadeというのは段々になった滝のことを表す語です。上流から下流へと水が流れ落ちる様子を思い浮かべてください。 CSSでは同様に、上流側での変更が下流側にも反映されるが、下流側でさらに変更したことは、それが優先される、という仕様になっています。

このページでは、p要素（段落）全般は次のようなスタイル指定をしています。 そこで、段落部分の文字が大きめ、空白も大きめです。 しかし、olやdlといった箇条書き系の要素のスタイルは指定していないので、defaultの1emの文字であり、小さめに表示されています。 また、p要素の文字色の指定はしていませんが、body要素の文字色は白、article要素の文字色は暗い青です。 それぞれの場所で、文字色が替わっていることがわかります。

p {
		font-size: 1.2em;
		padding: 12px;
	}

このように、書式は順に受け継がれていきます。

Box model

CSSでは画面上の配置要素をBox modelと呼ばれる矩形領域で規定しています。

1. 要素selector
2. クラスselector
3. ID selector

上記の例では、ol要素を点線で囲み、その中のli要素の背景を黄緑色で塗っています。ol要素やli要素はblock要素なので、特に他に配置する指定のない上記の例では、article要素のcontent領域内全域で左右に広がっている様子が見られます。

3番目のように、文字列部分にだけ色をつけたい場合は、span要素を用いればできます。特定の幅だけ色づけしたい場合ですと、ol要素のboxの右側に別のboxを並べたりするか、幅を指定することになります。ただし、この場合は、windowサイズを狭くした場合、特に、元々画面横幅の狭いスマートフォンなどでの見え方について十分注意をしておく必要があります。

Selector

CSSでは、selectorと呼ばれるHTML内の範囲を示す部分で影響範囲を指定します。 Selectorには、

1. 要素selector
2. クラスselector
3. ID selector

の3段階があり、後者ほど指定範囲が狭くなりますので、同一の影響（property; 後述します）を与える構文では、後者の内容が優先されます。

前記の「CSSの意味」内で、「滝」は、p要素内です。 しかし、id指定されたspan要素でmarkupされているため、そのid属性によるselectorでの背景色：青の指定が有効になっています。 また、p要素は文字の大きさをbody要素の1.2倍に設定していますので、大きめの文字になるなどしています。

selectorを複数並べる書き方によって、様々な意味を持ちます。

p, h1.red, h2

カンマで区切った書き方。それぞれのselectorが並列に扱われる。同じ宣言blockを適用したいとき、同一の記述を繰り返さないようにするための記法。

article p

下位要素セレクタ。この場合、article要素内のp要素であるp要素にだけ適用される。

article > p

子要素セレクタ。この場合、article要素内の直接の子要素であるp要素にだけ適用される。

h2要素は、水平線以降の部分はarticle要素内に入っているため、ここでは、下線が引かれるようになっています。

また、前記Box model内で説明に用いたolと、この節でのol要素は、HTMLとしては全く同一です。しかし、このol要素の入っているarticle要素のid属性が異なっており、その下位要素セレクタなどを用いた指定とすることで、異なる見栄えを実現しています。

Declaration

規則集合の波括弧（{ }）内は、Declaration blockと呼ばれ、selectorで指定したHTML内の影響範囲に対して、実際に適用する書式を書きます。

ここの例では、table要素にかなり複雑な指定を行っています。下位要素セレクタなどをうまく使うことで、HTMLの記述を単純化出来ている様子を見てみてください。table要素は、tr要素、th, td要素と入れ子の深い複雑なHTMLマークアップ要素です。 このため、デザインの指定にもどこの部分への指定かを考えながら行う必要があります。 cssでの指定の様子と併せてHTMLの記述で、要素やclass指定を行っている様子を観察してみてください。