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