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

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

  • この内容が絶対に正しいという訳ではありません。ご自分のサイトに合わせて、適切な名前を付けるようにしてください。
名前の例 使いどころの例
全体
containerpage 全体を囲む
wrapperwrap 全体または特定の範囲を囲む
大まかな範囲
headerhead ヘッダー
footerfoot フッター
navnavigation ナビゲーション
globalNavgNav グローバルナビゲーション
headerNavheadNav ヘッダーナビゲーション
footerNavfootNav フッターナビゲーション
contentcontents コンテンツ
main メインコンテンツ
sub サブコンテンツ
extra 臨時のコンテンツ
範囲
section セクション
fieldfields 分野
division 区分
inner 内側
具体的な範囲
entryentries エントリー
commentcomments コメント
lead 案内
outline 概要
summaryabstract 要約
description 説明
topictopics 話題
spotlight 注目情報
pickup 選び出す
search 検索ボックス
profile プロフィール
区切り線
separator 区切り線
メニュー
menu メニュー
nlnavLink ナビゲーションリンク
topicPath トピックパス(階層リンク)
tabs タブメニュー
paging ページ切り替えメニュー
siteInfo サイト情報に関連するメニュー
guide サイト案内に関連するメニュー
assist 補助的なメニュー
optionoptions オプションメニュー
リンク・ボタン
next 次へ
prevprevious 前へ
return 戻る
pageTop ページトップへ
more もっと見る
skip 飛ばす
upload アップロード
choice 選ぶ
ヘッダ付近
title タイトル
siteTitle サイトタイトル
logo ロゴ
category カテゴリー
catch キャッチフレーズ
slogan スローガン
フッタ付近
copyright コピーライト
お知らせ・メッセージ
infoinformation お知らせ
pastInfo 過去のお知らせ
news ニュース
pastNews 過去のニュース
newsFlash ニュース速報
spotNews 短いニュース
date 日付
update 更新情報、更新日
history 更新履歴、沿革
msgmessage メッセージ
リスト
list リスト
itemitems 項目
photoList 写真のリスト
goodsList 商品のリスト
注意書き
attention ご注意
warning 警告
instructions 操作方法
特定の項目
first(最初)、last(最後) 最初の項目、最後の項目
odd(奇数)、even(偶数) 奇数列、偶数列
隠す
invisiblehiddenhidenone 非表示
広告
pradads 広告
クリア
clearclearFix フロートのクリア

使用しない方がいい名前

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

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

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