CSSの設定が、クロムでは表示されるのに、IEやファイアーフォックスでは表示されないのはなぜ? | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…

こんにちは、パソコンワンポイントレッスン!

PCインストラクターの川上です。


このような不思議現象のご質問を受ける場合があります。



何故か、CSSの編集で指定したところが、Google chromeでは表示されるのにFirefoxやInternetExplorerでは表示されないのですが・・・?
キャッシュその他もすべて試したのですが・・・、いったい何が原因なのでしょうか?



例えば、
・サイドバーの見出しの色や背景などを変えたのに反映されない・・・
・記事下に「読者になる」をつけたのに表示されない・・・
・記事タイトルの投稿日時を上にしたのに、下のままになっている・・・

など。

もちろん、これはCSSソースのミスなのは明らかです^^;


でもどうやって見つけるか・・・

もちろんソースミスを見つける方法はいくつもあります。
(開発ツールやCSSソースの間違いをチェックしてくれるサイトなど)


しかし、ここではテクニックを使わず、基本に忠実にチェックしてみることをお伝えしますね。

まず、うまく表示されていないCSSソースうまく表示されているCSSソース境目をチェックします。


うまく表示されていないCSSソースのひとつ上のCSSソースが怪しいですね^^


今回もソコをチェックしてみると・・・


/*メニューリストリンク マウスオーバー時*/
#headermenu ul li a:hover{
color:#f03cc3;
text-decoration: none; 
display:block;
text-align:center;
background:url(href="http://stat.ameba.jp/user_images/xxxxxxxx.png);
}


となっていました。

さぁ、どこがおかしいかわかるでしょうか?

このCSSソースを一目見て、ぴ~んと来た方はさすがです!!!





そう・・・

background:url(href="http://stat.ameba.jp/user_images/xxxxxxxx.png);


この行です。





そ、そうです、あなた!!

href=が「"」と「"」で囲まれていないのです。

さらに言えば、url()の括弧の中には、「href=」はいらないです。

url()の括弧の中は、
ダブルクォーテーション( " )、 または、シングルクォーテーション( ' )の引用符で囲みますが、引用符を省略することもできます。

そう、この「"」で閉じられていなかったために、それ以降のCSSの設定がきちんと表示されなかったのです。


正しくは、

background:url(http://stat.ameba.jp/user_images/xxxxxxxx.png);


という指定になるべきなのです、ね^^!


CSSをいまだにCCSやCCB(ふるい?)と間違ってしまう方・・・、には難しい問題だったと思いますが、ぜひ頭の隅にでも置いておいてくだされば、幸いです^^




以上、パソコンワンポイントレッスンでした。


LIDS澄川・ライフデザインスクール
川上 雄大