HTML5時代のフロントエンド開発入門 #glnagano

Fumio SAGAWA @albatrosary

#glnagano 白石さんのお話

Fumio SAGAWA @albatrosary

#glnagano モバイルファースト、モバイルがトレンド

Fumio SAGAWA @albatrosary

#glnagano レスポンシブデザイン、クライアントの環境に応じて見栄えを変える

Fumio SAGAWA @albatrosary

#glnagano 環境光にあわせたレスポンシブデザイン！

hiro345 @hiro345

HTML5Experts.jp というメディアがあるのか。 #glnagano

Fumio SAGAWA @albatrosary

#glnagano スクロールと動画が連動する！（すげw

Yoshiyuki Taniguchi @_iwate

スクロールに連動されるUIが模索されている #glnagano

hiro345 @hiro345

HTML5の世界になって、画像、動画、音楽が、ますます使われるようになってきている #glnagano

Yoshiyuki Taniguchi @_iwate

見たいコンテンツが何にも邪魔されず全面に出ていることがフラットデザインの肝 #glnagano

hiro345 @hiro345

キーワード Material design … google.com/design/spec/ma… #glnagano

hiro345 @hiro345

HTML5の最新動向 … 2014/Q4に勧告予定 #glnagano

hiro345 @hiro345

HTML5新要素 main, data, war, template #glnagano

katekichi @y_nakazawa1220

<main> 文章の「主要部分」を表すタグ #glnagano

hiro345 @hiro345

HTML5なくなった要素 group, details, summary, menu, menu item, dialog #glnagano

katekichi @y_nakazawa1220

<data>タグは後でもう一回調べる #glnagano

Kiyoshi SATOH @stealthinu

HTML5結構使えるタグの増減あるな #glnagano

Fumio SAGAWA @albatrosary

#glnagano レスポンシブイメージがそろそろ使える。スクリーンサイズに応じて使う画像を変える

GNU Nabe @nabe256

ディスプレイの大きさに合わせた表示が簡単にできる #glnagano

katekichi @y_nakazawa1220

「レスポンスブイメージ」：イメージをブラウザのサイズに応じたイメージをダウンロードしてくれる。 <picture>タグ #glnagano

GNU Nabe @nabe256

CSS3だと画面を起点としたサイズ指定ができる #glnagano

katekichi @y_nakazawa1220

<rem>タグは「使える」らしい。あとでまた調べる #glnagano

とみたまさひろ🍣🍺 @tmtms

おー、CSS で計算できるのか calc() 便利そう #glnagano

Fumio SAGAWA @albatrosary

#glnagano FlexBoxはほぼ全ブラウザが実装している

katekichi @y_nakazawa1220

CSS3:calc()は使えそう。JSでやらなくてもよさそう。 #glnagano

Fumio SAGAWA @albatrosary

#glnagano CSSボーダーに画像を使う Border Image