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

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

注意書き

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

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

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

W3C CSS 検証サービス

なので、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にしても文法チェックを怠ったらいけないと反省です。