CSS/スタイルシートが反映されない原因

CSS/スタイルシートが上手く反映されない時があります。最初の頃に良くある原因や対処、調査方法について説明しています。

基本的な間違い

 CSSが上手く反映されない時によくある間違いは、;を付け忘れたり:を;と間違えて記述している事が原因の場合があります。

 例えば以下のように;を付け忘れたとします。

p { color:rgb(255,0,0)
background-color: rgb(0,255,0);}

 この場合は、以下のように表示されます。

;を付け忘れた場合

 文字の色は赤、背景は緑で指定していますが、全く反映されていません。

 以下のように:を;と間違えていたとします。

p { color;rgb(255,0,0);
background-color: rgb(0,0,255);}

:を;と間違えていた場合

 背景は反映されていますが、文字の色が赤で指定されていても反映されていません。

 最初の頃は間違いやすいので、上手く反映されていないと思った時、まずは;と:部分を確認する事をお奨めします。

優先度により上手く反映されない

 CSSは記述箇所や内容により優先度があります。

 ・外部ファイル → htmlヘッダー → タグに直接設定

 ・タグへの指定 → クラス指定 →ID指定

 ・入れ子の親で指定 → 入れ子の子で指定

 詳細は「スタイルシートの定義方法」をご参照下さい。

 尚、上手く反映されない時は2番目と3番目の組み合わせが原因の場合があります。例えば、以下のようにCSSを記述したとします。

【上手く反映されないCSS】
#red {
color: red;
}

#red p {
color: green;
}

.blue {
color: blue;
}

 上記ではidがredは赤、redで囲まれたpタグは緑、クラスがblueは青と指定しています。

 このCSSを使ってhtmlで赤、青、緑の3種類の色を表示しようとして以下のように記述したとします。

【上手く反映されないHTML】
<div id="red">

<p>緑</p>
<p class="blue">青</p>
</div>

 これは以下のように表示されます。

 クラスでblueを指定した青で表示したい箇所が緑で表示されています。これは.blueの定義は汎用的で、より入れ子の子の方で限定された定義である#red pの方が優先されるためです。

 このような時はcssで以下のように記述します。

【上手く反映させるCSS】
#red {
color: red;
}

#red p {
color: green;
}

#red p.blue {
color: blue;
}

 最初のcssから赤字のセレクタ部分を書き換えています。このようにするとより入れ子の子の方で限定された定義である#red pに対するクラスの設定になるため、青で表示されるようになります。

回り込みを使った時

 回り込みを使って200pxのボックスの中に100pxのボックスを2つ並べたいとします。

上手く反映されない時1

 以下のようにスタイルシートで200pxのボックスと100pxの枠付きのボックスを2つ作ります。

【回り込みを使った時に上手く反映されないCSSの例】
#box1 {
width: 200px;
}

#box2 {
width: 100px;
border: solid 1px rgb(149,179,215);
background-color: rgb(185,205,229);
float: left;
}

#box3 {
width: 100px;
border: solid 1px rgb(195,214,155);
background-color: rgb(215,228,189);
float:left;
}

.clear {
clear:both;
}

 HTMLではこのボックスを配置するためにbox1の中にbox2,3を配置します。

【回り込みを使った時に上手く反映されないHTMLの例】
<div id="box1">

<div id="box2">
ボックス2配置
</div>

<div id="box3">
ボックス3配置
</div>

<div class="clear"></div>

</div>

 上記は以下のように表示されます。

ボックス2配置
ボックス3配置

 横には並ばずに縦に並んでいます。これはボックスの枠は幅で指定した外に作られる事が原因で、100px+2px(左右の枠)がボックス2とボックス3で取られ、2つのボックスの合計が200pxに収まらないためです。

 このため、1つのボックスの幅を98pxに指定します。この場合は以下のように意図した通りに横に並んで表示されます。

