HTML(8)CSSのルールについて

HTML

前回はCSSの基本文法について記事を書きました。

今回はCSSのルールについて記事にしたいと思います。

CSSを書くときのルール

1.半角英数字で書く

こちらはHTMLでも一緒ですが全角や日本語文字は使用しません。

例:良い例 p{color:red;} 悪い例 p {color:red;}

2.小文字を使用する(基本は)

大文字と小文字による区切りはなく、必ず小文字というルールはないのですが、HTMLのバージョンによっては記述する必要があるため小文字で統一するのがお勧めされています。

例:良い例 h1{color:brown;}
悪い例  h1{COLOR:;BROWN}

3.複数セレクターで指定を行う

セレクターは複数指定ができ、セレクタ間に『,(カンマ)』を用いることで同じ装飾できます。こちらはルールでもありますが、整理する意味でも必要な手技になります。

例 良い例 h1,p{color:red;}
悪い例 h1{color:red;}
p{color:red;}

4.装飾を小分けにしない

プロパティに関しても複数指定できます。上記と似たような手技になりますが、こちらはプロパティ間に『;(セミコロン)』が必要になります。
※前の記事で記載しませんでしたが、プロパティに;は必ず必要ではないのですが最後の行には必要になるため記述忘れを防ぐためプロパティの最後に癖として;をつけたほうが良いでしょう。

例 良い例 p{color:brown;font-size:16px;}
悪い例    p{color:brown font-size:16px}

5.単位を指定する(指定しないと変わらない)

文字のサイズや幅、高さを指定する際は0を除き単位を必ず書くようにしましょう。また指定しないと反映しないので必ず必要となります。※単位についてはまた別の記事でまとめます。

例 良い例 p{font-size:16px;} 悪い例 p{font-size:16;}

6.要素の中に要素を入れる

指定した要素の中にある要素にも装飾を指定できます。こちらはセレクタ間にスペースが必要となります。必ず必要な手技ではないのですが同じセレクターを多用する場合には指定の混乱を防ぐために知っておくと良いルールとなります。

例 HTML <div> <p>kame channel<p></div>
CSS.      div p{color:red;}

 

以上がCSSのルールについての紹介になります。次回はCSSを使用しての文章の装飾について記事にしていきたいと思います。