ID名とクラス名のサンプル集

よく見かける名前や、使いそうな名前をリストアップしています。ID名やクラス名を付ける際の参考にどうぞ。

  • この内容が絶対に正しいという訳ではありません。ご自分のサイトに合わせて、適切な名前を付けるようにしてください。
名前の例 使いどころの例
全体
container、page 全体を囲む
wrapper、wrap 全体または特定の範囲を囲む
大まかな範囲
header、head ヘッダー
footer、foot フッター
nav、navigation ナビゲーション
globalNav、gNav グローバルナビゲーション
headerNav、headNav ヘッダーナビゲーション
footerNav、footNav フッターナビゲーション
content、contents コンテンツ
main メインコンテンツ
sub サブコンテンツ
extra 臨時のコンテンツ
範囲
section セクション
field、fields 分野
division 区分
inner 内側
具体的な範囲
entry、entries エントリー
comment、comments コメント
lead 案内
outline 概要
summary、abstract 要約
description 説明
topic、topics 話題
spotlight 注目情報
pickup 選び出す
search 検索ボックス
profile プロフィール
区切り線
separator 区切り線
メニュー
menu メニュー
nl、navLink ナビゲーションリンク
topicPath トピックパス（階層リンク）
tabs タブメニュー
paging ページ切り替えメニュー
siteInfo サイト情報に関連するメニュー
guide サイト案内に関連するメニュー
assist 補助的なメニュー
option、options オプションメニュー
リンク・ボタン
next 次へ
prev、previous 前へ
return 戻る
pageTop ページトップへ
more もっと見る
skip 飛ばす
upload アップロード
choice 選ぶ
ヘッダ付近
title タイトル
siteTitle サイトタイトル
logo ロゴ
category カテゴリー
catch キャッチフレーズ
slogan スローガン
フッタ付近
copyright コピーライト
お知らせ・メッセージ
info、information お知らせ
pastInfo 過去のお知らせ
news ニュース
pastNews 過去のニュース
newsFlash ニュース速報
spotNews 短いニュース
date 日付
update 更新情報、更新日
history 更新履歴、沿革
msg、message メッセージ
リスト
list リスト
item、items 項目
photoList 写真のリスト
goodsList 商品のリスト
注意書き
attention ご注意
warning 警告
instructions 操作方法
特定の項目
first（最初）、last（最後） 最初の項目、最後の項目
odd（奇数）、even（偶数） 奇数列、偶数列
隠す
invisible、hidden、hide、none 非表示
広告
pr、ad、ads 広告
クリア
clear、clearFix フロートのクリア

使用しない方がいい名前

見た目に関する情報を名前として使用すると、スタイルを変更した場合などに矛盾が生じてしまうことがあります。

left、right
left や right などの位置を表す名前は、後で左右を入れ替えた場合などに矛盾が生じてしまいます。
red、blue ...
red や blue などの色を表す名前は、後で色を変更した場合などに矛盾が生じてしまいます。
w300px、size12 ...
サイズを表すような名前は、後でサイズを変更した場合などに矛盾が生じてしまいます。

見た目の情報ではなく、内容に関する情報を名前として使用するようにしましょう。