スタイルシートの書き方
書き方のきまり
例としてページ全体の背景の色を白にする時の方法を見てみましょう。
body{background-color:#ffffff;}
これでページの背景は白色に設定されました。
わかり易いように色分けしましたが、次のような意味になります。
- 赤色部分…どこの？
- オレンジ色部分…何を？
- 緑色部分…どういう設定にする
この例でいくと
- 赤色部分…body（HTMLの<body></body>で囲まれた全ての）
- オレンジ色部分…background-color（背景色を）
- 緑色部分…#ffffff（白色にする）
という意味になります。
また、オレンジ色部分と緑色部分は{}で囲む決まりで、オレンジ色と緑色の間は：（コロン）で区切る決まりで、緑色部分の後は；（セミコロン）で区切る決まりになっていますので、忘れないように入れてください。（全て半角入力です）
因みに今回のように１つしか指定しない場合は緑色の後の；（セミコロン）は省略しても問題ありませんが、忘れないように常に付けるようにすると習慣になって忘れないかもしれませんね。
また、今回はページの背景色を指定しただけですが、例えば文字の色やサイズを統一して指定したいときなど、セミコロンで区切れば何個でも追加する事ができます。
例）背景色を白色、文字色を黒色、文字のサイズを10ピクセル（小さめ）にする。
body{
background-color: #ffffff;
color : #000000;
font-size : 10px;
}
こんな感じです。因みに改行したりスペース（半角）を入れて見やすいようにしても問題ありません。
色はカラーコードで設定する
先ほど背景色や文字の色の設定を見て#ffffffとか#000000とか見て何だろうと思った人もいるかもしれませんね。
色を指定するときに、別に白色ならwhiteとか黒色ならblackという風に指定しても構わないといえば構わないのですが、例えば黒の強い灰色にしたいとか、青色の強い紫色にしたいというような場合は何色というか分かりませんよね？
ですので基本的には#（シャープ）と6桁の英数字を組み合わせたカラーコードというコードを使って色を指定します。
これにより、細かい色を指定する事ができるので、色の指定はカラーコードを使って指定するようにしましょう。
カラーコードというキーワードで検索すれば、カラーコード表を掲載したサイトがいっぱいでてきますのでそちらを参考にしてください。
因みに私はここのサイトを参照しています。
コメントを入れて見やすくする
慣れてきた中級者以上の人は関係ないですが、はじめのうちは何を表す記述なのかという事の説明を付けておくほうが分かり易いので、コメントを付けると良いです。
中級者以上の人でもコメントで綺麗に分けている人も多いですので、コメントという覚え書きを知っておきましょう。
コメントは /* と */ で囲むことによって使えます。（半角ですよ）
例えば先ほどのbodyの設定にコメントを入れてみます。
/*ページ全体の設定*/
body{
background-color: #ffffff; /*背景色の設定（現在白色）*/
color : #000; /*文字の色の設定（現在黒色）*/
font-size : 10px; /*文字の大きさの設定（現在10px）*/
}
これで分かりやすくなりましたよね？こまめにコメントを付けるようにしましょう。
IDとclassの違い
スタイルシートを便利に使う上で覚えないといけないのがIDとclassの違いです。
これらを使い分ける事でより便利でデザイン性の高いスタイルシートを使う事ができます。
詳しくは参考書や解説サイトを参照していただければと思いますが、ここではとりあえず感覚で覚えていただけるように基本的な事を書いておきます。
classは１ページの中で何度も使える
classは１ページの中で細かく設定する為に何度も使用する事ができます。
ですので部分的に文字の色を変えたかったり、余白を変えたりと大活躍します。
ですので、ぶっちゃけclassだけ使えばIDを使わなくても事足りるのですが、サイト規模が大きくなるとしっかり把握していないと多すぎて訳が分からなくなったりします。ですので細かい部分指定だけにclassを使うという風に覚えておくと良いでしょう。
classの書き方は
.sample{font-size:10px;}
のようになります。
IDは1ページ１回しか使えないと覚える
１つのIDにつき、１ページで１回だけ使えるというルールがあります。
ですので、ほとんどの場合レイアウトタグ（div）に用いる事が多いです。
またIDは内部リンクとしても使えるので、例えばこのサイトでも使っていますが、ページの下まで読んで一番上に戻るときに「上に戻る」という風に設定するときに最初の方で使っているID（大体＃headerが多い）をリンクに指定すればページ内で移動するのに便利です。
IDの書き方は
#sample{font-size:10px;}
のようになります。
余白について（marginとpaddingの違い）
ページの上下左右などに余白を入れる時にmarginとpaddingという２つを使い分けて余白を入れていきます。
marginは外側の余白、paddongは内側の余白を入れるときに使います。
marginもpaddingも共通で上下左右の余白を個別に指定できます。
margin:10px 20px 30px 40px;
みたいな感じです。因みに左から順に上・右・下・左の余白を指定し、4つの数字の間は半角スペースを空けます。
また、4方向とも同じ幅の余白を空ける場合（例えば上下左右10px）
padding:10px;
と、1つの数字だけで4方向同じ余白が指定でき、上下と左右がそれぞれ一緒の幅の余白の場合は（）例えば上下5pxずつ、左右10pxずつ）
padding:5px 10px;
という風に指定する事ができます。
また0にする時は0pxとせずに0だけでも良いです。
慣れた人でも良く分からなくなる事がありますので、覚えておきましょう。
