低価格・高品質・最速のHTMLコーディングはクロノドライブへ

お電話でのお問い合わせ・ご相談はこちら 03-6416-5813 [C-0]

お見積もりフォーム

新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]

新人コーダーが迷いやすいと言われている、ファイル名、id・class名の付け方。
この記事では、それぞれの命名規則やコツについてまとめたいと思います。
少しでも皆様の参考となれば幸いです。

共通事項

ファイル名、id・class名を付ける際の注意点

まず始めに、ファイル名、id・class名を付ける際の注意点から確認していきます。
難しいことはありません。
下記に注意して名前を付けるようにましょう。

1.半角英数字のみを使用する。

「日本語」、「全角英数字・記号」、「半角カタカナ」は使用することが出来ません。

2.記号は「-」(ハイフン)、「_」(アンダースコア)のみ使用する。

「\」(エンマーク)、「/」(スラッシュ)、「:」(コロン)、「*」(アスタリスク)、「?」(クエスチョン)、「”」(ダブルクォーテーション)、「<」(左アングルかっこ)、「>」(右アングルかっこ)、「|」(パイプ)はWindowsでファイル名に使用することが出来ません。 また、上記に含まれないその他の記号についても、プログラム上で誤った処理をしてしまい、エラーを引き起こす原因と成り得るので、使用すべきではありません。

3.機種依存文字は使用しない。

記号と同様、エラーを引き起こす原因と成り得るため、使用すべきではありません。

4.全角スペース、半角スペース(Space)は使用しない。

ファイル名にスペースを含んだ場合、ファイルを正常に処理出来なくなる可能性があります。
id・class名の場合、スペースを含んでしまうと別なid・classとして認識されてしまいます。

5.必ずアルファベットから開始する。(数字から開始しない)

数字から開始しているid・class名は、認識されません。

6.ファイル名は全て小文字で統一する

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と同様のものが指定されることが多いので、同じ画像を2つ作成しないためにoverを使用します。

この規則を守ることで以下のようなメリットがあります。

  1. どんな種類の画像なのか、ファイル名だけで推測出来る
  2. どこで使われているか、ファイル名だけで推測出来る。
  3. 構造を意味する名前を付けることで、後々画像が変更になった場合でも画像名を変更せずに更新出来る。

名前を付ける時のポイント

ルールが決まった所で、名前を付ける際に気を付けるポイントを具体例と合わせて説明していきます。

1.特定の部位に使うことがわかっている場合、その部位の名前をファイル名に含める。

例)

  • 見出しに使う画像の使う場合 > index_ttl01.gif
  • ヘッダーの背景に使う場合 > header_bg.gif

2.見出し要素に使う画像や写真画像は複数存在する可能性が高いため、必ず連番を付ける。

例)

  • トップページの見出しに使う画像の場合 > index_ttl01.png
  • ブログページの写真に使う画像の場合 > blog_img01.jpg

3.一つの要素に複数の画像を使う場合は連番にする

例)

  • ヘッダーに背景画像を2つ使う場合 > header_bg 01.gif, header_bg 02.jpg

4.要素・セレクタは同じだが、それぞれ違う画像を使う場合は要素名の直後に連番を入れること。

例)

  • Aという見出しに使う背景画像の場合 > ttl_bg01.gif
  • Bという見出しに使う背景画像の場合 > ttl_bg02.gif

5.ロールオーバー用の画像などはアンダーバー区切りで状態を表す英単語をつけること。

  • 通常     :○○_out.png
  • ロールオーバー:○○_over.png
  • 選択状態 ※1:○○_selected.png
  • 現在地  ※2:○○_current.png

例)

  • btn_contact_out.png
  • btn_contact_over.png
  • nav_news_selected.png
  • nav_news_current.png
  • ※1 クリック等により、選択状態として画像が登録されている際に使います。
  • ※2 ナビ等に該当するページの内容が含まれている際に使用します。

「種類」まとめ一覧

画像や見出し、ボタンなど「種類」についての規則のまとめです。

「種類」

種類 規則
画像、図、写真 img
サムネイル thumb
バナー bn
ボタン btn
ロゴ logo
ナビ nav
見出し ※1 ttl
テキスト txt
アイコン icon
(アイコン以外の)背景 bg
矢印 arrow
line
ページトップ ※2 pagetop
スペーサー ※2 spacer
ロード中 ※2 loading

※1 見出し要素(hx)に使用する画像は、hxの名称を付けない方が更新性が高い。(見出しレベルが変更になった際に、画像名の変更を伴わないため)

※2 単独で使用することが多いため、「種類」のみで使用する。

例)

  • ページトップ > 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名を付ける際に気を付けている事を、具体例と合わせてご紹介します。

1.idは大枠のレイアウトを構成する要素(例えばヘッダー・グローバルナビ・コンテンツ・サイドバー・フッター、セクションなど)に使用し、classはその中に入る子要素に使用する。

例)

  • ヘッダー > #header
  • グローバルナビ > #gNav
  • お問い合わせボタン > .btnContact
  • ページトップへ戻る > .pageTop

2.id・class名はデザインから決めるのではなく、「何処で」「何を表現」するのかを端的な名前で表す。

NG例)

  • 通常テキストよりも文字サイズが小さい注釈 > .small
  • 赤字コメント > .red
  • 左寄せのブロック > .left

OK例)

  • 通常テキストよりも文字サイズが小さい注釈 > .notes
  • 赤字コメント > .comment
  • 左寄せのブロック > .box

NG例とOK例の違いですが、NG例の場合には、注釈の色が変わってしまった場合「small」という小さいの意味をなさなくなってしまいます。
しかし「notes」という注釈の意味のid・class名を指定することで、色が変更になった際にも「notes」の意味を成さなくなることはありません。
同様に、「red」や「left」などのデザインを表してしまっているid・class名を付けるのは好ましくありません。

3.デザイン上、1つの要素では再現できない場合は「inner」を使用する。(背景が2つ重なっている時など)

例)

1<div id="header">
2    <div class="inner">
3    </div>
4</div>

※before、after擬似要素で再現できる場合には、不要な要素を増やさない意味で「inner」は使用しないようにしましょう。

4.「構造の意味の判斷がつかないもの」、「構造の意味がないもの」に関しては汎用的なid・classを付ける。

例)

  • レイアウトのためだけのボックス > box
  • 2カラムのレイアウト > unit2Col
  • 3カラムのレイアウト > 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名の付け方で悩むことが少なくなるのではないかと思います。
このまとめを通して、皆様のお役にたてれば幸いでございます。

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