我流HTMLコーディング規約

カテゴリ: WEB、WEBシステム関連 / 公開日： 2010年1月23日（土曜）20:36 / 投稿者: Tom Goodsun

仕事上いろんなHTMLを扱うが、一番いやなケースがテーブルレイアウトされたHTML。
特にtdタグの中にtableタグを入れ子し、さらにtdとspacer.gifで隣の要素のマージンを調整しているケースは最悪だ。

この手の手法は、テーブルレイアウトが主流だった（今も使っている人もいると思うが）数年前では当たり前だった。
タグにwidth属性やheight属性を記述しており、CSSは色や線など装飾程度にしか使っていないという考えのサイト。

XHTMLの場合は、完全にCSSを外部化した上で、要素にidやclassを振るので、個人的にはメンテナンスもしやすいと考えている。
テーブルレイアウトはtableタグがたくさんでてくるので、どれがページ全体のフレームになっているのかわかりにくい。

そこで私が普段気をつけているHTML、CSS、JavaScriptのコーディング方法を紹介する。

参考にしたもの

  • プログラム言語の命名規則
  • JavaScriptプラグイン（Lightbox）などが生成するHTML

 

CSS、JavaScript、小さいプログラムはひとつのディレクトリにまとめる

私の恩師の方法を参考にしている。
ドキュメントルート、またはサイトのルートとなるディレクトリに、commonsourceというディレクトリを作って、その中にさらに、css、images、js、scriptsというようにディレクトリを分け、それぞれのディレクトリにそれぞれのファイルを入れる。
ディレクトリの定義は以下の通り。

  • css
    スタイルシートファイルを保管するためのディレクトリ。基本的にこのディレクトリ以下にはディレクトリは作成されない。CSSファイルはメインとなるdefault.css以外にコンテンツの名前などで名前を付けて管理する。
  • images
    画像を保管するためのディレクトリ。
  • js
    JavaScriptを保管するためのディレクトリ。パッケージ化されていない、比較的規模の小さいJavaScriptを格納する。
  • scripts
    パッケージ化されているJavaScriptプラグインや問い合わせフォームなどのプログラムを格納。たいていディレクトリに分けて入れる（Lightboxなど）。

恩師の場合はcommonsourceとしているが私はcommonとしている。commonはほかのプログラムでも使われる可能性があるので、避けたほうがいいかもしれない。
こうしている理由はいくつかあるが、大きくはPHPなどのプログラムがモジュールやライブラリと多くディレクトリを分ける可能性があるため。実際、CMSではそのようなことがあるのでこれにしているし、このほうがすっきりします。
 

文字コードは必ずUTF-8にする

これは最近のウェブサイトでは必須だろう。サーバー環境などやむをえない場合を除いてHTML、CSS、JavaScriptはUTF-8で保存する。
PHPを使う場合なども同じ。
理由はいくつかあるがJavaScriptの処理体系がUTF-8になっているため、Ajaxの戻り値もUTF-8になる。
またHTMLがXHTML互換のため、先頭に<?xml encoding="utf-8" version="1.0"?>とつけなくてはならなかったことなども理由のひとつ。
 

id属性、class属性の命名規則をはっきりさせる

概ねのこれらの値を設定するときは、単語の区切りを_（アンダーバー）にすることが多いように見受けられる。
私の場合以下のような規則でつけている。

  • id属性
    1文字目は英小文字、区切り文字は英大文字
    （例）：wrapper、contentWrapper、newsHeadlineArea1
  • class属性
    すべて英小文字、区切り文字は-（ハイフン）
    （例）formfield、content-articles、content-article-header

 

id属性はツリー関係で一意ではなくドキュメント全体で一意にする

CSSだとたとえば以下のような書き方ができる。

div.content #wrapper {・・・}
div.article #wrapper {・・・}

CSS的にはこれらは性格に位置を特定できるが、JavaScriptではこれは使えないので、id="wrapper"がそのHTMLの中で1回しか出てこないようにコーディングする。
これはつまり、CSSのidに対するスタイルにタグ名を平気しなくて良くなる。

冗長的な書き方の例　div#wrapper
推奨される書き方の例　#wrapper

 

テーブルレイアウトは極力避け、名前はわかりやすく

HTMLの意味的にはテーブルは表組みで何らかの一覧がそこに存在していると思われる。
そうでない使い方はしないことだ。ただフォーム関係など、CSSがとっても面倒くさくなるケースはあると思うので、良識の範囲内で使う。

またidやclass、name属性につける値は読んで意味のわかるものにしておこう。
のちのメンテナンスがしやすくなる。
 

HTMLコードの見易さ、タグの意味を優先して記述する

ページのデザインやレイアウトのことではなくHTMLのコードの記述の仕方である。
HTML中のテキストの体裁はどうでもいいので、私は長文をぶち込む際も見栄えの改行位置でHTML中は改行しない。つまり「～でした。<br />しかし、～」と書く。
この場合、長文テキストなので、いくつかの段落に分かれているだろうから、pタグを使って段落を囲み、HTML中のpタグは1行で書く。
詳しくは私のコードを見てもらえばいいだろう。
それから、インライン要素（プレーンテキストを含む）はブロックレベルのタグで囲み、その前後にむだなタブやスペースはつけない。そういったものはブロックレベルタグの前後つけて、HTML自体の入れ子構造がわかりやすいようにコーディングしていく。
 

JavaScriptはJavaのコーディング規約に従って書く

高級言語Javaには以下のような習慣上の決まりがある。守らなくてもいいのだが、これらにしたがって記述することによって効率を図るということだ。

  • 変数名・メソッド名
    1文字目は英小文字、区切り文字は英大文字
    （例）countStudent、totalSum、salesTax1
  • クラス名
    1文字目は英大文字、区切り文字も英大文字
    （例）HelloWorldApp、FixedNumber
  • 定数名
    すべて英大文字、区切りは_（アンダバー）
    （例）MAX_SPEED

JavaScriptに定数という概念はないので、定数として扱った気でいよう。
JavaScriptにビルトインされている関数や定数、変数もすべてこの形式に従っている。特に理由のないときはこの形式にする。