【HTML / CSS基礎】pictureタグでレスポンシブ対応

みなさん「pictureタグ」はご存知ですか？

pictureタグはCSSを使わずにHTMLだけで画像をレスポンシブできるタグです！

pictureタグを使えば、PC版とスマホ版で「display: none;」や「display: block;」で画像を切り替える必要がなくなります。

1つ上のレベルの技術ですが、この機会に習得してしまいましょう。

pictureタグの使い方

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

pictureタグは、sourceタグとimgタグを囲むようにして使います。

画像を設定するのはsourceタグとimgタグになります。

sourceタグの属性に条件を指定することで、「〇〇px以上のときはabc.pngを表示する」のようにレスポンシブ対応が可能です。

sourceタグを複数書いて様々な画面サイズに対応する画像を表示することもできます。

実例

media属性に (max-width: 800px) とすることで、800px以下のときにsrcset属性で指定した画像が表示されます。

media属性の条件に当てはまらない場合、つまり801px以上の時はimgタグのsrc属性で指定した画像が表示されます。

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

pictureタグを使うと、HTMLだけで画像を切り替えられるようになります。

画面サイズ以外にも、デバイスの解像度で切り替える方法もあります。

気になる方は是非調べてみてください。 

＜参考リンク＞ pictureタグ 画像要素 MDN Web Docs

全国どこにいても学べる！超優良のプログラミングスクールまとめました
【国内完全網羅】現役エンジニアが厳選したおすすめのプログラミングスクール

自分の住んでるエリアでプログラミングスクールを探したい⭐️

エリア別で、おすすめのプログラミングスクールをまとめました。

ぜひ参考にしてみてくださいね。

北海道 / 東北

北海道 / 青森 / 秋田 / 岩手 / 山形 / 福島

関東

群馬 / 栃木 / 埼玉 / 茨城 / 東京 / 千葉 / 神奈川

中部

福井 / 石川 / 岐阜 / 愛知 / 富山 / 長野 / 山梨 / 静岡 / 新潟

近畿

兵庫 / 京都 / 大阪 / 滋賀 / 奈良 / 三重 / 和歌山

中国

山口 / 島根 / 鳥取 / 広島 / 岡山

四国

愛媛 / 香川 / 高知 / 徳島

九州 / 沖縄

長崎 / 佐賀 / 熊本 / 福岡 / 大分 / 宮崎 / 鹿児島 / 沖縄