class名やid名って付ける時悩みませんか？
今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。
これで、チョットだけ作業効率アップ！？
---- こっから続き
全体に使えそうな感じ
- wrap
- wrapper
- top-wrapper
- wrapperAll
- frame
- mframe
- all-frame
- container
- page
- pagetop
- all
- allContents
- layout
- layout-two-column
- layout-three-column
- body
- carrier
上んトコロに使えそうな感じ
- head
- header
- headerArea
- headline
ナビゲーションっぽいトコロに使えそうな感じ
- navi
- navigation
- navbar
- gnav
- gnavi
- g-navi
- globalnav
- global-navi
- globalNavi
- globalnavigation
- globalHeader
- mainNavigation
- contentNavi
- stinfo-navi
- topNav
パンくずっぽいの
- topicpath
- topic-path
- topicPath
- pan
- pankuzu
- breadcrumbs
メニューとかサイドっぽいトコロに使えそうな感じ
- menu
- menuArea
- mainmenu
- site-menu
- side
- side-container
- sidebar
- sidemenu
- localMenu
- rightside
- leftside
- rightcol
- leftcol
- sub
- sub-menu
本文とかメインになってくる部分に使えそうな感じ
- area
- main
- maincontent
- center
- left
- right
- content
- contents
- main-contents
- left-contents
- right-contents
- contents-inner
- contentsArea
- column
- left-column
- right-column
- wrapperContent
- contentColumn
- content-block
- base
- entries
- mainbox
- right-body
- left-body
- section
- item
- box
- inner
- entry
- entryBody
- entryblock
- entrydate
- separator
- bodyArea
- block
- outline
- sub
- lead
- spot
- frame-margin
下んトコロに使えそうな感じ
- foot
- footer
- footnavi
- footerArea
- footerbar
- globalfooter
- copy
- copyright
アンダーバー（_）は、全部ハイフン（-）にしております。アンダーバーを使用している割合も多かったです。（僕自身ハイフンよりアンダーバーを使うので。）
ここに載ってるclass名やid名が良いとか悪いとかの判断は特に行ってません。割合が多かったのを載せております。
- 各種SBMに追加
-
Track Back [13]
[WEB DESIGN] もう、class名やid名で悩まないんだからっ！！ - CSS HappyLife
CSS HappyLifeさんより。CSSのclassやidの定義名ってわりと自...
by mBlog｜2007年01月16日（火）
古いブラウザが_のclass名、id名を無視する理由
もう、class名やid名で悩まないんだからっ！！｜CSS Happ...
by hamashun.com blog｜2007年01月16日（火）
Web標準においての、idとclassの考え方
この前のデジパの方のブログ「CSS HappyLife」にもありましたが、class名やid名で悩んでしまうというのが、コーダの悩みの種のひとつだと思いま...
by 赤坂でも渋谷でも働くアヨハタブログ｜2007年01月18日（木）
ありがちなclass名、id名をズラリ列挙
CSS HappyLife｜もう、class名やid名で悩まないんだからっ！！ ありがちなclass名、id名をズラリ列挙されています。 更に「この場合...
by The Way "IT" Should Be｜2007年01月21日（日）
CSS: よく使う id, class 名の覚え書き
CSS を書いている時、id, class 名を決めるとき悩む事が多いので、忘れっぽい自分の為に覚え書き。 header...
by Bowz::Weblog｜2007年02月23日（金）
[情報]CSSまとめ
解説 CSSとは CSS*1とは、(X)HTML文書の見栄えを整形するための、Web標準*2の指定方法です。要するにホームページをデザインする手段です。...
by 萌え理論Blog｜2007年03月24日（土）
CSSデザインの常識？
このブログもそうだけれど、 サイト本体（http://sinplei.orz.h...
by sinplei.orz.hm blog｜2007年03月27日（火）
Design11-ID名を分かりやすく
11回目はお馴染みの所からNo.39。 前回までのテンプレでID名が間違っていた...
by 素人のWebデザイン｜2007年05月14日（月）
links for 2007-09-08
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife 全体に使えそうな感じ * wrap * wrapper * ...
by 黒田哲司クロニクル｜2007年09月08日（土）
[Standard]id名とclass名
人様のBlog勝手にトラバ もう、class名やid名で悩まないんだからっ！！ http://css-happylife.com/cms/mt-tb.c...
by S*PRI｜2008年08月30日（土）
id/class名
ｃｓｓコーディングガイドを作るにあたり、id/class名の仕様も一応のものとして統一しておこうと色々探してみました。 結果↓ もう、class名やid名...
by ナカハラＷＥＢデザイン｜2008年10月10日（金）
class名、id名リストと命名ルール
こんにちは。クリエイティブホープの藤田です。 コーディングをしていると、cla...
by マークアップ野郎！！｜2008年11月21日（金）
class・id名に使えそうなもの
class・id名って意外に悩んでしまって時間かかったりしませんか？？私自身はどうも凝り性のせいか、「これはリクツ的におかしい」とか「もっとシンプルじゃな...
by teddy_mouse.com｜2009年10月14日（水）
comment [12]
1 - massa さん
こんにちは。
いや～参考になります。
確かに他のサイト様のCSSファイルをコソーリと覗くと
「ほほ～こういうわかりやすいつけ方もあるのね・・」
と思うことは多々あります。
ワタシは少人数の会社なので、こういったガイドラインを
特に設けていないので個々がわかりやすく、という状態なので
余計にid、classといった名前は悩みます。
ありがとうございました。
2007年1月15日 14:11
2 - kazu さん
これは参考になりますね。
いっつも悩んでるのが段組レイアウトを作るときの全体を囲むボックスのID名…。
wrapperとかよく見ますけど、個人的に好きではないんでallで固定していますけど。
これは今後、参考にさせてもらいます！
2007年1月15日 15:22
3 - kennsu さん
いつも楽しく拝見させてもらっております。
STOPN' LISTENのkennsuです。
これこそ求めていたものですよ！
ブクマして永久保存します。
何気にclassとかidとかって
「どうやってつけたらいいですか？」
と聞かれたりするんですよね。
いままでは「好きなようにつければいいよ」とかイライラしてたら「microormatsでも嫁」って言ってたんですが、これからは。。
「CSS HappyLife嫁」
この一言で完結させようと思います。
ありがとうございます。
URL｜2007年1月16日 00:33
4 - 渦 さん
こんにちは。すごい数のクラス名を集められましたね。
クラス名をつけるときは、ある程度法則に沿ったほうがいいと思うので参考にさせていただきます。特に他人数がサイト更新を行う場合、直感的にわかりやすいクラス名をつける事で生産性が上がります。
cssのクラス名で_アンダーバーを使うのは推奨されておりません。ブラウザによっては不具合を起こすことがあります。確かWEB標準の教科書にも明記されていた記憶があります。ご参考までにお知らせいたします。
参照URL
http://www.tagindex.com/stylesheet/basic/format2.html
URL｜2007年1月16日 14:52
5 - Bar さん
どれも具体的な名称になってないじゃん。こんなのつけたらあとから見直すときとか、複数人で作業するときとか混乱する。
命名っていうのは他所にあるのを拾ってくるんじゃなくて、きちんとした規則（classは複数形にするとか、キャメルにするとか）を決めて、その場に応じて固有のものをつけるかたちで行うべき。
こんなの参考にするくらいなら、
class1
class2
:
とか付けたほうがマシ。
2007年1月16日 21:11
6 - hira@管理人 さん
>massaさん
こんにちは。
ボクも悩んじゃう方なので、色んな方々のソース見てて非常に参考になりました。
コメントありがとうございます。
>kazuさん
ボクも特にコレといった意味は無いのですが、wrapperはあまり好んで使う事はないですね。
ありがとうございます。
これからもよろしくお願いします。
>kennsuさん
勿体無いお言葉ありがとう御座います。
こちらこそ、いつも拝見させてもらい参考にさせてもらっております。
昔のボクだったら同じように聞いてそうです。
ホントに分からない頃は「kakomi」とか使ってました（苦笑
こちらこそ、ありがとうございます。
>渦さん
かなり色んな方々のを覗かせて頂いたのですが、大半が同じで見たサイトの数の割には少ない方だったりします。
アンダーバーやハイフンに関しては古いブラウザなどを考慮する場合は使うべきではないですね。
制作者がターゲットブラウザをどうするかによってだいぶ変わってきそうですが。
ご参考URIありがとう御座います。
>Barさん
非常に的確なご指摘ありがとう御座います。
実際、神崎さんのサイトではこの中で掲載されているid名及びclass名の中でも、main、gnaviなど一部しか見かけませんでした。
ありがとう御座います。
2007年1月16日 22:33
7 - nakacho♪ さん
class名など付けるときに、他の方はどうしているかな？なんてのを気になっておりました。
とても興味深く読ませていただきました。
2007年1月18日 04:13
8 - F原 さん
ま、まとめてくれたからって、別にお礼なんて言わないんだからね＞＜！
2007年1月18日 19:05
9 - ひら＠管理人 さん
>nakacho♪さん
ボクも気になったのでふと、まとめてみたらビックリでした。
>F原さん
べ、別にコメントくれたからって、嬉しくなんか無いんだからねっ！！
2007年1月19日 01:13
10 - azator さん
いただきますた。僕もいつも悩むので使わせてもらいますね。
URL｜2008年2月22日 22:57
11 - じぇすとん さん
最近ラッパーの代わりにclothと使っています
bodyの上ていう事で服・・・
どうでしょー。ラップを使うのが嫌だったのでー
URL｜2008年3月 2日 03:20
12 - suno88 さん
「class="left"」や「id="right"」とやるのは、文字を赤くするスタイルに対して「class="red"」とつけるのと同様にマズい命名だと思います。
あと、パンくずリストに pan や pankuzu は格好悪い。円周率を「#define pai 3.14159」と定義した C のソースを見たときに似た気恥ずかしさを覚えます。せっかく breadcrumbs が候補として挙がっているのですから、それでいいのではないでしょうか。
ここまで書いて、2 年半も前に書かれたエントリーであることに今気づきました。古い記事にコメントする無粋をお許しください。
2009年8月16日 03:51