CSS文法の基礎 これまでのまとめ

記述例は以下。

<p class="test">ここにスタイルを反映するよ。クラス名はtestだよ</p>

class属性には複数の値が記述できる。区切りは半角スペースを使用する。

<p class="test test2">クラス名を複数指定しているよ。testとtest2だよ</p>

同じHTMLファイル内で同じクラス名を複数使用することができる。

記述例は以下。

<p id="test">ここにスタイルを反映するよ。id名はtestだよ</p>

id属性はclass属性と違って複数の値を指定することはできない。

同じHTMLファイル内では同じid名のついた要素は複数存在することはできない。

クラス名に使用できる文字列はアルファベット、数字、『-』(ハイフン)、『_』(アンダースコア)。先頭に数字または『-』(ハイフン)は使えない。日本語もNG。

• × -main
• × 2_column
• ◯ _main_2_column

id名とクラス名の命名規則は多少の違いがあるがほぼ同じと考えて良い。

同じ宣言ブロックに対してセレクタは複数記述することができる。その場合は『,』で区切る。

p, div, .class_name {
    font-size: 18px;
    font-weight: bold;
}

セレクタに『*』(アスタリスク)を使うと全ての要素を対象にすることができる。『*』で指定されたセレクタを『ユニバーサルセレクタ』と呼ぶ。

* {
    font-size: 18px;
    font-weight: bold;
}

要素を記述し『.』を挟み、その後にクラス名を記述する。

p.test {
    font-size: 18px;
    font-weight: bold;
}

特定のクラス名がついた全ての要素を対象にしたい場合は『*』(アスタリスク)を使用する。

*.test {
    font-size: 18px;
    font-weight: bold;
}

『*』は省略できる。この記述方法が一般的。

.test {
    font-size: 18px;
    font-weight: bold;
}

要素を記述し『#』を挟み、その後にid名を記述する。

p#test {
    font-size: 18px;
    font-weight: bold;
}

特定のid名がついた全ての要素を対象にしたい場合は『*』(アスタリスク)を使用する。

*#test {
    font-size: 18px;
    font-weight: bold;
}

クラスセレクタと同じように『*』は省略できる。この記述方法が一般的。

#test {
    font-size: 18px;
    font-weight: bold;
}

一般的なインデント方法は以下の二種類。

p {
    font-size: 18px;
    font-weight: bold;
} 

p { font-size: 18px; font-weight: bold;}

前者の改行を加える方が一般的。