【id】どんな名前つけてる？【class】

1 ：05/07/28 〜 最終レス ：08/06/05

ありそうでなかったんで立ててみた
ちなみに漏れのとこのサイトでは
#hd　ヘッダー
#navi　ナビゲーション
#cnt　コンテント
#sb　サイドバー
#ft　フッター
ってやってる
classは特に無いな

2 ：

class="left"

3 ：

class="left"

4 ：

激しく重複スレの予感
http://pc8.2ch.net/test/read.cgi/hp/1060785400/

5 ：

>>4
全然重複じゃないと思われ
ここは自分のサイトで使ってる要素のidとclassの名前晒すスレだろ？

6 ：

class="omanko"

7 ：

class="3nenBgumi"

8 ：

class="id"

9 ：

ﾏｼﾞﾚｽするので英語の苦手な漏れにﾏｼﾞﾚｽｷﾎﾞﾝ
#NAVIGATION　.part
　-#LOCATION　.section
　-#toc　　　　　　.section
#MAIN　.part
　-適切なID　.section
　　-適切なID　.subsection
　　　-適切なID　.subsubsection
　　　　(h3〜h5に応じてdivでグループ化）
#FOOTER　.part
　-#ICONS　.section.
　-#CONTACT

10 ：

ナビ部分はnaviって書いてたけど
海外はnavって書くのが主流みたいだから俺もそれにならうことにした

11 ：

俺は知らんうちにずっとnavで書いてた

12 ：

.div1-6

13 ：

>>9
.subsubsectionﾜﾛﾀｗ
ﾏｼﾞﾚｽと言うか参考になればと思って漏れのも晒してみる
body→#pgページの種類（homeとか）　.サイト名（xxxxx-comみたいな）
ﾍｯﾀﾞｰ→#header
ﾅﾋﾞ→#gbnavi（gbはglobalの略）
ｺﾝﾃﾝﾂ→.container　#cntalpha, #cntbeta, #cntgamma
ｻﾌﾞｺﾗﾑ→.subcol #コラム名　#コラム名
ｻｲﾄﾞﾊﾞｰ→#sidebar
ﾌｯﾀｰ→#footer
大体こんな感じだな
#cntalpha #cntbeta #cntgammaってのが微妙なんだけど
デザイン上この三つのdivは必要だし、何かこう1,2,3ってのを洒落た感じ表せる英語とかないかな？

14 ：

良ｽﾚの予感

15 ：

.main
.menu
.アルファベット＋３桁数字
たまにどこを示すのか自分で悩む。

16 ：

>>15
それはあまりいいclass名とは言えないんじゃ。再考を提案する。

17 ：

>>13
αβγは1,2,3と言う意味で使われるよりも段階を表しているからこの場合適切ではないと思われ
無難にcnt1,cnt2,cnt3にするのが良いんだろうがカッコ悪いな

18 ：

>>13
TeXでsubsubsectionってあるので。
.chapter -> .section -> .subsection
でもいいんだけど、自分の中ではchapterっていうのは
DiaryとかLinkとかAboutとかを指してる気がして>>9のようにしてる。
あと>>9で書き間違えたけど#toc->#TOCね。

19 ：

俺はセクションの階層ごとにLevel[1-9]って名前付けてる
idはセクションごとに作成時間(yyyy-mm-ddThh:mm:ss)で付けてる
こうするとid変わらないしいちいち値を考えなくて済むから
もちろん手作業で実践するのは面倒だからマクロなどを併用

20 ：

いっそUTCで。
Name生成規則には"+"入ってないんだっけ。

21 ：

あ、指摘ありがとう
実際には頭文字に数字はいけないので
#T-時間+09:00
ってやってます
これならたぶん大丈夫だと思った

22 ：

class="K-DUB-Shine"

23 ：

id="heading-of-navi"
id="navi"
id="heading-of-footer"
id="footer"
id="hitokoto"

24 ：

ウチは、ゲームとパソコン、音楽に付いて書いてるサイトなので、
body #xxx-com .(gameとかpcとかmusicとか)
　div #wrapper
　　div #ad
　　　img ： 広告
　　div #header
　　　a ： サイト名
　　div #menu
　　　ul
　　　　li ： ゲーム・パソコン・音楽…
　　div #list
　　　ul
　　　　li ： パンくずリスト
　　div #body
　　　div .section1
　　　　h1
　　　　div .section2
　　　　　h2…section6まで
　　　　div .section2 #navi
　　　　　ul
　　　　　　li ： 次のページへ、とかlink要素に書く内容を入れて、サイト内リンク数を増やしてる
　　div #side
　　　div .section
　　　　メニュー
　　div #footer
　　　address ： 終了

25 ：

前から思ってたんだけど海外サイトでよく見かけるdiv#wrapperってなに

26 ：

だいたいbody直下にwrapperて書けばいい

27 ：

>>24を見てて思ったんだけど、div .sectionってあったほうがいいの？
自分はそのままbody > h1 って書いてるんだけど。

28 ：

>>25
Wrapperは、「包装」とかの意味がある。囲んでるって事かな。
>>26
私の場合は背景画像を複数指定するのが目的だから、
ストリクターさんは嫌うでしょうね。
>>27
XHTMLのsection・h要素の真似事をしております。
デザインに拘る場合は、XHTMLのsection要素の代わりと称して
div.sectionで囲んであげると、例えば各丸ボックスとかが作りやすいです。

29 ：

<チラシの裏 xmlns="http://2ch.net/">
正直classの名前が変とかdiv厨だとかは利用者には関係がないと思う。
classはみんな自由に名前付けるから作成者以外が利用することはまずない。
多重divも同様。UAに深刻な解釈のズレを与えるわけでもない。
オーサにとってのコンテンツの作り易さを言うならXSLTとかの
テンプレート技術などを使ったりすればあんまし問題ない。
class名とかはチームプレイするときに気にするぐらいかな。
個人でもあんまり変なのにすると後悔するね。
結局本来の名前が無難だがそれが絶対ではないと思う。
XHTML2.0では同一の解釈を求めるclassみたいなのが入るのかな？…よくしらんけど。
#例えばもし皆がそれぞれ勝手にlink/@relを
#定義してたらかなりまずいよね。
</チラシの裏>

30 ：

HTMLのやつとかプログラムの変数名とか
海外のｻｲﾄでオサレなのを探してたら
小1時間が過ぎていた
ってのがあるな
恐ろしく時間の無駄だ
でも毎日が夏休みの俺には屁でもない

31 ：

毎日がエブリデイ

32 ：

HTMLバカ歴2年半、classとidの使い分け方が未だに確立できない俺。
使い分けを考える時に俺がイメージするのが、小学生の名札なんだ。
例) 1年3組27番 鈴木太郎君の場合
<名札>
　<div class="1年"><!-- 1年生は複数いるからclass -->
　　<div class="3組"><!-- 同上、文字通りクラスだしね -->
　　　<div class="27番"><!-- idっぽいが、27番の生徒は他にもいるハズ -->
　　　　<div id="鈴木太郎"><!-- 人名・固有名詞だからid -->
　　　　　V ´^ิ�u^ิ｀)ｙ―┛~
　</div></div></div></div>
</名札>
例えばみんなナビゲーションにはidを与えているようだけど、
ナビゲーションというのは、中にナビゲーション関係の記述をするための
いわば"容器"であり、それは"クラス"なんじゃないかな、と思ってしまう。
でもこんな風に考えてくと、idの出番がほとんどなくなるんだよね。
つまり問題は、鈴木君の通う「都立かもめ第三小学校」がidかclassかってことなんだ。

