【CSS】contentで画像が表示されない時はブラウザに注意
contentを使って画像を表示しようとしている方は要注意。
「画像が表示されないんだけど」なんてことになりかねませんよ。
CSSを独学中の方や初心者の方は参考にどうぞ、初心に帰りましょう。
画像自体は普通にタグを使って表示すればいいのですが、理由あってそれは使えないなんてこともあると思います。
そんな時、「contentに画像を指定すれば表示させれるんじゃね」って思う方もいると思います。
ただ、その方法だと問題があるんですよね、忘れがちなので備忘録として残しておきます。
contentで画像を指定する時に気を付ける事
そもそもcontentで画像を指定するとは？下記コードをみてみましょう。
style.css
#sample {
content: url(sample.jpg);
}contentには、値に文字列以外にも画像を指定することができます。
こうすればcontentを使って画像を表示させることが可能です。
問題点とは？
それは、ブラウザによっては対応していないという事。
つまり、使用しているブラウザによっては画像が表示されない時があります。
下記を見てみましょう。
画像が表示されましたか？
表示されないという方は使用しているブラウザがIEもしくはFirefoxではないでしょうか？chromeで見てみましょう。
なぜchromeだと見えるのか？
それは、webkit系ブラウザだからです。
ですので、IEやFirefoxでは表示されないという事になります。
「まーたIEか」なんて思う方もいるとは思いますが仕方ありません。
とりあえずは使用を控えるしかありませんね。
終わりに
「IEめんどくせー」と思う気持ちはわかりますが、各ブラウザで確認するのはCSSを使うにあたって基本中の基本です。
自分も最近やらかしたばかりなので戒めとして。笑
慣れた頃に忘れがちなことなので、気を付けるようにしましょう。
以上になります。
Twitterでも情報や経過を発信していますのでフォローよろしくお願いします。
不明点やアドバイスなどありましたら、コメントかTwitterからお願いします。