CSSのお作法

2010.10.20crossnodeCSS


「テーブル組み」という言葉を聞かなくなって久しいですが、昔はね、テーブル組みって言ってね、エクセルのセルを結合したりする要領でページレイアウトをしていたのですよ。それが今は「テーブル組みって何ですか?」て真顔で聞いてくる世代がバリバリやっていて頼もしい限りですな。
なんて昔話は置いておいて、コーディングは(X)HTMLでテキスト構造を組むだけでなく、CSSで装飾して仕上げなければなりません。

ということで、CSSのお作法、基本ルールをピックアップしてみました。

01 : CSS言語指定

<meta http-equiv="Content-Style-Type" content="text/css" />

なにはともあれまずは(X)HTMLのheadタグのなかでこの宣言をして、「スタイル指定にCSSを使いますよ」という指定をしましょう。
CSSが正しく処理されるように、外部CSSの読み込みや直接記述よりも前に記述します。

02 : 外部CSS読み込み

<link rel="stylesheet" type="text/css" href="sample.css" />

(X)HTMLにsample.cssというファイルを読み込んでスタイルシートとして処理してね。という指定です。
複数のCSSを読み込む場合はファイル1つずつについて記述します。

03 : (X)HTML内直接記述

<style type="text/css">
<!--
p { color: #000000; }
-->
</style>

styleタグの中身がcssであるという指定をして内側に内容を記述します。
htmlのコメントアウト記号でくくるのは、CSS非対応の古いブラウザでCSSの記述がページ内に表示されてしまうことがあるために、その回避法として使われている書き方です。
その古いブラウザというのがIE3以下なので私も実際にその症状を見た事はないです。

04 : CSSの基本書式

p { color: #000000; }
#sample { font-size: 10px; }
.sample { color: #cccccc; }

p { color  #000000; } /* プロパティの後の:が抜けている */
# sample { font-size: 10px; } /* #の後にスペースが入っている */
. sample { color: #000000; } /* .(ドット)の後にスペースが入っている */

「セレクタ { プロパティ: 値; }」というのが基本書式です。
セレクタにはタグ、id、classなどが入ります。
タグを指定する場合は1行目のように「html」「div」「p」と表記します。
idを指定する場合は2行目のようにid名の前に「#」をつけます。
classを指定する場合は3行目のようにclass名の前に「.(ドット)」をつけます。
「#」や「.(ドット)」の後ろにスペースは入れないでid名またはclass名をくっつけて記述します。

プロパティの後はコロンです。誤った例の1行目のようにコロンがなかったり、セミコロンでもいけません。

値の後はセミコロンです。これは複数のプロパティを区切るための記号なので、後ろに他のプロパティがない場合には省略しても良いことになっていますが、書き忘れのミスがないように必ず書くようにする人が多いようです。
CSSファイルに書く場合もHTMLに直接書く場合も書式は変わりません。

05 : 一括指定

p, span { color: #000000; }

p, span, { color; #000000; } /* 最後のセレクタの後にカンマがある */

複数のセレクタに同じプロパティ指定をする場合には、カンマで区切ることによってまとめて一括指定できます。
しかし、セレクタと「{」の間にカンマがあるとエラーで処理されないので、まとめたりばらしたり試しているうちにカンマが残ってしまわないように気をつけましょう。
CSSファイルに書く場合もHTMLに直接書く場合も書式は変わりません。

コメントを残す


ページトップへ