Cascading Style Sheets解説

書き方


コメント

CSSでは、「/*」と「*/」で囲まれた部分をコメントとして扱います。コメントは複数行にわたって書くこともできます。

/* ここはコメントアウトされます。 */
/*
  コメントは一行で書いても、
  複数行で書いてもいいです。
  説明を書くのにも使えます。
*/

基本

一番シンプルな書き方は次のようなものです。

p{color:blue}

これは、まず「セレクタ」と「宣言」という二つの部分に分けられます。

セレクタ{宣言}

「セレクタ」は「スタイルシートを適用する対象」で、「宣言」は「適用するスタイル指定の内容」です。上の例では、「p」が「セレクタ」、「color:blue」が「宣言」にあたります。

さらに「宣言」は、「プロパティ」と「値」とに分けられます。

セレクタ{プロパティ:値}

上記の例では、「color」が「プロパティ」に、「blue」が「値」に当たります。「プロパティ」によって取る「値」は決まっています。この辺りの詳しいところは「Properties」を参照して下さい。

宣言の複数指定(宣言のグループ化)

たとえばスタイル指定を次のように書いたとします。

p{color:blue}
p{line-height:1.4em}
p{text-indent:1em}

しかしこれでは書き方に無駄がありますね?というわけで、スタイルシートでは次のようにして、複数のスタイル指定を書くことが出来ます。

p{color:blue;
  line-height:1.4em;
  text-indent:1em}

一つのセレクタに対して複数の宣言を書く場合、それぞれの宣言を「;(セミコロン)」で区切ります。これを忘れると、

p{color:blueline-height:1.4emtext-indent:1em}

の様に解釈され、このスタイル指定は意味をなさなくなります。

複数の要素への適用(セレクタのグループ化)

さて、スタイルシートを使っていると同じスタイル指定を複数の要素に適用したいということがあります。そんな時は次のように書きます。

h1,h2,h3{background-color:#e0e0e0}

上の例を見ても分かるように、それぞれの要素名を「,(カンマ)」で区切って記述します。当然ながら「,」を忘れて「h1h2・・・」の様に書いてしまうと要素名が間違っている(「<h1h2>」なんてタグはない)ということになり、指定したスタイル指定は適用されないことになります。
ちなみに「h1 h2 h3{ba・・・}」の様に書いてしまうと別の意味になってしまいます。(関連:文脈によるスタイル指定

セレクタ・宣言共に複数指定

上記の説明から分かると思いますが、次のように書くこともできます。

em,strong{color:#ff0000;
          font-size:large;
          background-color:#000000}

class属性とid属性

HTMLを書いていくうちに、同じ要素を使っていても「ここは別のスタイルを指定したい」という時があると思います。そんな時には、class属性やid属性を用いることによって新たなスタイル指定を適用することが出来ます。class属性は「.(ピリオド)」、id属性は「#(シャープ)」を使って指定します。

class属性で指定する時id属性で指定する時
一般例要素名.クラス名{宣言}要素名#id名{宣言}
実例pre.example{color:blue}pre#ex-1{color:red}

また、要素名を省略して指定すると全ての要素に対して指定したことになります。

.samp{color:black}
#myname{font-size:x-large}

注その1: class名やid名は、その性質から文書構造上意味のある名前を付けるほうが望ましいと考えられます。(例えば「名字の色は青」にしたいなら、「.surname{color:blue}」とするなど)

注その2: id属性で、ある要素に名前を付けたとき、同じHTML文書中の他の要素にその名前を付けることはできません。つまり、同名のid属性の付いた要素が同じHTML文書中に2つ以上あってはいけません。(もちろん、id属性を付けた要素が2つあっても、それが別名(「header」と「footer」とか)であれば問題ありません。)

文脈によるスタイル指定(文脈セレクタ)

スタイルシートで次のように指定したとします。

em{color:red}

この場合はem要素はh1要素中に現れてもp要素中に現れても赤色になります。しかし、h1要素中のem要素だけは黄色にしたいということもあると思います。その様な場合、次のように指定します。

h1 em{color:yellow}

上のように要素名同士を「 (半角スペース)」で区切って指定します。これを「文脈セレクタ (Contextual selector)」といいます。文脈セレクタ内では、要素名、class属性、id属性を組合わせて用いることができます。

h1 .comment{color:yellow}
p.main strong{background-color:red}
#my samp{font-size: large}

また、文脈セレクタもグループ化して書くことができます。

h1 em,h1 strong{color:yellow}