もう少し詳しいCSSの説明

前ページではCSSがどのようなものかを直感で理解いただくために、かなり「はしょって」書いている部分があります。このページではもう少し落ち着いて（？）説明したいと思います。CSSを利用するにあたり、まずその記述ルールを理解しておきましょう。

CSSの記述ルール

基本は前ページでご説明したとおり、

対象 { Aを:Bにする }

です。ただ「対象」の指定にはいろんなパターンがあります。そのパターンとそれぞれの記述例を示します。

すべての要素
* { font-size:100% ; font-weight:normal }
特定の要素
h1 { font-weight:bold ; text-align:center }
複数の要素
h1,h2,h3 { font-weight:bold }
特定の要素の子孫である要素
dl ul { margin-left:2em }
特定のclass属性を持つ要素
h2.info { text-align:center }
特定のid属性を持つ要素
h3#title { color:blue ; background-color:white }
擬似要素を持つ要素
p:first-line { text-transform:uppercase }
擬似classを持つ要素
a:link { color:blue ; background-color:yellow }
特定の要素の直接の子要素
li > em { font-weight:bold ; color:red ; background-color:white }
特定の要素に隣接した要素
h1 + h2 { margin-top:2em }
特定の属性を持つ要素
h2 [title] { text-align:center ; font-weight:normal }

class属性、id属性、擬似classについては後述します。また上記のうち、最後の３つについては未対応のブラウザが多いようなので、必要ないなら現状では使わないほうが無難かもしれません。

スタイルの継承とは？

最初にCSSを説明する際に、細かい指定をしなくても上から順に指定が継承されて行く、トップダウン方式のスタイルシートだと言いました。これについてもう少し説明します。

大きく考えて、HTMLで示すbody要素には、その中に見出しであるh1～h6要素、段落であるp要素、リストであるdl、ul、ol要素等のブロック要素があり、そのブロック要素の中に強調を表すem要素、strong要素、アンカーを示すa要素、等のインライン要素があるわけです。

すると、例えばこう考えてみます。

「上から順に指定が継承されていく」と言うことは、body要素に指定したスタイルAは子孫である要素すべてにも適用される、と言うことです。その後で子であるp要素に対し別のスタイルBを指定すると、スタイルAに上書きされてスタイルBがp要素に適用され、かつp要素内のem要素にもスタイルBが適用されます。続いてem要素にスタイルCを指定した場合は、スタイルBに上書きされてスタイルCがem要素に適用される、という具合です。

以上の点に注意し、CSSを書くポイントをまとめて見ますと、

  1. まず親要素（*やbody）で基本のスタイルを指定しておき、スタイルを変えたい場合は子・孫要素の順番で個別にスタイルを指定する。
  2. CSSファイル内に同じ対象に対する記述が２つある場合、常に後ろのほうの記述が前のほうの記述を上書きして適用される。

ということになります。

上記の２で、「同じ対象に対する記述が２つある場合」というのは、

対象 { Aを : Bにする }

において、同じ対象に対して「Aを」の部分が同じ指定になっている記述が２つある場合、という意味です。例えば、

h2,h3 { font-size:95% ; font-weight:bold }
h3 { font-weight:normal }

と書いたならば、それは、

h2 { font-size:95% ; font-weight:bold }
h3 { font-size:95% ; font-weight:normal }

と書いたことと同じになります。h3要素のfont-sizeを95%にする指定は継承されますが、h3要素のfont-weightはboldからnormalに上書きされます。

最後にまとめとして書くと、

  1. 全ての要素
  2. body要素
  3. ブロック要素
  4. インライン要素

の順番でCSSファイルを書くことを基本にすれば考えやすくなると思います。

CSS 解説サイト

更に CSS を勉強するに際し、役立つサイトを紹介します。是非参考にしてみてください。

Information