CSS Syntax: Summary So Far - Japanese Only

不二家さんちのミルキーさんって絶対に銀歯を吸着する能力持ってますよね。

というわけでみなさまどうもこんにちわ。

さて、ではこれまでに勉強したHTMLとCSSの文法の基礎をまとめてみましょう。ずらっといっちゃいますね。全ての記述例はp要素に指定すると仮定しています。

class属性の記述方法

記述例は以下。

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

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

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

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

id属性の記述方法

記述例は以下。

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

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

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

class属性、id属性の命名規則

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

× -main
× 2_column
◯ _main_2_column

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

CSSの基本的な構成と文法

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

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セレクタの記述方法

要素を記述し『#』を挟み、その後に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;}

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

以上となりますが文法については大丈夫そうでしょうか。次の記事からは実際に色々なCSSスタイルを書いてみて記述の練習を進めていきたいと思います。

引き続き頑張っていきましょう。ではでは。

This article was written by Sakurama.

Author's beloved small mammal

桜舞春人 Sakurama Haruto

A Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him.

If you find any errors or copyright issues, please contact us.

Home

CSSBeginner