HTML
CSS

画像名について考える

CSSのCLASSやIDと同じく、これも最低限の命名方法があると仕事が捗りやすいかなと思ったのでメモ。

基本的にはよく使われている接頭辞つけて、ディレクトリを細かに切ってわかりやすくという感じ。

いろんなコーディング規約を見ると、枝に連番つく事が多いんだけど、私はイマイチそれが好きじゃない。
自分が最初から最後まで面倒見るなら変な名前つけても自業自得だけど、いつどこで担当変更になるかわからない事を考えると、画像名も手を抜かない方がいいだろうなと思ったりします。

基本的な事

  • pngファイルはコミットする前に軽量化する
    • mageOptim とか利用する
  • スペース用透過画像は使用しない
  • 単語をつなげる場合はハイフン(-)を使用する
    • IDやCLASSの背景画像なら、IDやCLASS名と同じ名前つけるとわかりやすいかも
  • 短縮する場合は、一般的に広く使われる名称を使う

画像につけるプレフィックス(接頭辞)

種類 画像プレフィックス(接頭辞)
タイトル(h1〜h6) hx_ h1_profile.png
サブタイトル(h以外) ttl_ ttl_nickname.png
背景 bg_ bg_section.png
グローバルナビゲーション gnav_ gnav_profile.png
ローカルナビゲーション local-nav_ local-nav_profile.png
ナビゲーション nav_ nav_profile.png
バナー bnr_ bnr_ad.png
ボタン btn_ btn_submit.png
ロゴ logo_ logo_product.png
アイコン icon_ icon_profile.png
矢印 arrow_ arrow_brown-left
ライン line_ line_brown.png
写真 pic_ pic_goods.png
その他画像 img_ img_cut.png
テキスト txt_, text_ txt_nickname.png, text_nickname.png
メインビジュアル visual-img_ visual-img_index.png

画像につけるサフィックス(接尾辞)

種類 サフィックス(接尾辞)
マウスオーバー _on
現在位置 _cr
無効 _disable
注釈 _caption

プレフィックス(接頭辞)とサフィックス(接尾辞)が併用される場合

種類 画像プレフィックス(接頭辞)とサフィックス(接尾辞)
グローバルナビゲーション(マウスオーバー) gnav_x_on gnav_profile_on.png
グローバルナビゲーション(現在位置) gnav_x_cr gnav_profile_cr.png
ボタン(マウスオーバー) btn_x_on btn_submit_on.png
ボタン(無効) btn_x_disable btn_submit_disable.png
写真の注釈 pic_x_caption pic_goods_caption.png
その他画像の注釈 img_x_caption img_cut_caption.png

悩みどころ(良い方法があったら教えてほしい)

単語をつなげる場合、どういう順番にするか思案中。
名前で並べた時に、同じ色の矢印はひとかたまりで出てきてほしいので色を先に持ってきた。

arrow_brown-down.png
arrow_brown-left.png
arrow_brown-right.png
arrow_brown-up.png

arrow_red-down.png
arrow_red-left.png
arrow_red-right.png
arrow_red-up.png

…という感じで一覧表示したい。

また、 プレフィックスとサフィックスを併用する画像が出てきた。
微妙な単語の並びもあるけど、管理のしやすさを考えると今はこれがベストなのかなと思う(ベターではない)。

その他、命名に連番使った方が悩まなくて済むという話も多いけど、コンテンツの順番が変わってしまうとimg_01.pngの前にimg_02.pngが来ちゃったりするのが個人的には気持ち悪いのでやめたい。

View側から見ると名前や連番云々はまったく関係ないのだけど、運用面側から見ると、少しでもきれいに並んでくれた方がうれしいなあと思ったりします。