pictureタグで画像形式(webpなど)とレスポンシブ切り替え対応をしよう
表示速度などの問題でwebp形式を使いたいけれど対応していないブラウザもあるし、レスポンシブの問題もあるしなーという時はpictureタグでうまく切り替えます。 目次1 コード2 YoutubeChannelのご紹介 コード とりあえずコードです。 第1候補で『sample.webp』を表示させます。画面を縮めた時にはほかの画像を表示させたいので、メディアクエリでmin-widthを設定します(次で設定するmax-widthの1つ前の数字)。 第2候補で画面を768px以下に […]