一般的なID/クラス名の例のまとめ

いつも忘れて本を開くので、自分用のメモ。

転職後、WEBデザイン全般も担当するようになり、XHTML&CSSもガツガツ書くようになったが、
なにぶん、ID名とかクラス名が思いつかないことが多いので、以下表の名称を頻繁に使わせて貰っている。

部品例名称例

本文全体を囲むコンテナ container, wrapper, page, pagebody, all

ヘッダー header, header-area

ナビゲーション nav, navi, navigation

グローバルナビゲーション global_nav, gnav

ローカルナビゲーション local_nav, lnav

補足ナビゲーション assist_nav, utility, utility_nav

パンくずナビゲーション topicpath, breadcrumbs

コンテンツ全体 content(s), container, wrapper

メインコンテンツ main, maincontent(s), content(s), alpha, primary

サブコンテンツやサイドバー sub, subcontent(s), sidebar, bate, secondary

見出しと本文のまとまり section, entrybody, article(s)

記事単体 article(s), entry(-ies)

フッター footer, footer_area, copyright, publication

ロゴ logo

メインの絵 keyvisual, mainvisual

画像や写真、グラフなど image, photo, fig, figure

検索 search, search_area, search_box

注釈、ヒント、本題から外れた補足や囲み記事 aside, hint, note

商品一覧 products, item_list, shopitems

部品例	名称例
本文全体を囲むコンテナ	container, wrapper, page, pagebody, all
ヘッダー	header, header-area
ナビゲーション	nav, navi, navigation
グローバルナビゲーション	global_nav, gnav
ローカルナビゲーション	local_nav, lnav
補足ナビゲーション	assist_nav, utility, utility_nav
パンくずナビゲーション	topicpath, breadcrumbs
コンテンツ全体	content(s), container, wrapper
メインコンテンツ	main, maincontent(s), content(s), alpha, primary
サブコンテンツやサイドバー	sub, subcontent(s), sidebar, bate, secondary
見出しと本文のまとまり	section, entrybody, article(s)
記事単体	article(s), entry(-ies)
フッター	footer, footer_area, copyright, publication
ロゴ	logo
メインの絵	keyvisual, mainvisual
画像や写真、グラフなど	image, photo, fig, figure
検索	search, search_area, search_box
注釈、ヒント、本題から外れた補足や囲み記事	aside, hint, note
商品一覧	products, item_list, shopitems