ボックス2配置
ボックス3配置

 幅を指定して回り込みを行う場合は枠の太さにも注意が必要です。ボックスと枠の関係の詳細はボックスのまとめの「borderとwidthの関係」をご参照下さい。

解除し忘れ

 回り込みを使って幅を指定しないボックスの中に49pxのボックスを2つ並べ、その下に100pxのボックスを配置したいとします。49pxであるのは枠が1pxあるためです。

上手く反映されない時2

 以下のようにスタイルシートで49pxの枠付きボックスを2つとと100pxのボックスを作ります。

【解除し忘れのスタイルシートの例】
#box1 {
width: 49px;
border: solid 1px rgb(149,179,215);
background-color: rgb(185,205,229);
float: left;
}

#box2 {
width: 49px;
border: solid 1px rgb(195,214,155);
background-color: rgb(215,228,189);
float:left;
}

#box3 {
width: 100px;
border: solid 1px rgb(250,192,144);
background-color: rgb(252,213,181);
float:left;
}

.clear {
clear:both;
}

 HTMLではこのボックスを配置するためにbox1,2を配置した後にボックス3を配置します。

【解除し忘れのHTMLの例】
<div id="box1">
ボックス1
</div>

<div id="box2">
ボックス2
</div>

<div id="box3">
ボックス3
</div>

 上記は以下のように表示されます。

ボックス1配置
ボックス2配置
ボックス3配置

 ボックス3も右に並んでいます。これは回り込みの解除し忘れが原因です。

 このため、ボックス2の時点で赤字のように回り込みを解除します。

【回り込み解除をした時のHTML例】
<div id="box1">
ボックス1配置(左回り込み)
</div>

<div id="box2">
ボックス2配置
</div>

<div class="clear"></div>

<div id="box3">
ボックス3配置
</div>

 この場合は意図した通り、ボックス3が下に表示されます。

ボックス1配置
ボックス2配置
ボックス3配置

 回り込みを利用している場合は、解除し忘れていないか確認が必要です。

キャッシュ

 ブラウザにはキャッシュがあります。1回参照したファイルをパソコン上に保存し、通信により毎回ファイルを送信して貰わなくても素早く表示出来るようにするためです。

上手く反映されない時3

 htmlファイル、cssファイル共に一定時間キャッシュされます。このため、HTMLやCSSをサーバで変更した場合はキャッシュに注意が必要です。

 例えば、お気に入りやリンクからページを参照するとキャッシュが利用されてCSSが上手く反映されていないように見えます。

 この場合、ブラウザの再読み込みボタンや「F5」キーを押して通信を発生させる事でファイルを再度読み込ませる事が出来ます。

 再読み込みボタンはブラウザによっても違いますが、通常はURL入力欄の右や左に上手く反映されない時4のようなマークがあるため、これをクリックする事で再読み込み出来ます。

 再度読み込ませる事で変更したhtmlやCSSファイルの内容も反映されます。

FireFoxの要素を調査で確認

 これまでの確認をしても上手く反映されない時があります。そのような時はFireFoxの要素を調査が役に立ちます。

 要素を調査では反映されている定義が確認出来たり、優先度により打ち消されたスタイルやボックスモデルで幅や枠がどのようにブラウザで認識されているか確認が出来ます。

 上手く反映されない原因は様々ですが、要素を調査で調べる事で原因の特定に役立ちます。

 FireFoxの要素を調査の詳細は「FireFoxの要素を調査」をご参照下さい。

 又、Internet Explorerの要素の検査やGoogle Chromeの要素を検証も同様に原因の特定に役立ちます。詳細は「IEの要素の検査」、及び「Chromeの要素を検証」をご参照下さい。

サイト関連1

ホームページ作成「スタイルシートの定義方法
ホームページ作成「ボックスのまとめ
ブラウザツール「FireFoxの要素を調査
ブラウザツール「IEの要素の検査
ブラウザツール「Chromeの要素を検証
  • このエントリーをはてなブックマークに追加