読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

レスポンシブWebデザインの実装

レスポンシブWebデザイン

レスポンシブWebデザインの画面設計


f:id:web-0818:20170108141719p:plain

ブレイクポイントの数とレイアウトパターン
  1. スマートフォンとPCの2種類のレイアウトパターンを切り替えるブレイクポイント1つ
  2. スマートフォンと小型タブレット、PCの3種類のレイアウトパターンを切り替えるブレイクポイント2つ


f:id:web-0818:20170108151320p:plain

ブレイクポイントの決め方
  1. 最小ブレイクポイント(スマートフォン用・レイアウトとそれ以外を分ける:480px、640px、768pxなど)
  2. 最大ブレイクポイント(PC用・レイアウト横幅固定:960px、978px、1024pxなど)
  3. 中間ブレイクポイント(スマートフォン用では横幅が広すぎて間延びしすぎる、PC用では窮屈すぎるといった場合に追加します)
画面設計を検討する際の注意点
  • コンテンツの位置調整はCSSのみでおこなうため、CSSの技術的制約を超えた配置変更は原則としてできません


f:id:web-0818:20170108151242p:plain


f:id:web-0818:20170108194139p:plain


カラムレイアウトの計算

Gridpx
  • グリッドデザイン計算ツール | Webデザイン便利ツール

www.kenjisugimoto.com


f:id:web-0818:20170109164334p:plain


RQRWD
  • レスポンシブWebデザインでの親要素に対する子要素の割合を自動計算します

rqrwd.com


f:id:web-0818:20170109164737p:plain