CSSサンプルプログ

こんにちは。島津です。

今回は、私がよく陥ったうっかりミスの経験を元に
「なぜかスタイルが適用されない！」と困ったときのための
CSS初心者向け超基本チェックポイントをまとめたいと思います。

• ・ クラス名のつけ方は正しいか
• ・ 他のスタイル定義で上書きされていないか
• ・ 同じプロパティが重複していないか

▼クラス名のつけ方は正しいか

CSSクラス名に使える文字には制約があり、下記以外は使用できません。

• 　・半角アルファベットの大文字または小文字（A〜Z、a〜z）
• 　・半角数字（0〜9）
• 　・ハイフン（-）
• 　・アンダースコア（_）
• 　・ASCII以外のUnicode文字

また、クラス名の先頭には数字とハイフンは使用できません。

例えばこんなネーミングは無効です。

（htmlコーディング）

<div class="2items-block">
　　<p >要素Ａ</p>
　　<p >要素Ｂ</p>
</div>
<div class="items2-block">
　　<p >要素Ａ</p>
　　<p >要素Ｂ</p>
　　<p >要素Ｃ</p>
　　<p >要素Ｄ</p>
</div>

（cssサンプル）

* {

padding:0;
margin:0;

}
div {

padding:10px;
margin:10px;
width:200px;
border:solid 1px #DDDDDD;
font-size:12px;

}
.2items-block p {

color:red;

}
.items2-block p {

color:blue;

}

この場合、「items2-block」の方は問題なく文字色の変更が出来ていますが
「2itms-block」はクラス名が無効なのでスタイルが反映されません。
クラス名を数字やハイフンで始まらないようなネーミングに変更しましょう。

▼他のスタイル定義で上書きされていないか

スタイルを定義出来る場所は複数箇所あります。
定義自体は間違っていないのに、なぜかいくら変更しても反映されない…
という時は、より優先度の高いスタイル定義に上書きされている場合があります。

例えば、ページの背景色を赤に変更したい場合

• 　① BODYタグのstyle属性に「background-color:red;」を指定
• 　② HEADタグ内のSTYLEタグで「body { background-color:red; }」を指定
• 　③ 外部CSSで「body { background-color:red; }」を指定
• 　④ BODYタグのbgcolor属性に「red」を指定

と４つの方法がありますが、同時に複数指定した場合は
�@→�A→�B→�Cの順で優先されるため、例えば外部CSSで「red」と指定しても
BODYタグのstyle属性で「blue」が指定されていると背景色は青になります。

同じ要素に対するスタイル定義はなるべく１ヵ所にまとめるようにしましょう。

▼同じプロパティが重複していないか

上の「他のスタイル定義で上書きされていないか」と似た内容になりますが、
例えば下記のように定義した場合どうなるかというと…

（cssサンプル）

p {

color:blue;
color:red;

}
p {

color:green;

}

この場合、Pタグの文字色はgreenになり、さらに下のp{}を削除するとredになります。
（※ Windows FireFox3.0の場合）

優先度が同じ範囲内で重複する定義があると、後から定義された方で
上書きされてしまうようですが、本来間違った記述なので
ブラウザによっては予期しない表示になる可能性もあります。

一度に一気にCSSのコーディングを進める場合などに
コピー＆ペーストしたまま残ってしまうことがたまにあるので、
注意しましょう。

以上、とりあえずありがちなものを３つだけ挙げてみました。

チェックポイントとしては初歩中の初歩ですが、
慣れないうちは（慣れても油断すると…）こういったミスがよく出ると思います。
「あれ、なんで？」と思った時は基本的なところから順番にチェックしてみましょう！

今回はこれでおしまいです。
ありがとうございました。