もう迷わない！id・class名、画像ファイル名の付け方まとめ

「自分で考えたこのclass名って問題ないのか…」
「この画像にはなんて名前をつけるのが適切なのか…」

id・class名、画像ファイル名の付け方で悩んでいる新人コーダーは、私を含め少なくないと思います。
今回は、そんな悩みを解決するべく画像ファイル名とclass・id名の付け方についてまとめたいと思います。

画像ファイル名、id・class名の共通ルール

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

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

また、画像フォルダに「日本語」、「全角英数字・記号」、「半角カタカナ」を使用すると、画像が表示されない場合があるので、半角英数字のみ使用するようにしましょう。

2「-」（ハイフン）、「_」（アンダースコア）、
「.」(ドット※画像ファイル名のみ)以外の記号は使用しない。

エラーを引き起こす原因となるので、使用してはいけません。

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

機種依存文字とは、その名の通り、各機種（MacやUNIXなど）に依存し、特定の環境でしか正常に表示されない文字のことです。
仮に、他の環境で表示させた場合、文字化けを起こして読めなくなります。

記号と同様、エラーを引き起こす原因となるので、使用してはいけません。
文字を変換するときに、文字の右側に<機種依存文字>と表示されるので、そこで判断できます。

4スペース(Space)は使用しない。

id・class名にスペースを含んでしまうと、その要素に付けられた二つ目のid・classとして認識されてしまいます。

また、画像ファイル名にスペースを使用するとファイルを正常に処理出来なくなる可能性があるので使用すべきではありません。

5数字や記号から開始しない

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

画像ファイル名に使用した場合もファイルを正常に処理出来なくなる可能があるので使用すべきではありません。

id・class名の形式

まずはid・class名の形式を決めておきましょう。

例)ヘッダーの背景画像の場合

・header-bg.jpg
単語と単語の間に「-」(ハイフン)を挟む。

・header_bg.jpg
単語と単語の間に「_」(アンダースコア)を挟む。
この書き方のことを「スネークケース」といいます。

・headerBg.png
後に続く単語の頭文字を大文字にする。
この書き方のことを「キャメルケース」といいます。

上記の3通りの中から、自分が使いやすいと思う書き方に統一しましょう。

画像ファイル名の形式

画像ファイル名のフォーマットは、id・class名の形式と統一するのが個人的には好ましいと思います。
もちろん、最後に拡張子は付け足して下さいね。

画像ファイル名の基本ルール

「ページ名」_「位置」_「種類(要素)」_
<1>　　　   <2>　　　　<3>
「詳細」「番号(連番)」_「状態」.「拡張子」
<4>　　　 <5>　　　　 <6>

上記が基本的な画像ファイル名の付け方です。

このルールを守る利点として

・ファイル名を見ただけでどんな種類の画像でどこで使われているのか推測出来る
・後々画像が変更になった場合でも画像の名前を変えずに更新することが出来る

この2点があげられます。

1.ページ名

どのページで使っているかを判断するために付けます。
ですが、ページごとに画像フォルダを分けている場合は不要です。

例）
画像フォルダがページごとに分かれていない場合(/img/)
index_news_bnr01.png

画像フォルダがページごとに分かれている場合(/img/index/)
news_bnr01.png

2.位置

どの部分で使用しているかを判断するために付けます。

例）
ヘッダーで使用している背景の場合
header_bg01.png

サイドバーで使用している画像の場合
side_img01.png

よく使う部位一覧

ページ全体	container
ヘッダー	header
サイドバー	side
フッター	footer
メインコンテンツ	main
サブコンテンツ	sub
検索ボックス	search
ニュース	news
お知らせ	info
お問い合わせ	contact
次へ	next
前へ	prev
リスト	list
注釈	notes
レイアウトのためのボックス	unit,box,col,area

 

※もっと詳しく知りたい方はコチラをご覧ください。

3.種類(要素)

どんな種類の画像なのかを判断するために付けます。

例）
写真画像
img01.jpg

ヘッダーで使用しているロゴ画像の場合
header_logo.png

よく使う種類一覧

画像、図、写真	img,photo
サムネイル	thumb
バナー	bnr
ボタン	btn
ロゴ	logo
ナビ	nav
見出し	ttl
テキスト	txt
アイコン	icon
背景	bg
矢印	arrow
線	line
ページトップ	pagetop

4詳細

3の「要素」に対して詳細な説明が必要な場合のみ付けます。
基本的にはbtnやiconのように汎用的な画像にしかつけません。

例）
リセットするボタンの場合
btn_reset.png

丸いアイコンの場合
icon_circle.png

5番号

同じ用途の画像が複数あった場合に、連番で番号を付けて分けます。
連番は2桁でつけるようにします。

例）
サイドバーで使用するバナーAの場合
side_bnr01.jpg

サイドバーで使用するバナーBの場合
side_bnr02.jpg

6「状態」

ロールオーバー(マウスカーソルが要素の上に乗った時)やカレント(現在地表示)などの、状態を表す必要がある際に付けます。

ロールオーバー：○○_over.png、〇〇_hover.png
選択状態　：○○_selected.png
現在地　　：○○_current.png、〇〇_here.png

例)
・現在地がAboutページであることを示すグローバルナビ画像の場合
nav_about_over.png

・レスポンシブウェブデザインの際、スマートフォンでのみ使用する場合
img_index_sp.png

class・id名の基本ルール

基本的には、画像ファイル名をつけるときのルールと同じです。（ページ名と拡張子は省きますが。）

ただ、id・class名は意味が分かる範囲で、可能な限り短くしたほうがいいので、省いても意味が通じるものは省きましょう。

id・class名の付け方コツ

1.画像ファイル名とid・class名をなるべく統一する

統一出来る部分は統一することで名前を考える手間も省け、変更箇所の特定がしやすくなります。

例)
・id名
#top-side-nav

・画像ファイル名
top-side-nav-home.png
top-side-nav-access.png

2.デザイン(「見た目」や「位置」)ではなく、
内容（「何処で」「何を表現」するのか）から名前をつける。

見た目や位置に関するid、class名をつけてしまうと、サイトの仕様が変更された場合に矛盾が生じてしまいます。

例)
・left、right_box …
left や right などの位置を表す名前は、後で左右を入れ替えた場合などに矛盾が生じてしまいます。

・red、green …
red や green などの色を表す名前は、後で色を変更した場合などに矛盾が生じてしまいます。

・w500px、size18 …
サイズを表すような名前は、後でサイズを変更した場合などに矛盾が生じてしまいます。

まとめ

命名規則を守る一番の理由は、作業の効率化につながるからです。
会社などで命名規則が決まっている場合はその内容に沿って名前を付けるようにすることで、自分以外の人が書いたソースを見て混乱することが減りますし、その逆もまた然りです。

今回ご紹介した命名規則は、あくまで一例です。
複数人でコーディングしていく場合以外を除き、自分が作業しやすいように自分ルールをつくっていくのもいいかもしれません。

この記事を通して、読者の方が今後、画像ファイル名、id・class名の付け方で悩む時間が少しでも削減できれば幸いです。