Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

  1. トップページ
  2. CSS入門編 - CSS文法の基礎 これまでのまとめ

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

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

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

さて、ではこれまでに勉強した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スタイルを書いてみて記述の練習を進めていきたいと思います。

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

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto

ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。