HTMLコーダーの命名規則

2016/11/22 サイト制作, 技術系 投稿者:竹内

Keyboard03

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

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

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

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

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

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

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

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

img_css

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

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

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

カレンダー

    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

PRODUCE ネディアプロデュース
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)