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時間かけて試している光景はよくあります。

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

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

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

まとめ

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

PR

PR

-コーディング

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

超便利なEmmetのチートシート

「Sublime Text 3」+「Emmet」+「SASS」でコーディングをしています。 そんな「Emmet」のチートシートです。 Emmet Cheat Sheet あらためて見直すと知らないのが …

HHKBのCtrlのみで英語・日本語に切り替える方法

PFU Happy Hacking Keyboard Lite2 for Macの英語配列を購入しました。 それまで、Apple純正キーボードの日本語配列を利用していました。 英語配列に変更してから、 …

ワンランク上のコーディングを行うための6冊のオススメ本

HTML/CSSは、初心者でも簡単に使えますが、運用するとなると綿密な設計が必要です。 最近、自分の知識をアップデートするためにいろいろ調べたのですが、知識不足を実感し、あらためてHTML/CSSは奥 …

レスポンシブ用の画像を複数のサイズで自動生成

Responsive Image Breakpoints Generator レスポンシブWebデザインで、マルチデバイスに対応させる際、読み込む画像のサイズを複数設定したい場合があります。 そんな時 …

AltのチェックにはAlt属性値が表示できる「Web Developer」が便利

サイトを制作していて、Altに何が入っているのかチェックするのは結構大変ですが、私はずっとFirefoxのプラグインのWeb Developerを使っています。 Web Developer 使い方 い …

PR




人気の記事

プロフィール

KIYOTA
KIYOTA
Webデザイナー / ウェブ解析士
デザインとコーディングと制作現場が大好きなWebデザイナー(Webデザイナー歴13年)
コーポレートサイトを中心に、官公庁・公共施設・メディア・商業施設・不動産など多岐のジャンルのWebサイトを数百件制作。
モットーは「Speed & Quality」。
広範囲な知識・技術・経験を活かした素早い制作が得意。 WACA上級ウェブ解析士。