object-fitについて
可変的な要素に画像を載せる時に、
背景画像の場合は、background-size:coverを使えば問題ないですが、
画像を背景画像ではなく<img>で実装したい場合、
object-fit:coverで同様の表示にできますが、IEでは対応していません。
このような場合って、みなさんどうしますか？
セマンティックなHTMLではimgが正しい場合でも、background-sizeを使うためという理由で背景画像にするのはアリでしょうか？
(object-fitを使わない方法や、IEにも対応させるようなライブラリがありますが、それらは使わない想定です)
11 件の回答
画像に文字があるかないかで変わるけど、backgroundで問題ない。SEOの事気にしてるなら、その程度が与える影響は誤差レベルだから気にしなくていい。
ありじゃない？ 俺は昔 HTML では普通に書いて、jQuery で <img> を opacity:0 にして src 抜き出して親要素の style="background-image:url()" に置換してた。今は IE 完全無視だけど。
ofi.js使ってる
ごめんライブラリ無しって読んでなかった
結局backgroundに置き換えるだけだから、結果同じだと思う
Re:2
ありがとうございます！
SEO意識しすぎなんですかね。
コーディングの日が浅いので、他にも例えば画像を<p>か<figure>かですごい悩んだりします。
文脈の1部かそうでないかって使い分けは分かるんですが、
そんな些細なことで時間使っちゃうんでもっと適当でいいんですかね。
Re:3
ありがとうございます！
最近はIE対応はデフォルトではしない会社が増えましたよね。
対象ユーザー次第なので案件にもよると思いますけど、今は特に意識しないのが普通なんですかね？
Re:5
ありがとうございます。
詳しく見てないのでライブラリの中身知らなかったんですが、
あれって結局backgroundにしてるだけなんですね、知りませんでした。
Re:6
figureはわかりやすく書くと補足に使うためのものって思っていい。文章に関連する要素だけど、それがなくても影響がないものっていう。だから使える範囲はかなり限定的。
ただ、figureタグに関してはSEOというよりは開発がコードを見た時にその要素が何かをすぐ理解できるためのものだと認識している。正直SEOへの影響はほとんどないんじゃないかな。
今のSEOってコードのタグ１つ１つとかの微妙なところじゃなくてコンテンツが重要視されてる、コンテンツSEOっていうのが主流。文章をどのタグで書くかじゃなくて、文章の中身が大事ってこと。ルール違反なタグの使い方はアウトだけど（text-indent等を使った隠し文字とか）、どっちが良いか悩む程度の話ならほんとに誤差。
ない
Re:11
理由は？