FireFoxでCSSが反映されていないという事象

FireFoxでCSSが反映されていないという事象

このブログでは、TCDテンプレートのカスタマイズに関する記事をいくつか書いていますが、その際〝カスタマイズをする場合の注意〟という注意書きを書くようにしています。

注意書き

このエクスクラメーションマークと注意書きを囲っている赤線枠は、自分でCSSを書き足して表示させているのですが、FireFoxではエクスクラメーション(ビックリ)マークが表示されていないということに(今さらながら)気づきました。

contentプロパティにはrepeatプロパティが使えない

今回の原因を調べるために検証ツールを使ってCSSの文法チェックをしたのですが、その原因は、「contentプロパティに使えない値(no-repeat)を書いてしまっていた」という、自分の単純なミスだったことがわかりました。

なので、content:url(/○○.png) no-repeat; の no-repeat を削除するだけで、FireFoxでも無事にエクスクラメーションマークが表示されるようになりました(;´・д・)=3ホッ

私の場合、style_pc.cssの最後に、以下のような感じで注意書きに関するCSSを書き足しています。

修正前

/* 注意書き */
.note { display:inline-block; border:solid 1px #e95464; padding:10px; margin:0 0 20px 0; }
div.note::before { content:url(img/common/warning.png) no-repeat; display:inline-block; vertical-align:middle; }

注意書き CSSが反映されていなかった

上のCSSでは、::before疑似要素を使って、注意書きの直前にエクスクラメーションマークが挿入されるようにしています。

挿入される画像は、contentプロパティで指定しているのですが、このcontentプロパティには、no-repeatを指定することはできなかったのです(>_<)

どうして「no-repeat」を書いてしまったのかというと、画像を表示させるために「url(ファイル名)」と書いた場合、repatプロパティを一緒に書かないといけないと思い込んでいたのです。

background(背景画像)プロパティでは、「url(ファイル名)」のあとに、「no-repeat」や「repeat-x」といったrepeatプロパティを一緒に書いて、画像の繰り返しを制御するからです。

「no-repat」はcontentプロパティで利用できない値なので、削除しても何の問題もありません。以下のように、「no-repeat」を削除しただけで直りました。

修正後

/* 注意書き */
.note { display:inline-block; border:solid 1px #e95464; padding:10px; margin:0 0 20px 0; }
div.note::before { content:url(img/common/warning.png); display:inline-block; vertical-align:middle; }

注意書き

私は、よく自分でCSSを書き変えたり、書き足したりしています。といっても、まだまだ勉強不足でCSSをちゃんと理解できていないため、今回のようなことがおきてしまったわけです(´∀`;●)

今回はCSSでしたが、HTMLにしてもCSSにしても文法チェックを怠ったらいけないと反省です。

文法チェックや各ブラウザでの表示チェックは怠らないほうがいい

HTMLやCSSがInternet Explorerに限って表示されないというケースはよくある話(!?笑)なのですが、今回のように、Internet ExplorerとGoogle Chromeでちゃんと表示されているのに、FireFoxに限って表示されていなかったのは腐れ盲点でした。

Google Chromeなんかはわりと柔軟なブラウザで、ちょっとの文法ミスだとちゃんと表示してくれるので油断しがちなのですが、やっぱり各ブラウザごとでのチェックや、文法チェックは怠らない方がいいですね。

関連記事

コメント

  • トラックバックは利用できません。
  • コメント (0)
  1. この記事へのコメントはありません。

サイト内検索

おすすめ記事

ページ上部へ戻る