簡単に見えて以外と奥が深いのがHTML/CSSのコーディング。
今まで5,000ページ以上はコーディングをしてきましたが、未だに些細なことで予想外に時間をとられることはよくあります。
コーディング初心者をみていると、同じようなミスをしがちです。
コーディングをスピードアップするためには、いくつかコツがあります。
手順として覚えておくと、うっかりミスが減りスピードアップします。
こまめにバリデーションを行う
表示崩れの一番多い原因は、うっかり閉じタグを削除していたり、marginがmagrinとスペルミスをしていたりとイージーミスだったりします。
最近のミスは、納品前の最後にきた修正で<a>タグを削除したとき、閉じ</a>のタグをを削除し忘れていると指摘がありました。
急いでいる時ほど、このような単純ミスが増えるのでこまめなバリデーションは必須だと感じました。
ヘッダーなど、ひとつのまとまりをコーディングしたら、W3Cのバリデーションサービスなどを使って、ミスがないかをこまめにチェックをするといいです。
あとからまとめてチェックしようとすると、全体に影響を及ぼす部分だと修正にも時間がかかります。
HTMLのバリデーション
The W3C Markup Validation Service
https://validator.w3.org/
CSSのバリデーション
W3C CSS Validation Service
https://jigsaw.w3.org/css-validator/
こまめにブラウザチェックを行う
全て作って、ブラウザチェックを行うと表示崩れが起きていたとき、修正に時間がかかります。
例えば、
・IE8でbackground-sizeが効いてない
・フォントの違いで、テキストが改行している
・余白がブラウザによって違う
などは、よくあることです。
チェックしたときに対処しておけば、あとから修正する手間が省けます。
スマホサイトなどは、必ず実機でチェックを行ないます。
機種によりCSSの解釈が違ったりします。
最近、実機チェックをせずにミスした例として、iPhone 6 plusのSafariでbox-shadowが効いてなかったことです。
参考
iPhone 6 Plusでcssのbox-shadowが効かないバグに対応する方法 | シンスペース
数ページのコーディングなら、まだいいですが、100ページなどになると、ブラウザチェックを怠った時間のロスは大きいです。
とりあえず試してみる
例えば、「このclassが外すとうまくいくかもしれない」など頭の中でシミレーションし、
考えるだけで手を動かさない初心者は多いです。
まず、試してみる。
そして、ダメだったら次々と他を試して、エラーの選択肢を減らしていくことが手取り早いです。
あと試すときに大事なのは、「これは関係ないだろう」と思い込まないこと。
以外と、関係ない箇所の影響というのは多々あります。
普段使わない、IEのバージョンによる挙動の違いでハマることはよくあります。
すぐにググる
私の場合、自分のハマったエラーは、世界中の誰かがすでに解決していると思っています。
なので、少し考えてわからなかったら、すぐにググります。
初心者が時間をロスするひとつに、すぐに調べないことです。
調べたら1分でわかることを1時間かけて試している光景はよくあります。
考えることも大事ですが、調べてすぐにわかることなら、すぐにググることです。
ググらないために時間をロスしている人は多いです。
すぐにググると時間もストレスも減少できます。
同じようなことでハマっている人は、多いので、あまり考え込まずに、すぐに調べたり、同僚や仲間に聞いたりして時間のロスを防ぐことが大事です。
まとめ
コーディングは
コーディングする > チェックする をこまめに繰り返していけば、エラーによる表示崩れの大半は防げます。
その上で、おかしければ、試す > ググる をすぐに行うのがスピードアップのコツです。