スマホの時だけ画像非表示にしてくださいってたまに言われます
本当はスマホ用の画像を用意した方がいいのですが時間や予算がまったくなかったりするときのための方法
元の状態
See the Pen
wvaGyLX by sphenisc (@sphenisc)
on CodePen.
完成版
See the Pen
ZEGWrgd by sphenisc (@sphenisc)
on CodePen.
imgタグには疑似要素を付けられないのでimgの上のh4にafterを付けてJSで imgのalt → afterのdata-label へと中身を移してからCSSのafterのcontentとして表示しています。
alt属性はそもそも画像が表示できない場合の代替テキストを書くための場所なのでSEO的にも問題なし
JSなしでやりたい場合
See the Pen
jOPqzPd by sphenisc (@sphenisc)
on CodePen.