例えば、スマホ端末に対して1920×1080の画像を表示するのはムダです。 もっと小さいサイズでいいですからね。 逆にデスクトップPCだと画面が大きいので、1920×1080の画像を表示しても良いですよね。 このように デスクトップPC →1024×682の画像を表示する ノートパソコンPC →640×426の画像を表示する スマホ →400×266の画像を表示する という風に、大きさの異なる画像を出し分けたいときに使うのがsrcset属性です。 srcset属性のデモページ（ソース） ※後述していますが、ChromeやSafariの場合はスーパーリロードしないと画像が切り替わりません 例えば、以下のように書くと <img srcset="small.png 400w, medium.png 640w, large.png 1024w" src="large.png" /> imgタグは、
レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。 ※SYMMETRIC公式BLOGと統合し、ブログ名称を変更しました レスポンシブの画像切り替えができるsrcset属性 2019.07.12 2024.04.02 HTML レスポンシブ こんにちは、開発チームの青木です。普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」に携わっています。 今回は、レスポンシブの画像出し分けを適切に行うことができるsrcset属性についてお話していきます。 レスポンシブデザインのウェブサイトで使用される画像について、PC画面ではバランスの良い見た目だったのに、スマホ画面では画像で注目したい対象物が思ったより小さく表示されているように見えることがあります。 本記事ではこのような場面で活躍する、srcset属性の使用方法
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く