新要素<picture>が便利!!ライセススタッフが書くブログ。Web制作のことTwitterfacebookGoogle+はてブpocketLINEHTML5.1から新要素としてpictureタグが追加されました。pictureタグは画像をマルチデバイス対応させる時にとても便利なので使い方をおさらいしていきたいと思います。今までは画像をマルチデバイス対応させるときは画像をmax-width:100%やCSSへメディアクエリを記述すること一手間かけて制御してきました。スプレッドで提供中!例としては下記のような記述になります。WING】pictureタグの中にsource属性をネストしきます。media属性に画面サイズの指定をして、srcset属性で画像パスの指定をします。画面サイズ993px以上は「992×150.png」が表示される。画面サイズ992px以下は「768×150.png」が表示される。画面サイズ768px以下は「480×150.png」が表示される。画面サイズ480px以下は「320×150.png」が表示される。それ以外(ブラウザがHTML5.1に非対応など)は「1200×150.png」が表示されるようになります。従来のCSSによるメディアクエリの設定よりだいぶ簡単になったと思います。ちなみに対応しているブラウザは下記のURLの通りになります。http://caniuse.com/#feat=picture主要なブラウザは大体網羅していますが、IE11とandroid4系には非対応なので、そこだけ注意が必要です。繁体字フォントWebを作るのは人。INFORMATIONraisez(ライセス)に興味を持った方は、是非チェックをしてください。NEWS2019/4/3納品情報:ミラクルサッカースクール様2019/2/1納品情報:DISIT様NEWS一覧RECOMMENDEDWebを楽しむのは人。CONTACTWeb制作、Webビジネスのご相談はお気軽にご連絡ください。Reserved.お問い合わせTOPへ戻る。