HTMLでパスが合っているのに、なぜか画像が表示されない！！【classの指定が問題でした】

HTMLで画像を表示する際に使用する<img>タグ。

今回、これにハマりまして…

というのも

（たまに）画像が表示されない…！！

という重大な問題。

F12で検証画面を開いて確認したところ、「画像パスは合っていて、画像自体は認識している」「サイズも表示されていることになっている」「z-index(重なる順)の問題でもない」という解決策不明の状況にぶち当たりました。

しかも、表示されるときは表示されるんですよ(笑)

なので、問題の再現ができない！！

という最悪の状況＆最悪の気持ちで1時間の苦難の末、

ちょ〜簡単なミスでありました。

もし同じことで悩んでいる人がいたら参考になったら嬉しいです。

【元の記述】

        <div class="relative">　<!--cssでrelative指定-->
            <img src="sample.png" class="absolute"><!--cssでabsolute指定-->
        </div>

【改良後の記述】

        <div class="relative">　<!--cssでrelative指定-->
            <div class="absolute"><img src="sample.png"></div><!--cssでabsolute指定-->
        </div>

すいません、、

慰めてください（笑）

インライン要素である<img>タグには効かないCSSというのがあるので、ブロック要素であるdivで囲んで指定するのが多いですね。
(text-alignとか)

しかし、ボーと書いているとこういうことに気づかずにコーディングし、あとから「？？？！」と悩むことがあるので注意ですね。

表示されることは解決したのですが、「たまに表示されない」的な原因はなんだったんでしょう。
いっそ、"表示されない"なら分かりやすいのですが、"たまに"というのが気になりますね。

詳しい方、教えてくださいm(__)m

とりあえず解決ということで、ではでは♪

CSS関連の他の記事も、よろしければ覗いてください♪