Movatterモバイル変換

[0]ホーム

サクサク読めて、
アプリ限定の機能も多数！

アプリで開く

はてなブックマーク

閉じる

テクノロジー
なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点

気に入った記事をブックマーク

気に入った記事を保存できます
保存した記事の一覧は、はてなブックマークで確認・編集ができます
記事を読んだ感想やメモを書き残せます
非公開でブックマークすることもできます

なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点

テクノロジーカテゴリーの変更を依頼記事元:

parashuto.com

適切な情報に変更

エントリーの編集

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます

コメントを非表示にできますコメント表示の設定

ブックマークしました

ここにツイート内容が記載されますhttps://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

次回からTwitterへ自動リダイレクト

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

422usersがブックマークコメント

コメントするにはログインが必要ですブックマークを追加

ブックマークを追加

よく使うタグ

なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点

422 users

parashuto.com

よく使うタグ

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページへ

記事へのコメント26件

注目コメント
新着コメント

AmaiSaeta"サイズ変更のみの場合はimgにsrcset属性を使う" "アートディレクションを入れる場合のみpictureを使う"

2018/10/19リンク

その他

inoueyuworks <img imgset>: 画像の、ディスプレイ解像度こみで考慮して、良さげなリソースを一つ選ぶ; <picture>: media-query が最初に合致した画像を表示する。

html5

2022/03/15リンク

その他

AmaiSaeta"サイズ変更のみの場合はimgにsrcset属性を使う" "アートディレクションを入れる場合のみpictureを使う"

2018/10/19リンク

その他

tenchikometenレスポンシブ　画像　入れ替え

2018/08/19リンク

その他

yk_acサイズ変更のみの場合はimgにsrcset属性を使うアートディレクションを入れる場合のみpictureを使う

2018/08/17リンク

その他

istjcss

2018/07/13リンク

その他

idr_zzfigureがpictureに取って変わるわけではなくこれはあくまでレスポンシブ向けの要素なんでもかんでも<picture>要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点@rriverさんから

2017/03/29リンク

その他

shuuuuuny srcset picture

2016/06/01リンク

その他

steelydylanこういう情報にもアンテナを張っておこう。

2016/05/09リンク

その他

mzkzzzpicture要素、ios9.3から使えるようになったんだねえhttp://caniuse.com/#search=picture

2016/04/07リンク

その他

kitokitoki「サイズ変更のみの場合はimgにsrcset属性を使う,アートディレクションを入れる場合のみpictureを使う」

レスポンシブイメージ

2015/06/12リンク

その他

piano-kanrinin“<img srcset="img/400w.png 400w, img/800w.png 800w, img/1200w.png 1200w" alt="幅に合わせた寸法での表示の例">”

2015/03/09リンク

その他

jinjorメモ。

2015/03/02リンク

その他

skyfox_xxxめも

HTML5

2014/10/31リンク

その他

reactivationメモ

2014/10/14リンク

その他

xxxanxxx“srcset”

2014/10/10リンク

その他

tihata便利なのかと思いきや、mediaをCSSにかけないのはかなりおしっこちびりそう。

HTML5

2014/10/08リンク

その他

show-timaいつか使うことになりそうなのでメモ。

2014/10/07リンク

その他

s99e209画像サイズのみを変更する（解像度の変更）場合はimgにsrcset属性を使う。一方、スクリーンサイズによって違う内容の画像を表示する（アートディレクションを入れて画像を変更する）場合のみpictureを使う。

*webデザイン

2014/10/07リンク

その他

mellow-mikanふむふむ

2014/10/07リンク

その他

thesecret3そろそろhtml5でいいのかな。。

2014/10/07リンク

その他

ku_marinmediaの部分cssの方に書きたいけど出来るのかな〜出来たらいいな。しかしめんどい_(:3 」∠)_

2014/10/07リンク

その他

qrac_jpレスポンシブ画像切り分け。

2014/10/07リンク

その他

y-kawazひたすら面倒くさいな…。フロントやってる人達は偉いと思う。

2014/10/07リンク

その他

clstk画像の扱いについて。

2014/10/07リンク

その他

suei0921（ピクチャー要素）

2014/10/07リンク

その他

XIAORING picture img responsive 画像解像度

2014/10/07リンク

その他

コメントするにはログインが必要ですログインしてコメント

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

プレビュー

はてなブックマークボタンを作成して埋め込むこともできます

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

usersに達しました！

さんが1番目にブックマークした記事「なんでもかんでもp...」が注目されています。

気持ちをシェアしよう

ツイートする

なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点

画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な...画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログで、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。まずは推奨の記述方法からレスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです：とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブしておいて、使う時にもう一度見な