HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう | Kia King
WEBでレスポンシブ対応するときに結構大変なのが画像の扱い。iPhone等の高解像度デバイス(Retinaディスプレイ等)には2倍の画像を用意する必要があるし、最近は画面のサイズに会わせて画像を切り替えたい場合も多い。そんな時にHTML5のsrcsetがすこぶる便利だったのでご紹介します。 srcsetでできること 次のようなことが可能になります。 Retinaディスプレイ用に画像を切り替える ウィンドウサイズに合わせて画像を切り替える ウィンドウサイズに合わせて動的に画像を切り替える Retinaディスプレイ用に画像を切り替える 基本的な使い方は下記のような感じでimgタグに使用します。シンプルですね。 <img src="img/example-img.jpg" srcset="img/example-img.jpg 1x, img/example-img@2x.jpg 2x" alt
PCサイトのRetinaディスプレイ対応やっとく？ - やっぱりWebが好き - Writing Mode
今年からプライベートではMacBook Pro（13インチ）のRetinaディスプレイモデルを使っているから、最近はWebサイトの画像がボヤけて見えるのが気になって仕方ないのです。 これからはPCのディスプレイもどんどん高解像度になっていくであろうことを考えると、今からPC向けサイトのRetina（高精細）ディスプレイ対策もしっかり考えておきたい。 というわけで、備忘録がてら久々にWeb制作の現場感漂うエントリーをお届けしたいと思います。 これまでスマホ向けにしか考えたことのなかったRetinaディスプレイ対応ですが、やっぱり自分のマシンがRetinaディスプレイになってみるとPCでも本格的に対策せねばと考えてしまいます。 スマホやタブレット端末以外ではまだまだ普及率の低いRetinaディスプレイだけど、おそらく今後数年のうちにPCでも一般的になってくるんじゃないかな。 現状、Retina
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
