サイトコーディングの注意点

サイトをコーディングする際の注意点についてまとめました。

まずは大枠から作成する

いきなりサイトの細部から作り込まずに、大枠から作りましょう。
細部から作ってしますと、レスポンシブ対応のときにレイアウトが崩れて、修正が多くなってしまいます。
まずは、おおまかなレイアウト部分だけ作り、細かいところは後から作り込みましょう。

共通パーツを作る

例えば、ボタンのスタイルが同じであれば、同じクラス名を適用させて、
CSSに同じ記述を何度も書かないようにします。

デベロッパーツールを使う

Chromeであれば、「Command + option + i」で一発でデベロッパーツールが開きます。
デベロッパーツールから、CSSをいじったり、JavaScriptのデバッグなどが出来るので、
この使い方を覚えるのはフロントエンドの仕事をするには必須です。

CSSの優先度で悩まない

例えば、クラス属性よりID属性のほうが優先度が高いため、
後からクラスを指定しても適用されないことがあります。
ID属性の使用は控えて、極力、クラス属性を使うようにしましょう。

Sassを使う

CSSは記述が長くなるほど、影響範囲がでかくなるため、ごちゃごちゃしやすいです。
Sassを使えば、プログラミング言語のように、ブロック化、変数などが使えるため、破綻がしにくくになります。

Sassのインストールについては、以下の記事を参考にしてみてください。
※エディタはVisualStudioCode限定です。

【VisualStudioCode】拡張機能『Easy Sass』でSass使う方法

エラーチェックツールを使う

コーディングしたものを自動でチェックしてくれる機能がありますが、サクッとWeb上で確認できるサービスです。

HTMLは『The W3C Markup Validation Service』がオススメのです。

CSSは『CSS Lint』というサービスがあります。

いずれもコードを貼り付けるだけでエラーチェックをしてくれます。

  • このエントリーをはてなブックマークに追加
  • LINEで送る