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

**Name_Not_Found** · 2005/07/28(木) 23:33:40

ありそうでなかったんで立ててみた
ちなみに漏れのとこのサイトでは

#hd　ヘッダー
#navi　ナビゲーション
#cnt　コンテント
#sb　サイドバー
#ft　フッター

ってやってる
classは特に無いな

**Name_Not_Found** · 2005/07/28(木) 23:34:32

class="left"

**Name_Not_Found** · 2005/07/28(木) 23:36:28

class="left"

**Name_Not_Found** · 2005/07/28(木) 23:37:45

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

**Name_Not_Found** · 2005/07/28(木) 23:47:25

>>4
全然重複じゃないと思われ

ここは自分のサイトで使ってる要素のidとclassの名前晒すスレだろ？

**Name_Not_Found** · 2005/07/28(木) 23:58:46

class="omanko"

**Name_Not_Found** · 2005/07/28(木) 23:59:55

class="3nenBgumi"

**Name_Not_Found** · 2005/07/29(金) 00:20:56

class="id"

**Name_Not_Found** · 2005/07/29(金) 00:27:28

ﾏｼﾞﾚｽするので英語の苦手な漏れにﾏｼﾞﾚｽｷﾎﾞﾝ

#NAVIGATION　.part
　-#LOCATION　.section
　-#toc　　　　　　.section
#MAIN　.part
　-適切なID　.section
　　-適切なID　.subsection
　　　-適切なID　.subsubsection
　　　　(h3～h5に応じてdivでグループ化）
#FOOTER　.part
　-#ICONS　.section.
　-#CONTACT

**Name_Not_Found** · 2005/07/29(金) 00:37:25

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

**Name_Not_Found** · 2005/07/29(金) 01:32:09

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

**Name_Not_Found** · 2005/07/29(金) 01:43:12

.div1-6

**Name_Not_Found** · 2005/07/29(金) 05:10:01

>>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ってのを洒落た感じ表せる英語とかないかな？

**Name_Not_Found** · 2005/07/29(金) 16:19:16

良ｽﾚの予感

**Name_Not_Found** · 2005/07/29(金) 16:23:55

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

**Name_Not_Found** · 2005/07/29(金) 16:27:17

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

**Name_Not_Found** · 2005/07/29(金) 16:56:41

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

**Name_Not_Found** · 2005/07/29(金) 17:18:59

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

**Name_Not_Found** · 2005/07/29(金) 23:54:59

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

**Name_Not_Found** · 2005/07/30(土) 00:05:15

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

19 · 2005/07/30(土) 00:25:03

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

**Name_Not_Found** · 2005/08/06(土) 11:33:40

class="K-DUB-Shine"

**Name_Not_Found** · 2005/08/06(土) 19:41:39

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

**Name_Not_Found** · 2005/08/10(水) 21:37:52

ウチは、ゲームとパソコン、音楽に付いて書いてるサイトなので、

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 ：終了

**Name_Not_Found** · 2005/08/10(水) 22:26:25

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

**Name_Not_Found** · 2005/08/12(金) 02:05:59

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

**Name_Not_Found** · 2005/08/12(金) 15:50:37

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

24 · 2005/08/12(金) 21:29:09

>>25
Wrapperは、「包装」とかの意味がある。囲んでるって事かな。

>>26
私の場合は背景画像を複数指定するのが目的だから、
ストリクターさんは嫌うでしょうね。

>>27
XHTMLのsection・h要素の真似事をしております。
デザインに拘る場合は、XHTMLのsection要素の代わりと称して
div.sectionで囲んであげると、例えば各丸ボックスとかが作りやすいです。

**Name_Not_Found** · 2005/08/13(土) 07:41:14

<チラシの裏 xmlns="http://2ch.net/">
正直classの名前が変とかdiv厨だとかは利用者には関係がないと思う。
classはみんな自由に名前付けるから作成者以外が利用することはまずない。
多重divも同様。UAに深刻な解釈のズレを与えるわけでもない。
オーサにとってのコンテンツの作り易さを言うならXSLTとかの
テンプレート技術などを使ったりすればあんまし問題ない。

class名とかはチームプレイするときに気にするぐらいかな。
個人でもあんまり変なのにすると後悔するね。
結局本来の名前が無難だがそれが絶対ではないと思う。
XHTML2.0では同一の解釈を求めるclassみたいなのが入るのかな？…よくしらんけど。

#例えばもし皆がそれぞれ勝手にlink/@relを
#定義してたらかなりまずいよね。
</チラシの裏>

**Name_Not_Found** · 2005/08/13(土) 13:06:29

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

**Name_Not_Found** · 2005/08/13(土) 15:45:50

毎日がエブリデイ

**Name_Not_Found** · 2005/08/14(日) 07:48:11

HTMLバカ歴2年半、classとidの使い分け方が未だに確立できない俺。

使い分けを考える時に俺がイメージするのが、小学生の名札なんだ。
例) 1年3組27番鈴木太郎君の場合
<名札>
　<div class="1年">
　　<div class="3組">
　　　<div class="27番">
　　　　<div id="鈴木太郎">
　　　　　V ´^ิ益^ิ｀)ｙ―┛~
　</div></div></div></div>
</名札>

