HTMLコーダーの命名規則

今回はサイト制作において、idやclass、画像ファイルに用いる命名規則についてお話をしてみたいと思います。

一つのサイトを制作する際に全ページを私一人でコーディングすることが多かったのですが、最近は複数人でコーディングを行う機会も増えてきました。

そこで、複数人でコーディングを行う際のコーディング規約、特に今回は「idやclass、ファイル名に用いる命名規則」について、改めてまとめてみようと思います。

■idやclass名の前に、コーディングの工夫

まず、私のコーディングの手法として、「出来る限りidやclassを使わずにマークアップする」ことを念頭に考えています。

タグに細かくidやclassを付けても間違いではないのですが、HTMLのファイルサイズが大きくなり、見栄えもよくありません。
シンプルなHTMLソースでもCSSを工夫することによってマークアップは十分に可能です。

また、ファイル名についても「service/index.html」と作成することで「index.html」を省略して記述することができ、ソースがシンプルになります。

上記のコーディングルールに則った上で必要最小限のidやclassを付けていきます。

■idやclass名の必須ルール

まずは命名するにあたり、必須のルールを確認してみます。

・使える文字は「半角英数字」のみ

基本ですね。日本語や全角文字は使えません。

・使える記号は「-」「_」のみ

現実には他の記号が使える場合もあるようですが、この2点以外の記号は他のプログラムやブラウザーで誤作動のもとになるので使わないようにしましょう。
記号とは違いますが「スペース」も同様に使用できません。

・数字から始まってはいけない

盲点ではあるのですが、数字から始まるid、classは使用できません。

■私個人の命名規則

そしてここからは私個人の決まり事を紹介します。

・なるべく短い英単語で表記する

単語を3つも4つも繋げるような命名はなるべくしないようにします。
一つのタグに複数classを付けることもあるのでソースが汚くなってしまいます。

・安易な和製英語、日本語のローマ字表記は使わない

使ってしまいがちな「mail-magazine」は和製英語だったりします。
また「merumaga」「gazou」など、安易なローマ字表示を使用しないようにしています。
「なんかかっこ悪いよね」っていうのが主な理由です。

・redやlargeなど色やサイズを表すようなものにしない

コーダーではおなじみのルールです。仕様変更により色が変わったりした場合にCSSのみの変更だと「classにredが指定されているのに青い」といった気持ちの悪い事になってしまいます。

■画像名やファイル名のルール

基本的にはid、class名と同様ですが画像ファイルの指定方法にもちょっとした工夫をしています。

「場所」「種類」「連番」「状態」「拡張子」

画像ファイル名を観ただけで、「どのページで使われているどんな画像なのか」がすぐに分かるような命名にすると良いです。
画像ディレクトリ内でソートを行った際にページ毎にまとまって表示されるのでメンテナンス性も良くなります。

例）

• index_btn01_on.png（トップページのひとつ目のボタンのマウスオーバー画像）
• service_img04.jpg（サービスページの4枚目の写真）
• company_bg01.gif（会社概要ページの背景画像）

■ディレクトリ名（ページ名）のルール

上の方でも説明しましたが、サービスというページを作成する場合、ディレクトリを「service」とし、ページファイルを「index.html」にします。
そうすることで、ナビゲーションの記述をする際に「../service/」とすることができ、「index.html」を省いてソースをスッキリすることができます。
ここでのディレクトリ名についても今までの命名ルールと同様、半角英数字でページ内容を簡潔に表現する英単語になるよう気を使います。

■まとめ

HTMLのコーディングは、ブラウザ上の仕上がりの見た目は同じでも、作業者によってコーディング手法がまちまちです。
高いクオリティーでお客様に納品できるようコーディングのルールは統一した方が良いと思います。

今後は社内的にコーディング規約を作成し、命名規則に限らずもっと細かくルールを策定したいと考えています。
コーダー間だけでなく、プログラマーともソースのやり取りを行う上で必要となりますので、作業者全員が迷うことなく命名でき、結果として作業効率が上がり、納期短縮、顧客満足度の向上に繋がるのではないかと思います。

それと、同業の技術者がソースを見たときに「きれいなソースですね」と言われるような、誇れる技術者になれたらなと思います。

この記事を読んだ方はこちらも読まれています

「The pgsql driver is not currently installed」問題（Plesk環境）