どうも7noteです。コーディングする時のマイルールを紹介します。

①不明点を潰す

コーディングをする前に、ページの仕様を確認します。

など、事前にディレクターやデザイナー、もしくは依頼主に確認するようにします。
特にデザインデータには動きやhover時の説明がないことがあるので、事前に確認しておくことで組み直しなどの二度手間を防ぐことができます。

提出日などもしっかり確認しておきます。

レスポンシブサイトならPCとスマホを1つのソースで作らなければならないので、できる限り綺麗に書く為事前に両方のデザイン案に目を通します。

私はPCファースト（パソコンデザイン優先）でコーディングをすることが多いのですが、あとでスマホ表示に切り換えるときに組み換えが少なくて済むように設計をするためです。

PCとスマホではボタンの位置が全く違うなと思えば、「2種類用意してそれぞれPC用・スマホ用のCSSを書かなければ。」などを事前に考えておきます。

デザインデータを紙に印刷して、色ペンでデザインの上にメモを入れていきます。

記載する内容はおおきく2種類です。

コーディングしている最中に手が止まってしまうと、効率が悪くなるので、
予め要素の構造やクラス名、組み方などを設計しておくことで迷う時間を減らすのが目的です。

A4かA3一枚に印刷したほうが、全体像を見ながら設計できるのでおすすめです。

設計図をもとに、HTMLに書き起こしていきます。
このときに、リンク先のURL名や画像名は必ず書いてください。
「あとで考えよう～」と放置するのはしません。

仮でもいいので、名前を付けてください。
放置してしまうと、あとでその放置した場所を探す余計な時間がかかってしまいます。
今悩んでもあとで悩んでも、出てくるクラス名はどうせ一緒なので、放置せず全て書くようにしてます。

そしてHTMLを書く際は必ず上から順番に書いていきます。
これも先ほどの理由と同様に、「複雑な構造だからあとで考えて書こう」というのはしていません。

慣れてくると、設計図なしで③と④は同時に行うことができるようになります。

デザインデータから画像を書き出します。
デザインツールの基本的な操作はマスターしておくと早いです。

その後、書き出した画像が全部ちゃんと読み込みできているか確認します。

（私はPCから派）

CSSを書いていきます。

もちろんCSSの都合上、HTMLのタグを書き換えたりもあるので臨機応変に対応します。
クラス名などは全部HTMLを作成した際に決めているので、スムーズにCSSを書くことができます。

ツールなども使いつつ、デザインと見比べます。
ズレている箇所があれば、修正します。

iphone5・SEのサイズで見たときに崩れる事が多いので、検証ツール（F12）を使って抜けがないよう様々な機種やブラウザで確認します。

HTMLとCSSのみを使う場合のマイルールなので、全員が全員この通りにやっているわけではないので、あくまで1つの方法として参考にしてもらえれば。
SASSを使う事もありますし、複数ページにまたがればまた作り方が変わってきます。

ちいさい変化かもしれませんが、早い段階で作り方を癖づけておくとトータルでは何日分や何週間分の時短に繋がるので、コーディングの時にはマイルールを決めて取り組む事をおすすめします。