例えばみんなナビゲーションにはidを与えているようだけど、
ナビゲーションというのは、中にナビゲーション関係の記述をするための
いわば"容器"であり、それは"クラス"なんじゃないかな、と思ってしまう。
でもこんな風に考えてくと、idの出番がほとんどなくなるんだよね。

つまり問題は、鈴木君の通う「都立かもめ第三小学校」がidかclassかってことなんだ。

**Name_Not_Found** · 2005/08/14(日) 11:10:54

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

**Name_Not_Found** · 2005/08/14(日) 13:08:22

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

**Name_Not_Found** · 2005/08/14(日) 15:35:45

>>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と属性セレクタ使うと、クラス使う機会ってかなり少なくなっちゃうけどね。

35 · 2005/08/14(日) 15:49:47

自分なら、ナビゲーションの場合↓みたいな感じでマークアップ
<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つ指定して、
汎用的なスタイルに、個人のスタイルを上書きする形で使う(対応してないブラウザもあるけども)

32 · 2005/08/14(日) 16:35:08

　　　　　 |
　　＼　　__　　／
　　＿　（ｍ）　＿ﾋﾟｺｰﾝ
　　　　　|ミ|
　　／　｀´　＼
　　　　　('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

**Name_Not_Found** · 2005/08/14(日) 16:43:11

>>37
なんつうか、お前が言いたいのは多分「スタイルシートで装飾する際に使うセレクタとしてのCLASS、ID」
向こうが言いたいのは多分「要素に一意性を与えるためのID、汎用性を与えるためのCLASS」

見栄えがどうなれば良い/良くない、と、要素を識別したいかどうかとかじゃ噛み合わないよそりゃ。

32 · 2005/08/14(日) 16:51:55

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

35 · 2005/08/14(日) 18:22:30

スタイルありきですよ。だってスタイルシートってそういうものじゃない。
(見栄えをよくするためにコーディングスタイルをぐちゃぐちゃにしてもいいということではない)

>>37
>class="雑種犬" id="ポチ" の親要素に当たる「犬」はclassであるかidであるか、という…
class/idの選択で言えば、犬は当然classなんじゃ？


実際には<tag id="ポチ" class="犬雑種犬"> のようにマークアップするべきだと思うけど。
>>32の例では、idの名称以上にdivで階層化するようなマークアップをする理由がよくわからなかった。

>>32の名札もそうだけど、何をどうしたいのかを決めて、
それからスタイルシートの記述を(id/classの選択、命名も含めて)考えていくだと思う。
(というと、>>32の議論したいことと食い違ってくるとは思うけど、スタイルシートっていうのはそういうものだと自分は思う)

35 · 2005/08/14(日) 19:00:58

>>40
○ 考えていくだと思う。　× 考えていくべきだと思う。　orz

あと、補足として少し。
自分がclass/idを選択する基準は出現回数ではないです。
文書内で一意性のあるものがあって、それを一意であると識別する必要がある場合にidを付けるようにしてる。
ナビゲーションにidを付ける理由としては、その文書の目次である、って意味からかな。
全体を包むwrapperは文書全体を1つに包むという意味合いで、ヘッダ/フッタも1文書に必ず1つつくものとして、
メインのコンテンツ部分も、本文という単位でひとくくりにしてidを付与する。

んで、ナビゲーションは確かに入れ物だけど、
「入れ物」であり、「入れる中身はナビゲーション関連のもの」ということを意識して記述するべきであって、
「ナビゲーション関連の入れ物」という意味合いのclassを作るべきではないと思う。
class="navigation" ではなくて class="menu navigation" 、もしくは id="navigation" class="menu" と記述するべき、ということね。
(さっきの例えでid="navigation"だったのは、サイドメニュー等にナビゲーションしかないつもりで書いてしまっただめ)

32 · 2005/08/14(日) 19:44:41

>>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厨？（＾ω＾；）

35 · 2005/08/14(日) 20:34:28

>>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つの文書として可読性を保てるなら問題ないと思うけど。

21 · 2005/09/02(金) 21:03:34

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

20 · 2005/09/02(金) 21:07:10

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

**Name_Not_Found** · 2005/09/02(金) 22:48:22

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

32 · 2005/09/02(金) 22:54:09

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

**Name_Not_Found** · 2005/09/02(金) 23:04:09

流れを読まずに質問します。

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というのは１ファイルのみで考えていいのでしょうか？
それともサイト全体で考えないといけないのでしょうか？

**Name_Not_Found** · 2005/09/02(金) 23:11:30

仕様嫁

**Name_Not_Found** · 2005/10/18(火) 01:08:04

ID名って考えるよね・・・

ミツエーとかは
○○○Area で統一

W3Cは
○○○Block とかだね

みんななにか統一してる？