HTMLコーディングのポイント

HTMLが文章構造の役割をするのに対し、CSSは見た目やデザイン・レイアウトを調整する役割になりますが、HTMLのタグ内にインラインでCSSの記述をしたり、行間をとるために＜br＞を重ねて記述するのは、保守性・メンテナンス性の低下につながります。

HTMLでレイアウトを作るような記述はせず、CSSと役割をわけるようにします。

画像の代替テキストとなるので、必要な場合alt属性に内容の記述をします。必要ない場合は属性の中には無記入でも問題ないです。

Webサイトの規模が大きい場合、styleの記述が競合する可能性があるので、競合を防ぐ事で保守性・メンテナンス性を向上させます。

必ずしも必要ではないですが、付ける形で統一している制作会社も多いです。

内容を表現するような名前にしていくのが一般的です。

構造上の骨組みはIDを使用し、それ以外は使わないなど、ルールを決めます。

IDの多用はコードの打消しに手間がかかる場合があり、コード全体の煩雑につながりますので、保守性・メンテナンス性を保つ為、極力使用しないようにします。

命名ルールを作り、それに沿って命名していきます。数字は使わず意味に沿って命名の統一をします。

h2_head01.jpg → h2_header.jpg

画像サイズを少しでも軽くする事になるのと、テキスト箇所のみ変更できるので、保守性が高くなります。

正常に動作しない・SEOに影響・保守性・メンテナンス性の低下につながりますので、W3Cのバリデーションでエラーが出ないかチェックします。

div.hoge → .hoge

0px → 0

0.5s → .5s

ハイフンでの区切りはgoogleでは推奨していますが、ローワーキャメル方式やアンダースコアで区切るなど、いずれかの形で統一する事が重要です。

hoge-box、hogeBox、hoge_box

CSSで表現できるものは極力CSSで表現します。

また、シンプルな動きにjQuery等のプラグインを使うとこちらも表示が重くなる原因になるなるべく使わないようにします。

制作会社によって変わってきますが、外部ファイルとして読み込ませる方法や、HTMLの＜/body＞の直上に設置する方法等で統一します。

HTMLソースコード内の記述が増え視認性・メンテナンス性の低下につながりますが、上記は必ずではなく、案件内容によって利用する場合もあります。

HTMLがかなりスッキリと見やすくなり、保守性・メンテナンス性向上につながります。

画像を入れるフォルダをimage、img、imagesのどれにするかなど、フォルダ名や階層構造は予め統一しておくと、作業の効率化につながります。

こちらもあらかじめ決めてテンプレート化しておくと、作業がスムーズになります。