新人コーダーが迷いやすいと言われている、ファイル名、id・class名の付け方。
この記事では、それぞれの命名規則やコツについてまとめたいと思います。
少しでも皆様の参考となれば幸いです。
共通事項
ファイル名、id・class名を付ける際の注意点
まず始めに、ファイル名、id・class名を付ける際の注意点から確認していきます。
難しいことはありません。
下記に注意して名前を付けるようにましょう。
１．半角英数字のみを使用する。
「日本語」、「全角英数字・記号」、「半角カタカナ」は使用することが出来ません。
２．記号は「-」（ハイフン）、「_」（アンダースコア）のみ使用する。
「\」（エンマーク）、「/」（スラッシュ）、「:」（コロン）、「*」（アスタリスク）、「?」（クエスチョン）、「”」（ダブルクォーテーション）、「<」（左アングルかっこ）、「>」（右アングルかっこ）、「|」（パイプ）はWindowsでファイル名に使用することが出来ません。 また、上記に含まれないその他の記号についても、プログラム上で誤った処理をしてしまい、エラーを引き起こす原因と成り得るので、使用すべきではありません。
３．機種依存文字は使用しない。
記号と同様、エラーを引き起こす原因と成り得るため、使用すべきではありません。
４．全角スペース、半角スペース(Space)は使用しない。
ファイル名にスペースを含んだ場合、ファイルを正常に処理出来なくなる可能性があります。
id・class名の場合、スペースを含んでしまうと別なid・classとして認識されてしまいます。
５．必ずアルファベットから開始する。（数字から開始しない）
数字から開始しているid・class名は、認識されません。
６．ファイル名は全て小文字で統一する
NG例）
- テキストファイル.gif
- \\text.gif
- img text
- 500px
なお、この記事ではファイル名の区切りを「_」（アンダースコア）、id・class名をローワーキャメル方式（2つ目以降の単語の頭文字を大文字にする方式※）に統一して説明していきます。
※indexTestなどといった形式を指します。
画像ファイル名編
基本ルール
それでは、具体的にどのように付けたら良いか。
先にサンプルを見てもらいましょう。
例）
- index_img01.jpg
- header_bg01.jpg
- news_ttl01.png
- page_ttl01.png
- btn_square_over.gif
- icon_triangle.gif
- nav_index_over.png
上記の例は下記ルールに添って付けられた名前です。
「ページ名」_「部位」_「種類：必須」_「詳細」「番号(連番)」_「状態」.「拡張子」
➀ ➁ ③ ④ ⑤ ⑥
それぞれの説明を行います。
➀「ページ名」
どのページで使用しているかを判断するために付けます。
ただし、画像フォルダがページごとに分かれている場合不要です。
例）
- 画像フォルダがページごとに分かれていない場合(/img/) > index_news_bg01.gif
- 画像フォルダがページごとに分かれている場合(/img/index/) > news_bg01.gif
➁「部位」
どの部分で使用しているかを判断するために付けます。
ただし、どこにも該当しない場合や付けられない場合には不要です。
例）
- 新着情報で使用している背景の場合 > news_bg01.jpg
- サイドバーで使用している画像の場合 > side_img01.jpg
※部位に関する命名規則のまとめはコチラ
③「種類」
どのような種類の画像なのかを判断するために付けます。
種類に関しては必ず付けるようにしましょう。
例）
- 写真画像 > img01.jpg
- ヘッダーで使用しているロゴ画像の場合 > header_logo.gif
※種類に関する命名規則のまとめはコチラ
④「詳細」
「種類」に対して詳細な説明が必要な場合に付けます。
例）
- 送信するボタンの場合 > btn_submit.png
- 丸いアイコンの場合 > icon_circle01.png
※基本的にはbtnとiconやnavのように汎用的な画像にしかつけません。
⑤「番号」
同じ用途の画像が複数あった場合に、番号を付けて分けます。
その際、付ける番号は必ず連番とします。
例）
- トップページで使用する写真Aの場合 > index_img01.jpg
- トップページで使用する写真Bの場合 > index_img02.jpg
⑥「状態」
ロールオーバーやカレントなどの、状態を表す必要がある際に付けます。
例）
- グローバルナビに使用する画像の場合 > nav_index_out.png,nav_index_over.png
- 現在地がindexページであることを示すグローバルナビ画像の場合(※) > nav_index_over.png
- レティーナディスプレイ用の画像の場合 > img_index_retina.png
- レスポンシブウェブデザインの際、スマートフォンでのみ使用する場合 > img_index_sp.png
※意味としてはcurrentが正しいですが、currentとして指定される画像はoverと同様のものが指定されることが多いので、同じ画像を２つ作成しないためにoverを使用します。
この規則を守ることで以下のようなメリットがあります。
- どんな種類の画像なのか、ファイル名だけで推測出来る
- どこで使われているか、ファイル名だけで推測出来る。
- 構造を意味する名前を付けることで、後々画像が変更になった場合でも画像名を変更せずに更新出来る。
名前を付ける時のポイント
ルールが決まった所で、名前を付ける際に気を付けるポイントを具体例と合わせて説明していきます。
１．特定の部位に使うことがわかっている場合、その部位の名前をファイル名に含める。
例）
- 見出しに使う画像の使う場合 > index_ttl01.gif
- ヘッダーの背景に使う場合 > header_bg.gif
２．見出し要素に使う画像や写真画像は複数存在する可能性が高いため、必ず連番を付ける。
例）
- トップページの見出しに使う画像の場合 > index_ttl01.png
- ブログページの写真に使う画像の場合 > blog_img01.jpg
３．一つの要素に複数の画像を使う場合は連番にする
例）
- ヘッダーに背景画像を2つ使う場合 > header_bg 01.gif, header_bg 02.jpg
４．要素・セレクタは同じだが、それぞれ違う画像を使う場合は要素名の直後に連番を入れること。
例）
- Aという見出しに使う背景画像の場合 > ttl_bg01.gif
- Bという見出しに使う背景画像の場合 > ttl_bg02.gif
５．ロールオーバー用の画像などはアンダーバー区切りで状態を表す英単語をつけること。
- 通常 ：○○_out.png
- ロールオーバー：○○_over.png
- 選択状態 ※１：○○_selected.png
- 現在地 ※２：○○_current.png
例）
- btn_contact_out.png
- btn_contact_over.png
- nav_news_selected.png
- nav_news_current.png
- ※１ クリック等により、選択状態として画像が登録されている際に使います。
- ※２ ナビ等に該当するページの内容が含まれている際に使用します。
「種類」まとめ一覧
画像や見出し、ボタンなど「種類」についての規則のまとめです。
「種類」
| 種類 | 規則 |
|---|---|
| 画像、図、写真 | img |
| サムネイル | thumb |
| バナー | bn |
| ボタン | btn |
| ロゴ | logo |
| ナビ | nav |
| 見出し ※１ | ttl |
| テキスト | txt |
| アイコン | icon |
| （アイコン以外の）背景 | bg |
| 矢印 | arrow |
| 線 | line |
| ページトップ ※２ | pagetop |
| スペーサー ※２ | spacer |
| ロード中 ※２ | loading |
※１ 見出し要素(hx)に使用する画像は、hxの名称を付けない方が更新性が高い。（見出しレベルが変更になった際に、画像名の変更を伴わないため）
※２ 単独で使用することが多いため、「種類」のみで使用する。
例）
- ページトップ > pagetop.gif
- スペーサー > spacer.gif
「部位」まとめ一覧
コンテンツやカテゴリなどの規則まとめです。
「部位」
| 部位 | 規則 |
|---|---|
| 新着情報 | news |
| お問い合わせ | contact |
| ページ全体 | container |
| ヘッダー | header |
| サイドバー | side |
| フッター | footer |
| メインコンテンツ | main |
| 次へ | next |
| 前へ | prev |
| お知らせ | info |
| リスト | list |
| 注釈 | notes |
| レイアウトのためのボックス | unit,box,col,area |
※もっと詳しいリストをまとめたページはコチラになります。
id・class名編
それでは、id・class名の命名規則についてお話していきます。
名前を付ける時のポイント
私がid・class名を付ける際に気を付けている事を、具体例と合わせてご紹介します。
１．idは大枠のレイアウトを構成する要素（例えばヘッダー・グローバルナビ・コンテンツ・サイドバー・フッター、セクションなど）に使用し、classはその中に入る子要素に使用する。
例）
- ヘッダー > #header
- グローバルナビ > #gNav
- お問い合わせボタン > .btnContact
- ページトップへ戻る > .pageTop
２．id・class名はデザインから決めるのではなく、「何処で」「何を表現」するのかを端的な名前で表す。
NG例）
- 通常テキストよりも文字サイズが小さい注釈 > .small
- 赤字コメント > .red
- 左寄せのブロック > .left
OK例）
- 通常テキストよりも文字サイズが小さい注釈 > .notes
- 赤字コメント > .comment
- 左寄せのブロック > .box
NG例とOK例の違いですが、NG例の場合には、注釈の色が変わってしまった場合「small」という小さいの意味をなさなくなってしまいます。
しかし「notes」という注釈の意味のid・class名を指定することで、色が変更になった際にも「notes」の意味を成さなくなることはありません。
同様に、「red」や「left」などのデザインを表してしまっているid・class名を付けるのは好ましくありません。
３．デザイン上、１つの要素では再現できない場合は「inner」を使用する。（背景が２つ重なっている時など）
例）
1 | <div id="header"> |
2 | <div class="inner"> |
3 | </div> |
4 | </div> |
※before、after擬似要素で再現できる場合には、不要な要素を増やさない意味で「inner」は使用しないようにしましょう。
４．「構造の意味の判斷がつかないもの」、「構造の意味がないもの」に関しては汎用的なid・classを付ける。
例）
- レイアウトのためだけのボックス > box
- ２カラムのレイアウト > unit2Col
- ３カラムのレイアウト > unit3Col
よく使うid・class名まとめ一覧
| 要素 | id・class名 |
|---|---|
| ページ全体 | container |
| ヘッダー | header |
| サイトのタイトル | siteTtl |
| ロゴ | logo |
| キャッチフレーズ | catch |
| ナビゲーション | nav |
| グローバルナビゲーション | gNav |
| パンくずナビゲーション | pagePath |
| コンテンツエリア | conts |
| メインコンテンツ | main |
| サイドバー | side, sideBar |
| フッター | footer |
| 記事 | article |
| 内側(入れ子構造) | inner |
| 案内 | guide |
| 話題 | topic, topics |
| 注目情報 | spotLight |
| 選び出す | pickup |
| 次へ | next |
| 前へ | prev |
| ページトップへ | pageTop |
| もっと見る | more |
| お知らせ | info |
| ニュース | news |
| 日付 | date |
| 更新履歴、沿革 | history |
| リスト | list |
| 項目 | item |
| 商品のリスト | goodsList |
| 写真エリア | photo, img |
| テキストエリア | txt |
| 図版エリア | figure |
| 注釈 | notes |
| バナー | bn |
| お問い合わせ | contact, inquiry |
| 非表示 | hidden, |
| 広告 | pr |
| 現在位置 | current |
| リード文 | lead |
| 最初の項目、最後の項目 | first（最初）, last（最後）, firstChild, lastChild |
| 奇数列、偶数列 | odd（奇数）, even（偶数） |
| レイアウトのためのボックス | unit, box, col, area |
| 他の要素に組み合わせて使う | box, area |
※もっと詳しいリストをまとめたページはコチラになります。
いかがでしたでしょうか？
ここまで読んで頂いた方は、今後、ファイル名＆id・class名の付け方で悩むことが少なくなるのではないかと思います。
このまとめを通して、皆様のお役にたてれば幸いでございます。