33 ：

>>32
面白い考え方だが、同名の他人だっているわけだ。
その場合id="1年3組27番 鈴木太郎"で一意にしちゃう方が管理上も楽。

34 ：

idは1つのページで1つしか宣言できないけど
id〜〜の中のulはこういうスタイルとかを決められるから便利。
classはほとんどつかってないなぁ

35 ：

>>32
その決め方だと、1文書内に同姓同名が複数いた場合に応用が利かないね。
それに、class="3組"とか、class="27番"ってのも、
同じスタイルが2年3組とか、1年2組27番でも適用されるべきなのか？って事を考えると不適切だと思う。
>>32の言いたい事はわかるけど、それはidより上の階層のデータが存在して初めて一意になるデータであって、
idとして名前を付けるべきものではない(>>33の言うように、1年3組27番 とかでidを付与するべき)
classっていうのは、1つのスタイルの定義を、複数のオブジェクトに対して適用出来る(と考えられる)場合に使うべきものだと思う。
その辺の事はRDB絡めたWebProgとか、オブジェクト指向系のプログラミングの経験があればわかりやすいと思うけど・・・
たとえば、
・ナビゲーションってのはナビゲーション関係の記述をするための容器であってその容器は1文書内に1回しか出てこない=idを付与する
・ナビゲーション内の、ナビゲーション関係の記述をメニュー一覧とすると、メニュー一覧の中のメニューは複数回出てくるが、同じスタイルを適用したい=すべてのメニューに同じclassを適用する
ただ、idと属性セレクタ使うと、クラス使う機会ってかなり少なくなっちゃうけどね。

