STERFIELD

レスポンシブコーディングの手順

レスポンシブコーディングの手順

レスポンシブコーディングの手順

コーディングする際に焦りがちの私、結局修正が山ほど出てきて、より遅くなる。
「急がば回れ」のどおり、今回は落ち着いて、コーディング作業に入る前に、
以下の手順を心がけて行うようにした。
 
 
・コーディングに入る前に、PCデザインとスマホデザインを比べてコーディング手順を考える
 
・どの部分が共通できて、どこが要素ごと入れ替えないといけないかを決める
 
・PCデザインがスマホデザインで共通できる部分があれば、
どの要素をどのような順番で作れば、スマホの場合うまくいくかを考える。
 
・画像スライドする際もスマホ用の画像とpc用の画像の名前を分かるようにルールを決める。
 
後、実際にコーディングに入るときには、
・子要素を出来るだけwidthを指定しないでpaddingやmarginで指定する
 
 
以前はどこの要素でもwidthを指定しがちですが、
必要でないところで指定しているとスマホの場合うまくいかない事がよくありました。

Author Profile

著者近影

スターフィールド編集部

SHARE

合わせて読みたい