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

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

class属性の記述方法

記述例は以下。
1.<p class="test">ここにスタイルを反映するよ。クラス名はtestだよ</p>

class属性には複数の値が記述できる。区切りは半角スペースを使用する。
1.<p class="test test2">クラス名を複数指定しているよ。testとtest2だよ</p>

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

id属性の記述方法

記述例は以下。
1.<p id="test">ここにスタイルを反映するよ。id名はtestだよ</p>

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

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

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

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

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

CSSの基本的な構成と文法

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

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

1. * {
2.    font-size: 18px;
3.    font-weight: bold;
4. }

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

1. p.test {
2.    font-size: 18px;
3.    font-weight: bold;
4. }

1. *.test {
2.    font-size: 18px;
3.    font-weight: bold;
4. }

1. .test {
2.    font-size: 18px;
3.    font-weight: bold;
4. }

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

1. p#test {
2.    font-size: 18px;
3.    font-weight: bold;
4. }

1. *#test {
2.    font-size: 18px;
3.    font-weight: bold;
4. }

1. #test {
2.    font-size: 18px;
3.    font-weight: bold;
4. }

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

1. p {
2.    font-size: 18px;
3.    font-weight: bold;
4. }

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

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

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