FEVDES BLOG

自分の経験をシェアしたい。Webデザインのテクニック&効率化。

思ったより時間がかかった…初心者がコーディングで時間をロスしない方法

   

https---www.pakutaso.com-assets_c-2015-06-PAK85_notepc20150319202127-thumb-1000xauto-18289

簡単に見えて以外と奥が深いのがHTML/CSSのコーディング。
今まで5,000ページ以上はコーディングをしてきましたが、未だに些細なことで予想外に時間をとられることはよくあります。

コーディング初心者をみていると、同じようなミスをしがちです。
コーディングをスピードアップするためには、いくつかコツがあります。
手順として覚えておくと、うっかりミスが減りスピードアップします。

SPONSORED LINK

こまめにバリデーションを行う

表示崩れの一番多い原因は、うっかり閉じタグを削除していたり、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時間かけて試している光景はよくあります。

考えることも大事ですが、調べてすぐにわかることなら、すぐにググることです。
ググらないために時間をロスしている人は多いです。

すぐにググると時間もストレスも減少できます。

同じようなことでハマっている人は、多いので、あまり考え込まずに、すぐに調べたり、同僚や仲間に聞いたりして時間のロスを防ぐことが大事です。

まとめ

コーディングは
コーディングする > チェックする をこまめに繰り返していけば、エラーによる表示崩れの大半は防げます。
その上で、おかしければ、試す > ググる をすぐに行うのがスピードアップのコツです。

 - コーディング