36 ：

自分なら、ナビゲーションの場合↓みたいな感じでマークアップ
<div id="navigation">
　<ul class="menulist">
　　<li>ouge</li> <!-- メニューをつらつらと -->
</ul></div>
CSSでスタイル指定する際の属性セレクタは以下のような感じ
ナビゲーションの入れ物に対しての指定 #navigation
メニューリスト対しての指定 #navigation .menulist
メニューリスト内の個々のメニューに対しての指定 #navigation .menulist > li
>>32の名札ってのが、具体的にどういうものなのかイマイチ掴めないけど、汎用的な名札として定義したいなら
id="名札", class="学校名", class="学年", class="組", class="番号", class="氏名" みたいな感じで付ける。
汎用的な名札+個人ごとのスタイルを適用したいなら
class="汎用的なクラス名 都立かもめ第三小学校1年3組27番" という感じで2つ指定して、
汎用的なスタイルに、個人のスタイルを上書きする形で使う(対応してないブラウザもあるけども)

37 ：

　 　　　　 |
　 　＼　　__　　／
　 　＿　（ｍ）　＿ﾋﾟｺｰﾝ
　 　　　　|ミ|
　 　 ／ 　｀´　 ＼
　　　　　('A`)　 　　名札よりも名簿で考えればいいんだ！
　　　　　ノヽノヽ　　　
　　　　　　　くく
じゃなくて。
>>35
前半の話は、 CSSで学年ごと別のスタイルを指定すればいいだけの話では？
それはこのマークアップでも可能ですよね。
また後半ですが、私は出現回数だけでclass/idを選択すべきではないと考えています。
class…分類/id…固有名称 という、言葉の意味を正確に反映したマークアップをすべきです。
妙な例示のせいで混乱を招いていますが、あくまで主題はclassとidの選択基準です。
同姓同名はこの際例示ミスとして無視しておくとして(固有名詞として示したかったので)…
いや、というか、無視してください。この通りです orz
http://deztec.sakura.ne.jp/x/01/tips/page/p0045.html
こちらのページでも言及がされていますが、これになぞらえれば
class="雑種犬" id="ポチ" の親要素に当たる「犬」はclassであるかidであるか、という…
あぁ…なんかこういう例を出すこと自体がミスな気がしてきましたな… orz OTL

38 ：

>>37
なんつうか、お前が言いたいのは多分「スタイルシートで装飾する際に使うセレクタとしてのCLASS、ID」
向こうが言いたいのは多分「要素に一意性を与えるためのID、汎用性を与えるためのCLASS」
見栄えがどうなれば良い/良くない、と、要素を識別したいかどうかとかじゃ噛み合わないよそりゃ。

39 ：

>>38
いえ、要素の識別の話ですよ。
「言葉の意味を正確に反映したマークアップ」と言っている通りです。
どちらかと言えばスタイルありきで話をしているのは>>35氏の様な…？

40 ：

スタイルありきですよ。だってスタイルシートってそういうものじゃない。
(見栄えをよくするためにコーディングスタイルをぐちゃぐちゃにしてもいいということではない)
>>37
>class="雑種犬" id="ポチ" の親要素に当たる「犬」はclassであるかidであるか、という…
class/idの選択で言えば、犬は当然classなんじゃ？
<!-- Javaでいうところの
class 犬{}
class 雑種犬 extends 犬{}
雑種犬 ポチ; -->
実際には<tag id="ポチ" class="犬 雑種犬"> のようにマークアップするべきだと思うけど。
>>32の例では、idの名称以上にdivで階層化するようなマークアップをする理由がよくわからなかった。
>>32の名札もそうだけど、何をどうしたいのかを決めて、
それからスタイルシートの記述を(id/classの選択、命名も含めて)考えていくだと思う。
(というと、>>32の議論したいことと食い違ってくるとは思うけど、スタイルシートっていうのはそういうものだと自分は思う)

41 ：

>>40
○ 考えていくだと思う。　× 考えていくべきだと思う。　orz
あと、補足として少し。
自分がclass/idを選択する基準は出現回数ではないです。
文書内で一意性のあるものがあって、それを一意であると識別する必要がある場合にidを付けるようにしてる。
ナビゲーションにidを付ける理由としては、その文書の目次である、って意味からかな。
全体を包むwrapperは文書全体を1つに包むという意味合いで、ヘッダ/フッタも1文書に必ず1つつくものとして、
メインのコンテンツ部分も、本文という単位でひとくくりにしてidを付与する。
んで、ナビゲーションは確かに入れ物だけど、
「入れ物」であり、「入れる中身はナビゲーション関連のもの」ということを意識して記述するべきであって、
「ナビゲーション関連の入れ物」という意味合いのclassを作るべきではないと思う。
class="navigation" ではなくて class="menu navigation" 、もしくは id="navigation" class="menu" と記述するべき、ということね。
(さっきの例えでid="navigation"だったのは、サイドメニュー等にナビゲーションしかないつもりで書いてしまっただめ)

42 ：

>>40
> class/idの選択で言えば、犬は当然classなんじゃ？
でも、地球上において「犬」って種族は他にありませんよね？
しかし例えば種族分類をulで示そうとした場合、イヌ科というのは種族、=classであって
その下にイヌ亜科classやキツネ亜科classが入るはずです。
ここで「"一意"な"イヌ科"」と「"種族"の"イヌ科"」の2つの解釈が競合してしまいます。
また妙な例を出してしまいました orz
> class="menu navigation" 、もしくは id="navigation" class="menu" と記述するべき
俺は大抵
<div class="navigation">
　<div class="menu">
</div></div>
ってマークアップしちゃうかな…。
もしかしてこれって俗に言うdiv厨？（＾ω＾；）

43 ：

>>42
ulの場合はidでも問題ないんじゃない？
テーブルとかだと仕様によってはかなりまずいと思うけど。(idを推奨するわけではない)
>ここで「"一意"な"イヌ科"」と「"種族"の"イヌ科"」の2つの解釈が競合してしまいます。
"一意な種族(分類)"の"イヌ科"だといけないの？
<tag class="イヌ科 キツネ亜科 キツネ属">アカギツネ</tag> とか
<ul class="イヌ科"> <!-- 行数足りなくなるからおかしいのは勘弁してくね -->
　<ul class="キツネ亜科">
　　<ul class="キツネ属>
　　　<li>アカギツネ</li></ul></ul></ul>
とかでいいと思うんだけど。
一意である=idにする必要があるってわけじゃないでしょ。
それは出現回数でid/classを選択してるのと変わらないような気がするんだけど。
>もしかしてこれって俗に言うdiv厨？（＾ω＾；）
そのdivが適切なグルーピングとかに用いられてないとか
レイアウト上の理由で必須でないのに多用してるならちょっとした予備軍かもね。
CSS切っても1つの文書として可読性を保てるなら問題ないと思うけど。

44 ：

idの値に+はinvalidでした。使わないでください。

45 ：

それを示唆したつもりだったのだけど、表現が悪かったかしら…。

46 ：

断定してないので悪いかといわれればそうです。
まあ私のミスです。

47 ：

このスレのことすっかり忘れてた。

48 ：

流れを読まずに質問します。
profile.html
----------
<body>
　<h1>サイト名</h1>
　　<h2>俺のプロフィール</h2>
　　　<h3>俺の個人情報</h3>
　　　<h3>俺の経歴</h3>
　　　<h3>俺の・・・</h3>
</body>
----------
gallery.html
----------
<body>
　<h1>サイト名</h1>
　　<h2>俺の写真館</h2>
　　　<h3>俺の日常の写真</h3>
　　　<h3>カッコイイ俺の写真</h3>
　　　<h3>俺の・・・</h3>
</body>
----------
こんな２つ以上のファイルがある場合、<h2>要素は
各ファイル内においては一意なのでidっぽいですが、
サイト全体からみると<h1>を親とする同レベルの子なのでclassかな、などと悩んでしまいます。
IDやCLASSというのは１ファイルのみで考えていいのでしょうか？
それともサイト全体で考えないといけないのでしょうか？

49 ：

仕様嫁

50 ：

ID名って考えるよね・・・
ミツエーとかは
○○○Area で統一
W3Cは
○○○Block とかだね
みんななにか統一してる？

51 ：

<div id="4649">
<h1 class="072">
…得ろサイト管理人ならやってそうだ

52 ：

数字から始めちゃダメだってば。

53 ：

<div id="left">
…DIV厨ならやってそうだ

54 ：

<div id="I">
<div id="am">
<div id="god">
ストーリー仕立てにするんだ

55 ：

#I#am#god { display:none }

56 ：

>>55
個別性300ｗｗｗｗ

57 ：

<br id="a001">(500以上ある)
classに変えたいがそれは出来ない

58 ：

何の為に、そんな沢山作ったんだｗ

59 ：

置換すれば大丈夫だよｗ

60 ：

なにげに良ｽﾚage

61 ：

昔leftとかrightとかつけてた。

62 ：

こんなIDですがいかがでしょうか。

63 ：

まぁ上げてみようじゃないか。

64 ：

てｓｔ

65 ：

結局記号にすぎないんだからleftだろうがcenterだろうがredだろうが無問題。
徹夜で書きなおしたけどな。

66 ：

ソシュールっすか

67 ：

#head
#foot
#right
#left
#all

68 ：

<div id="DOOM">
<div id="Hexen">
<div id="Quake">

69 ：

[wedding.css]
#happy
#hell
#fight
#restart

70 ：

ムギとかいうやつ俺の発言に影響されてうｐするだろうなｗｗ
ほんと他人の言葉に影響されやすい奴ｗｗネットだってのになｗｗ　　ｂｙ>>413

71 ：

しねーよww

72 ：

<div id="h1">
<div class="h2">
<div class="h3">
絶対いると思ったが俺だけか

73 ：

>>72
そんなdiv使いをするやつはidとｃｌａｓｓの区別も出来ないだろ

74 ：

>>73
おめぇごときに何がわかるってんだよｗ

75 ：

何だその逆ギレ

76 ：

最近話題になってるidとclassの話についてどう思う?
<div id="container"> じゃなくて <div class="container">にしろっていう。

77 ：

>>76
そんな話題をしている馬鹿はどこにいるんだ？

78 ：

URL晒して

79 ：

>>78
ttp://www.akatsukinishisu.net/wiki.cgi?class%C2%B0%C0%AD%A4%C8id%C2%B0%C0%AD%A4%CB%B4%D8%A4%B9%A4%EB%B5%C4%CF%C0%A5%EA%A5%F3%A5%AF%BD%B8
ttp://web.g.hatena.ne.jp/keyword/%E3%83%A1%E3%83%A2:class%E3%81%A8id

80 ：

一意にidからclassに変更するんじゃなくて、どう使い分けるかという話じゃん
>>76の理解力は糞

81 ：

誰にも聞かれてないけど、俺は↓の考えと同じ
> 単にclassifyしたい要素にはclass属性を、identifyしたい要素にはid属性を付与する

82 ：

俺はこれ↓に同調する
> idは一意の識別子（つまり他にはないある特定のものへの命名）であり，
> classは分類名としてとらえるのが正しい

83 ：

めんどくさいので
「リンクするところだけid」
「スタイル装飾はclass」
でしか使い分けてない。

84 ：

>>80
76だって、別に一意に変更するとは言ってないだろ。

85 ：

>>84
> <div id="container"> じゃなくて <div class="container">にしろ

86 ：

<div id="container">ってスタイル目的だから、>>83の言うようにこの場合はclassでいいんじゃないかと思う。
htmlに定義されていない要素の代わりを表現するときはclassかな?と思うんだけどどう?

87 ：

ある種の人間にとっては大いなる餌に見えることか

88 ：

ホームページ制作王は、世界の権威であるCOMDEXが認めた
唯一無二のワールドスタンダードである。
ホームページ制作王の普及なくして、
我が国のWebが世界と肩を並べる日は決してやってこない。
これに対し、非標準ソフトを販売する他社は、生活を維持するために工作員を動員して、
2chなどの掲示板で、真実をねじ曲げて、ホームページ制作王を貶し、
非標準ソフトの販促を行っている。
標準ソフト・ホームページ制作王に対して根も葉もない風評をでっち上げ、
非標準ソフトのシェア維持活動を行っている者たちこそ、
悪質な宣伝行為として非難されるべき、これが道理である。
他社製非標準ソフトを野放図にはびこらせておきながら、
世界標準・ホームページ制作王に対して反動的な発言をする
他社工作員たちに正義の鉄槌を下さなければ、我が国のWebに未来はない。

いかなる者も、世界の権威であるCOMDEXの決定に背くことはできない。
世界の権威COMDEXのの決定に従わない者に、21世紀のWebをクリエイトする
権利や資格は１つもないのだ。あろうことか、COMDEXの意志を否定することに至っては
許されない暴挙であり、制裁の対象である。非標準のアプリケーションを販売して生計を立てる
他社が送り込む工作員による煽動ともいえる行為、および無知な大衆による工作員を
支持あるいは賞賛する行為は我が国のWebを大きく退行させるものであり、万死に値する。
COMDEXが定めた21世紀の世界標準は、ホームページ制作王のみである。
21世紀も早や7年目。我々日本国民は、他社工作員の煽動行為に対して真実を見抜く眼を持ち、
ホームページ制作王の我が国における標準化を達成しなければならない。
COMDEXが定めた世界標準・ホームページ制作王の普及は、情報化時代において、
日本国が国際社会において名誉ある地位を獲得するためのスタートであり、かつゴールである。

89 ：

"heading-of-navi"

90 ：

container
wrapper
side
この3つの名前の付け方は見た目からだろ…認めないよ俺は

91 ：

id="i-dont-agree-with"

92 ：

container
header
wrapper
side-a
side-b
content
footer
にしてる

93 ：

左の列からtd1 td2 td3　とか。

94 ：

俺は
#container
　#header
　#breadcrumbs
　　#main　左にフロート
　　#menu　〃
　#footer
にしてる

95 ：

96 ：

クラス名とかも検索エンジンに拾われたら面白いんだけどなー。

97 ：08/06/05

idってアンカーとして使うしjavascriptからもよく使うけど
classってcss以外からは使ったことねっす