読者です 読者をやめる 読者になる 読者になる

黒魔法使いの弟子

Ruby & Javascript & Hack

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

CSS

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


転職後、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

現場のプロから学ぶXHTML+CSS

現場のプロから学ぶXHTML+CSS


この本、ホントに良いのでオススメです。

また、HTML5のサイトなども確認すると良いとのこと。