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澄川・ライフデザインスクール
川上 雄大