実際の作業に入る前に、基本的なことをやっておきます。
作業ミスや混乱などを避けるためにもまずは基本です。しっかりと見に付けておきましょう。
以下の事について触れるので、理解している方は次のエントリーにお進み下さい。
- CSSの記述の仕方
- セミコロンについて
- 大文字と小文字の区別について
- class名やid名で使用できる文字
- コメントアウトについて
CSSの記述の仕方
セレクタ {
プロパティ:値
}
セレクタってのは、スタイルを適用する対象で、bodyとかh1、p、ulなどです。
id名やclass名なども。
プロパティは、そのセレクタにどのようなスタイルを指定するかです。
marginやpadding、borderなど。
値は、指定したプロパティにどんな値を適用するかで、color:red;の太字のredの部分です。
コレで文字の色を赤にするという値を指定してます。
CSSの書式の統一に関してですが
body {
margin:0;
padding:0;
}
例えば最初に↑のように書いたとしたら、後に続くものは全て同じように書いていきましょう。
ダメな例を上げるとこんな感じです。
* {
margin:0;
padding:0;
}
body {
background: #FFF;
font-family: Verdana; font-size:80%;
}
p
{
margin:0 0 1em 0;}
ちょっと極端ですが、ココまで書き方がバラバラだと後から見たときにすんごい確立でセミコロン（;）とか中カッコ（{）の付け忘れが生じます。
他人に見られたくないとかで敢えてやってる人も居るかも知れませんが、最初は自分の書き方の癖付けを徹底しましょう。
ボクの場合は、常に下記のように記述してます。
body {
margin:0 0 0 0;
padding:0;
}
p {
margin-bottom:1em;
}
一番多い記述の仕方だと思うので、この辺で癖を付けていくのがいいと思います。
他に良く見る記述の仕方だと、
body {
margin: 0 0 0 0;
padding: 0;
}
p {
margin-bottom: 1em;
}
違いが分かり難いかもしれませんが、プロパティ後のコロン（:）と値の間に半角スペースが空いてます。
社内ではコッチで書く人も結構居ます（もしかしてこっちの方が多い？）
他にも色々ありますが、ここでは割愛。
セミコロンについて
セミコロンはプロパティを複数続けて書く場合に使うんですが、1つの場合でも付ける癖を身に付けておいた方が、付け忘れなどを防げます。
大文字と小文字の区別について
CSSではid名やclass名は大文字と小文字が区別されるので、下手に大文字を使ったりせず、まずは小文字で統一しましょう。
小文字で統一の別の理由として、XHTMLでは要素名は全て小文字で書くように決められてます。
その為、慣れない内に大文字などを使うと混乱の元になります。
class名やid名で使用できる文字
開始は必ずアルファベットから（a～z、A～Z）です。数字から開始しないようにしましょう。
その後は、 アンダーバー（_）、ハイフン（-） 英数字が使えます。
例：.hoge_hoGe1
コメントについて
（X）HTMLでは
<!-- ここはコメントアウト -->
のように記述する事で出来ますがCSSでは、
/* ココはコメント */
と書きます。ちなみにコメントの入れ子は出来ません。
こういうの↓
/* コメント/* */ですよ */
CSSに慣れてないとうっかりって事も有り得るんで、間違えないようにしましょう。
また、今回のサンプル程度のボリュームならさして困りませんが、ちょっと面倒でも後々必ず役にたってくれるので、規模が大きくなったときにも見やすいようにスタイルの対象ごとにコメントで区切ったり、分かり難い部分にコメントをつけたりしましょう。
因みに、ボクの現在のコメントアウトの仕方は、
/* Link Color [ ----------------------------------------------------------- */
って感じです。 [ が開始だよーって感じで使ってます。
この辺は自分流を見つけて、見やすくやれば良いと思います。
しばらく基本的な部分をやっていくので実際の作業はもう少々お待ち下さい。（書いてるウチに書かないといけない事が沢山ある事に気付いたので...）