品質マインド < CSSの基礎 No.1 適用方法 > CSSの基礎 No.2 セレクタ

CSSの基礎 No.1 適用方法

2010/04/26

CSSの基礎を学んだ経緯

CSSの基礎を新人に会社で教えることになった。そこで、ちょっと勉強したのでその記録に。

CSSの始まり

スタイルシート (Style Sheet) とは、ドキュメント文書において表示形式を制御する概念である。

HTML3.02において、データ構造だけでなく幅や色などデザインに関する要素や属性が追加された。

HTML4.01にて、「データ構造とデザインに関する部分は分けたほうがいいんじゃね？」とかいうSGMLの原点に戻ろうと言うことで

HTMLでデータ構造を記述し、スタイルシートを用いてデザインを制御すると言う方式をとることになった。

CSSのCascadingは重ね合わせる

スタイルシートの1つにCSS (Cascading Style Sheets) があり、HTML、XHTML、SVG、XUL、その他のマークアップ言語で書かれた文書のスタイルを指定するのに使われている。

CSSはW3Cによる勧告の一つである。HTML で表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備えている。

「Cascading=重ね合わせる」。要は複数のスタイルシートを用いてデザインを行うことができる。この場合、優先順位の考慮が必要となるがそれは別途記述する。

スタイルシートの特徴（メリット）

HTMLでのデザインは1つ1つの要素に幅や長さを指定する必要がある。

例えば、奇数行、偶数行で色を変更する場合、HTMLで記述する場合は奇数行、偶数行全ての要素に幅や長さを指定する必要がある。

しかし、CSSを用いることで要素セレクタ、クラスセレクタを用いることで複数の要素のデザインを設定することができる。

CSSを用いれば奇数行のデザイン、偶数行のデザインを用意するだけですむ。

この奇数行と偶数行の色が変更になった場合の手間を考えた場合、スタイルシートを利用した方が短時間の修正時間となる。

また、CSSを外部ファイルにし複数のファイルで読み込むことで共通のデザインを適用することができる。

スタイルシートの特徴から以下のメリットがある。

  1. 保守性
    CSSを一部変更することで、適用するHTMLのデザインを変更することができ、保守時間を削減することができる。
  2. 一貫性
    CSSを一部変更することで、適用するHTMLのデザインを変更することができ、表示の一貫性を保つことができる。
  3. カスタマイズ
    ユーザーが独自のスタイルシートを定義することで内容を変化させずに自分好みのデザインにすることができる。

スタイルシートの特徴（デメリット）

ブラウザの挙動が異なること。（スタイルシートの問題ではない。）

スタイルシート側でデザインを制御しようとしても閲覧者が使用するブラウザによって解釈が異なるため作成者側の意図したデザインで表示できない場合がある。

このあたりは、CSSハックを用いて対応することとなる。例えば、特定のブラウザでしか解釈できない方法で記述することで特定のブラウザの挙動のみを制御するといった方法である。

CSSの記述例

CSSの記述の一例を下記に示す。

p#id { color : #ff3300 }

"{" から "}" までの部分を宣言ブロックという
"p#id" をセレクタ（選択子）といい、スタイルが適用される対象をしめす
宣言ブロックとセレクタを合わせて規則集合という
"color : #ff3300" 部分を宣言という
宣言の内、":" より前（上例では "color"）をプロパティ（特性）という
宣言の内、":" より後（上例では "#ff3300"）を値という

CSSの適用方法

HTMLに適用するためには、下記の4つの方法がある。

  1. link要素を用いてCSSファイルを読み込む
    <link rel="stylesheet" href="default.css" type="text/css" />
    適用範囲はCSSファイルを読み込んだHTMLファイル
  2. style要素から@importを用いてCSSファイルを読み込む
    <style type="text/css">
    <!--
      @import url(default.css);
    -->
</style>
    適用範囲はCSSファイルを読み込んだHTMLファイル
  3. style要素からCSSのソースを適用する
    <style type="text/css">
    <!--
        h1 { color: #FF0000 }
    -->
</style>
    適用範囲は記述したHTMLファイルのみ
  4. 各要素へstyle属性を用いてCSSのソースを適用する
    < div style="color: #FF0000; background-color:#0000FF;width:100px">サンプル</div>
    適用範囲は記述した要素のみ
    サンプル

結論から言うと「link要素を用いてCSSファイルを読み込む」のみ知っていればいいです。

CSSの適用方法による優先順位

ちなみに同一のセレクタを用いて各適用方法を指定した場合の優先順位を試してみた。
以下のことから、CSSが同一のセレクタを用いた場合の優先順位は以下のようであった。
  1. 特定の要素にスタイルを記述する 「4」
  2. HTMLやXMLのヘッダ部にそのページ全体を対象にスタイルを定義する 「3」
  3. CSSのみを記述した外部ファイルを用意し、HTMLファイルのヘッダ部からリンクを張ってスタイルを参照させる 「1,2」
  4. 後勝ち。「1,2,3」

ユーザーCSS

ユーザが指定したCSSを適用して読み込むことができる。（ユーザスタイル）しかし、通常の指定では、ユーザスタイルは作成者スタイルシートより優先度が低いため適用されない。 しかし、!importantを宣言することにより、ユーザスタイルを崔周旋することができる。

  1. ユーザスタイルシート中で最重要指定された宣言 - ユーザーエージェントの設定のスタイルの中で!importantを宣言に付加する
  2. 作成者スタイルシート中で最重要指定された宣言 - 作成者が内容に付随させたスタイル中で!importantを宣言に付加する。
  3. 作成者スタイルシート中の通常の宣言
  4. ユーザースタイルシート中の通常の宣言
  5. デフォルトスタイルシートの宣言
2010/04/26
ページのトップへ戻る

品質マインド < CSSの基礎 No.1 適用方法 > CSSの基礎 No.2 セレクタ