【CSS】Web制作で使えそうなclass名、id名まとめ

CSSのclass名やid名は自由に決めることができますが、この「自由」ってのが意外と初心者を困らせます。class名、id名に使えそうな名前を紹介しますので、命名に困ったときの参考にどうぞ。

全体を囲う要素

• container
• wrapper
• wrap
• page
• box
• all

ページ上部の要素

• header
• head
• top
• page_top

ページ下部の要素

• footer
• foot
• bottom
• page_bottom
• copyright

メインコンテンツとなる要素

• content
• main
• main_content
• main_box

メインコンテンツ内の要素

• entry
• archive
• inner
• item
• content_inner

ナビゲーションの要素

• nav
• navigation
• global_nav
• g_nav

メニュー、サイドの要素

• menu
• sub
• side
• side_menu
• side_bar
• aside

※2単語以上の英単語で構成される名前について

複数の英単語で構成される名前を付けるときは、少し書き方を工夫してみましょう。
例えば「メインコンテンツ」という名前を付ける場合、方法は4種類あります。

１，maincontent（くっつける）
２，main_content（アンダーバー区切り）
３，main-content（ハイフン区切り）
４，mainContent（2単語目以降を大文字）

どれでもいいんですが、とりあえず1は読みにくいですね。
個人的にはアンダーバーで区切るのが読みやすくて好きなんですが、大昔のブラウザ（IE4とか）では正しく認識されないらしいので注意。

おわり