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

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

HTMLコーディングを行う上で重要なのが、記述のルールを決める事や、メンテナンス性を考え組み立てるHTMLコーディングを意識する事です。

Webサイトの見た目は同じでも、作る人のHTMLコーディングのクセや得意分野によって、記述されるソースコードは全然変わってきます。

複数人数でWebサイト制作からHTMLコーディングをする場合、それぞれの得意不得意でコードの記述がバラバラになってしまうと、保守性・メンテナンス性が落ち、作業効率も下がってしまうので、HTML・CSS共に基準を決めルールを作り、統一していく事が重要です。

以下は、HTMLコーディング制作現場でよくある基準を定めた方が良い事例や、保守性・メンテナンス性やSEOにもつながってくる記述の文法上の正確性につながるために必要な基本事項をポイントとしてまとめました。

  • ●HTMLとCSSの役割をしっかりと分ける

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

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

  • ●画像にalt属性を入れる

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

  • ●bodyタグにページ名となるclassを付ける

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

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

  • ●class名・ID名はわかりやすくシンプルに命名する

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

  • ●インデントがバラバラにならないようルールを統一する

  • ●IDは極力使わないようにする

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

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

  • ●画像ファイル名は意味をわかりやすくする

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

    h2_head01.jpg → h2_header.jpg

  • ●画像パスは絶対パスで記述しないようにする

  • ●画像の内、テキストで記述できるものは極力画像化しない

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

  • ●W3Cの基準に沿って正確な文法のコードを記述するようにする

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

  • ●セレクタの修飾は避ける

    div.hoge → .hoge

  • ●プロパティの記述はできる限りまとめて記述する

  • ●プロパティの記述順をABC順など統一させる

  • ●0pxや0.5sの時は単位や数値の省略をする

    0px → 0

    0.5s → .5s

  • ●クラス名やIDの区切り方を統一する

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

    hoge-box、hogeBox、hoge_box

  • ●プロパティ名の右となりにダブルコロンと値の間にスペースを入れる

  • ●別のセレクタをカンマで区切る時は、改行して記述する

  • ●JavaScriptの記述は必要最小限にする

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

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

  • ●Javascriptの読み込み場所を統一する

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

  • ●単独プロパティで汎用するclassは極力使用しない

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

  • ●classは可能な限り親要素に付け、子要素へはつけないようにする

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

  • ●更新によって数が増える可能性がある箇所は、意識してHTMLコーディングするようにする

  • ●コメントの書き方・囲み線の使い方を統一する

  • ●ディレクトリの階層・基本的なフォルダ名・ファイル名はルールを決めておく

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

  • ●<head>内のmeta要素を最低限必要なものを統一する

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

案件や制作の内容によって必ずしも上記の形にしなければならないわけではなく、あくまでもHTMLコーディング作業を効率化するために、基準を統一していく事が重要となります。

シーサーコーディングは完全オンライン対応により、お客様に合った高品質・低価格のHTMLコーディングを実現します。まずはお気軽にご相談下さい。