CSS: 書式

セレクタの表記

セレクタは対象となる要素の指定方法です。ここを正しく理解できないとCSS記述することができません。

セレクタの代表的な表記をあげます。青く塗られているセレクタは良く使うのでしっかり覚えてください。

今回は、上の６つ（３つ＋３つ）を覚えましょう。下の６つ（４つ＋２つ）は後に出てきた際に覚えればいいです。

どうしてこんなに多くのセレクタが必要なのでしょうか。

それは、対象となるタグを限定する必要があるからです。例えば、「a」とセレクタに記述した場合には、「リンクタグに対して」という意味になります。これは、リンクタグすべてを表します。これだけでは、同じタグは同じ表現しかできません。「このリンクタグに対して」など、限定して使いたい場面がでてきます。

限定をかける際によく使うのは、子孫セレクタ（要素中に現れる要素）です。これは、HTMLのタグ構造によります。タグ構造を理解しなければいけない理由がここにあります。

前回紹介した「class属性」や「id属性」を使う方法もそうですが、HTMLにclassやidを書かなければいけないため、少し使いづらいですね。

下記の例を参考にして、どのように限定をかけるのかを覚えてください。

例　セレクタ　（宣言部分は省略）

* { } /* 全ての要素 */

h1 { } /* h1要素 */

p a { } /* p要素中で使用されるa要素 */

p * { } /* p要素中で使用される全ての要素 */

h2, h3 { } /* h2要素とh3要素 */

div.clearfix { } /* class名clearfixが指定されたdiv要素 */

*.clearfix { } /* class名clearfixが指定された全ての要素 */
/* ↑*は省略可能 */

div#contents { } /* ID名contentsが指定されたdiv要素 */
/* ↑IDは文書中に一ヶ所なのでタグ名は省略可能 */

#contents p a , #menu a { } 
/* 「ID名がcontentsである要素中のp要素中のa要素」 と「ID名がmenuである要素中のa要素」 */

プロパティの値

プロパティの値は、プロパティごとに指定するものが異なります。個々のプロパティの値については、CSSリファレンスを参考にしてください。

長さを指定する場合には、必ず以下のいずれかの単位をつけて表記します。例外として「0」だけは単位なしで記述できます。HTMLでは単位なしの記述なので違いに注意してください。

これも覚えるのは青く塗られた箇所だけで構いません。

相対指定では、ブラウザで文字サイズを変更(表示→文字サイズ)した際に長さが変更されます。