2021年03月6日(土)
imgタグに指定した画像のURLが存在しない時にCSSだけで対応する
Result
See the Pen zYoLQYq by kachibito
(@kachibito) on CodePen.
1番上が画像のURLが存在しない時で、特に何もしない場合に表示されるやつ。
2番目が対策した場合+画像が無い時。
3番目が対策した場合+画像がある時。何もしなければ1番目の表示になります。
Ads
対策すると2番目のように任意のスタイルで表示されます。
対策した場合でも3番目のように画像があれば影響を受けません。css
ご存知のように基本的にはimgに疑似要素は使う事が出来ません。
が、デモのように画像が存在しない時は使う事が出来るようなのでそれを利用してスタイリングする、みたいな話です。
img { display: inline-block; font-family: Arial, sans-serif; font-weight: 300; line-height: 2; text-align: center; min-width: 300px; min-height...
0
0
29
25author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『imgタグに指定した画像のURLが存在しない時にCSSだけで対応する』についてまとめています。
この記事は特にレスポンシブ・Google・Firefox・LINEについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
