STERFIELD
開発ナレッジ2013.10.30

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

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

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

WRITER

スターフィールド編集部

この著者の記事を見る

CONTACT

記事の内容について
相談したい方へ

実際の進め方は、状況を伺ってからご提案します。

2営業日以内にご返信します
資料ダウンロード無料相談に申し込む