【ヒカ☆ラボ】Webデザイナーが今覚えておくべきFlexboxとレスポンシブイメージ

【Webデザイナーが今覚えておくべきFlexboxとレスポンシブイメージ】鹿野「どの画像を使うかはブラウザが決めるという注意点がある」#ヒカラボ

2016-07-28 20:30:22

注意点としてブラウザによって挙動が違う。Firefoxだけ注意が必要 #ヒカラボ

2016-07-28 20:30:25

#ヒカラボどの時点でどの画像を使うかは、ブラウザが決めるのかー。

2016-07-28 20:30:30

#ヒカラボブラウザによって、キャッシュ周りの挙動が異なる。Firefoxはキャッシュを使わない。 pic.twitter.com/DE9SPX37mt

2016-07-28 20:30:48

拡大

#ヒカラボ「ブラウザが、表示するべき画像を決める」

2016-07-28 20:31:07

picture要素を使えば、アートディレクション対応できる。アートディレクションはデバイスにより、デバイスに適した画像の表示が可能。 #ヒカラボ

2016-07-28 20:32:42

【Webデザイナーが今覚えておくべきFlexboxとレスポンシブイメージ】鹿野「デバイスごとに違う見え方をさせるのをアートディレクションという。 HTML5.1ではそれを実現させるためにpictureという要素が実装された」#ヒカラボ

2016-07-28 20:33:25

#ヒカラボデバイスごとに最適な画像／見た目が違う画像を出し分けることを「アートディレクション」という。HTML5.1の新要素「Picture」を使う。

2016-07-28 20:33:35

#ヒカラボ「アートディレクション」

2016-07-28 20:33:49

picture要素はwebp(ウェッピー)画像対応有無の出し分けなんかにも使えます。 ics.media/entry/11711 (記事の後半参照) #ヒカラボ

2016-07-28 20:35:40

#ヒカラボ HTML5のpicture要素を使ってブラウザの幅と関係なく眠いのを我慢している全然効率的でない男性を出す - hitode909の日記 blog.sushi.money/entry/2016/06/…

2016-07-28 20:36:26

【Webデザイナーが今覚えておくべきFlexboxとレスポンシブイメージ】鹿野「主要ブラウザはsrcsetとsizes属性に対応 picture要素も主要ブラウザの最新バージョンでは対応している」#ヒカラボ

2016-07-28 20:39:12

【Webデザイナーが今覚えておくべきFlexboxとレスポンシブイメージ】鹿野「未対応のブラウザでも使いたい場合はpicurefill.jsというポリフィルをつかうことで実現できる」#ヒカラボ

2016-07-28 20:39:43

𝕡𝕦𝕚 𝕡𝕦𝕚 にゃもげら🐹 @nyamogera

気になってたところ、主要ブラウザでpicture要素やsrcsetちゃんと使用できる。 #ヒカラボ

2016-07-28 20:39:46

#ヒカラボ picture要素。iOS-Safariでもかなり最近の実装なのねー。

2016-07-28 20:40:28

【Webデザイナーが今覚えておくべきFlexboxとレスポンシブイメージ】鹿野「まとめ：レスポンシブイメージはレスポンシブなレイアウトを作るための画像表示の仕組み見た目の同じ画像の出しわけと見た目の違う画像の出しわけを要素と属性だけで行う」#ヒカラボ

2016-07-28 20:42:42

#ヒカラボレスポンシブイメージとは、レスポンシブなレイアウトを作るための画像表示の仕組み。見た目が同じ画像を出し分ける場合は、srcset属性とsizes属性を利用。見た目が違う画像を出し分ける場合はpicture要素を利用。

2016-07-28 20:42:54

#ヒカラボ pictureの中にsrcsetやsizesを併用することも可能。

2016-07-28 20:43:07

【Webデザイナーが今覚えておくべきFlexboxとレスポンシブイメージ】鹿野「多様なユーザー環境に対応すべき時代になっている　ブラウザの進化により使えるようになった技術がFlexboxとレスポンシブイメージ」#ヒカラボ

2016-07-28 20:43:24

#ヒカラボ鹿野さんのプレゼンは丁寧だし、要所要所でまとめが入るのがとっても頭に残りやすい。素敵っす。

2016-07-28 20:43:55

質問タイム Q. ポリフィルの顕著なバグはあるか？ A. バギーな場合もあるので、個々に回避していく必要がある #ヒカラボ

2016-07-28 20:47:33

質問タイム Q. どこまでdisplay:flexを使っているのか？ A. すべてdisplay:flexを使っている。入れ子でもすべてFlexboxでやっている。 #ヒカラボ

2016-07-28 20:49:14