HTMLのidとclassの名前に迷った時に使えそうな命名をまとめてみた

HTMLをコーディングするとき、idやclass名に悩む人もいると思います。依頼された制作物など人に見られる物ならなおさらです。そんな時に使えそうな名前をまとめてみました。

ネーミングに便利なサイト

• Google 翻訳 : 日本語を入れると複数の候補を表示
• codic : 日本語(文章も可)を入れると英単語に変換

迷った時に使えそうな名前

メイン要素

• header
• wrapper
• container
• contents
• main
• article
• navigation
• footer

部分要素

• section
• feature
• bar
• banner
• panel
• topic
• history
• trend
• info
• archive

囲み要素

• wrap
• group
• block
• outline
• outer
• division

内部要素

• inner
• content
• body
• in
• element

小さな要素

• item
• box
• area
• entry
• detail
• description
• layout
• column
• left / right
• top / bottom
• head / foot

小さな部品

• title
• name
• headline
• text
• sub
• list
• side
• more
• link
• thumb
• media

付け方・使い方

• 名前を繋げる – main_inner, itemWrap, entry-body
• 名前を略す – text:txt, element:elem
• タグ名を使う – .th .td .dt .dd
• 連続するものは複数形にする – items, lists
• 数字をつける – section1, text1

名前を繋げるときに、ハイフン・アンダーバー・大文字にするのかその人の好みかもしれませんが、使うには理由があるはずです。

– (ハイフン) : 見やすい。使用しているサイトが多い。
_ (アンダーバー) : エディタでダブルクリックで選択できることが多い。他のプログラミング言語で変数にハイフンが使えないため日頃からハイフンは使わない。
先頭大文字 : ほとんどのエディタでタブルクリックで選択可能。文字数を一文字少なく出来る。

人それぞれですが、ダブルクリックで選択できるかは重要だと思います。