ひと昔前のモバイル対応
CSS
HTML
CSS
HTML
デスクトップとモバイル、それぞれ専用
の HTML と CSS を作って完全に分けて
いた
大変だなぁ
エンジニア
z さん
Slide 7
Slide 7 text
今はレスポンシブでモバイルファースト
CSS
HTML
レスポンシブ Web デザインでモバイルもデスクトップも同じ
HTML / CSS を使うようになった。
作り方の流れは、まずモバイル用に作ってから、徐々に画面サイ
ズが大きい環境用に最適化していくモバイルファーストのやり方
が推奨されている(主に Google に)
まずモバイル
エンジニア
z さん
次にデス
クトップ
Slide 8
Slide 8 text
レスポンシブ Web デザイン?
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
レスポンシブ Web デザイン 3要素
Fluid grid layout
液体のように柔軟なレイアウ
ト。px ではなく % や em な
どの相対的な単位を使う。リ
キッドデザインとも言う
Flexible image
デバイスに応じて適切な画像
とメディアを表示する
Media query
デバイスの機能を条件にして
CSS を出し分けすることがで
きる
CSS