CSSのbackground-imageのための空div問題

スクールで、「画像を表示させるときにHTML上でimgタグで挿入するか、CSSでbackground-imageとして表示させる2つの方法があると思うんですけど、使い分けってあるのですか？」と聞いたところ、メンターの方がとてもわかりやすく教えてくださいました。

判断基準は、画像が表示されない場合にコンテンツとして成立するかどうか。

例えば、ECサイトの商品画像などは、画像が表示されないとどんな商品かわからないので、imgタグで挿入するべきでしょう。

しかし、そのサイトを装飾するための「枠」や「背景画像」などは、表示されなくてもコンテンツとして成立しますから、CSSでの装飾でOK、ということなのです。

なるほどなるほどと、これを念頭に入れてサイト模写なんかをやってたんですが一つ壁にぶつかりました。

アイキャッチ画像はコンテンツの一部？

ブログとか、企業のコーポレートサイトでもアイキャッチ的に画像を使っていることありますよね。

で、それはimgタグなのか？CSSなのか？と悩んでしまい。

アイキャッチ画像にはテキストが基本入ってないので、背景画像と言えば背景画像…

でも、そうすると「空のdivタグ」を作らないといけません。

この「空div」、ネットで調べると先輩方は「やるべきではない」「賛成しない」と出てきます。

そうですよね、だって空なんだもん。ただただ背景画像を入れるためだけに、中身のないdivタグを作るのってどうなんでしょう。（SEO的にもよくない気がする。たぶん。）

でもでもでも、結局画像自体は装飾の意味合いが強いものも多いし、最悪表示されなくても大丈夫なものじゃない？なんて考えて、無理やり空divで表示させようともしたのですが、どうもうまくいきません。

結局中身が空だから、幅と高さの概念がないんですよね。まあ幅と高さの値を与えてあげればいいだけの話なのかもしれないけど、レスポンシブにしたいときめっちゃ困る。width:100%のheight:autoにしたいじゃん！

他のブログサイトを見てあっさり解決

調べても実際やってみても空divはやんないほうがいい、という結論になったので、Chrome先生のお力でいろんなブログサイトのソースコードを見てみたら、アイキャッチ画像はimgタグとして挿入していることが判明。

なんだよ！アイキャッチはコンテンツってことなのかよ！私の認識が間違ってたのかい！！！！！

とまぁこんな感じで毎回立ち止まっては学び、立ち止まっては学びの繰り返しの私です。なので模写とかめっちゃ時間かかって涙出そう。がんばる私。がんばれ私。

最近、ブログサイトの模写やデザインを作ったこともあり、他とは違う難しさを感じました。

でも今って調べものすると、大体出てくるのってブログ。そう考えると、ユーザーの動線（導線）とか、もちろん見やすさ使いやすさ、ユーザーインターフェース（UI）の重要さを痛感します。ブログが一番顕著かもね。情報量も多いし。

コーポレートサイトとはまた違った難しさと面白さを感じました。奥深い。

結構悩んでた空div問題も解決したし、日々精進です。