2ちゃんねる ★スマホ版★ ■掲示板に戻る■ 全部 1- 最新50  

■ このスレッドは過去ログ倉庫に格納されています

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

1 :Name_Not_Found:2005/07/28(木) 23:33:40 ID:???
ありそうでなかったんで立ててみた
ちなみに漏れのとこのサイトでは

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

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

2 :Name_Not_Found:2005/07/28(木) 23:34:32 ID:???
class="left"

3 :Name_Not_Found:2005/07/28(木) 23:36:28 ID:???
class="left"

4 :Name_Not_Found:2005/07/28(木) 23:37:45 ID:???
激しく重複スレの予感
http://pc8.2ch.net/test/read.cgi/hp/1060785400/

5 :Name_Not_Found:2005/07/28(木) 23:47:25 ID:???
>>4
全然重複じゃないと思われ

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

6 :Name_Not_Found:2005/07/28(木) 23:58:46 ID:???
class="omanko"

7 :Name_Not_Found:2005/07/28(木) 23:59:55 ID:???
class="3nenBgumi"

8 :Name_Not_Found:2005/07/29(金) 00:20:56 ID:???
class="id"

9 :Name_Not_Found:2005/07/29(金) 00:27:28 ID:???
マジレスするので英語の苦手な漏れにマジレスキボン


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

10 :Name_Not_Found:2005/07/29(金) 00:37:25 ID:bPI70Myi
ナビ部分はnaviって書いてたけど
海外はnavって書くのが主流みたいだから俺もそれにならうことにした

11 :Name_Not_Found:2005/07/29(金) 01:32:09 ID:???
俺は知らんうちにずっとnavで書いてた

12 :Name_Not_Found:2005/07/29(金) 01:43:12 ID:???
.div1-6

13 :Name_Not_Found:2005/07/29(金) 05:10:01 ID:???
>>9
.subsubsectionワロタw

マジレスと言うか参考になればと思って漏れのも晒してみる

body→#pgページの種類(homeとか) .サイト名(xxxxx-comみたいな)
ヘッダー→#header
ナビ→#gbnavi(gbはglobalの略)
コンテンツ→.container #cntalpha, #cntbeta, #cntgamma
サブコラム→.subcol #コラム名 #コラム名
サイドバー→#sidebar
フッター→#footer

大体こんな感じだな

#cntalpha #cntbeta #cntgammaってのが微妙なんだけど
デザイン上この三つのdivは必要だし、何かこう1,2,3ってのを洒落た感じ表せる英語とかないかな?

14 :Name_Not_Found:2005/07/29(金) 16:19:16 ID:kfQJGbd6
良スレの予感

15 :Name_Not_Found:2005/07/29(金) 16:23:55 ID:???
.main
.menu
.アルファベット+3桁数字
たまにどこを示すのか自分で悩む。


16 :Name_Not_Found:2005/07/29(金) 16:27:17 ID:???
>>15
それはあまりいいclass名とは言えないんじゃ。再考を提案する。

17 :Name_Not_Found:2005/07/29(金) 16:56:41 ID:???
>>13
αβγは1,2,3と言う意味で使われるよりも段階を表しているからこの場合適切ではないと思われ
無難にcnt1,cnt2,cnt3にするのが良いんだろうがカッコ悪いな

18 :Name_Not_Found:2005/07/29(金) 17:18:59 ID:???
>>13
TeXでsubsubsectionってあるので。
.chapter -> .section -> .subsection
でもいいんだけど、自分の中ではchapterっていうのは
DiaryとかLinkとかAboutとかを指してる気がして>>9のようにしてる。
あと>>9で書き間違えたけど#toc->#TOCね。

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

20 :Name_Not_Found:2005/07/30(土) 00:05:15 ID:???
いっそUTCで。
Name生成規則には"+"入ってないんだっけ。

21 :19:2005/07/30(土) 00:25:03 ID:???
あ、指摘ありがとう
実際には頭文字に数字はいけないので
#T-時間+09:00
ってやってます
これならたぶん大丈夫だと思った

22 :Name_Not_Found:2005/08/06(土) 11:33:40 ID:jVUhHv4/
class="K-DUB-Shine"

23 :Name_Not_Found:2005/08/06(土) 19:41:39 ID:???
id="heading-of-navi"
id="navi"
id="heading-of-footer"
id="footer"
id="hitokoto"

24 :Name_Not_Found:2005/08/10(水) 21:37:52 ID:???
ウチは、ゲームとパソコン、音楽に付いて書いてるサイトなので、

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 :Name_Not_Found:2005/08/10(水) 22:26:25 ID:???
前から思ってたんだけど海外サイトでよく見かけるdiv#wrapperってなに

26 :Name_Not_Found:2005/08/12(金) 02:05:59 ID:???
だいたいbody直下にwrapperて書けばいい

27 :Name_Not_Found:2005/08/12(金) 15:50:37 ID:???
>>24を見てて思ったんだけど、div .sectionってあったほうがいいの?
自分はそのままbody > h1 って書いてるんだけど。

28 :24:2005/08/12(金) 21:29:09 ID:???
>>25
Wrapperは、「包装」とかの意味がある。囲んでるって事かな。

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

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

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

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

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

30 :Name_Not_Found:2005/08/13(土) 13:06:29 ID:mfU7ikYY
HTMLのやつとかプログラムの変数名とか
海外のサイトでオサレなのを探してたら
小1時間が過ぎていた
ってのがあるな
恐ろしく時間の無駄だ
でも毎日が夏休みの俺には屁でもない

31 :Name_Not_Found:2005/08/13(土) 15:45:50 ID:???
毎日がエブリデイ

32 :Name_Not_Found:2005/08/14(日) 07:48:11 ID:???
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^ิ`)y―┛~
 </div></div></div></div>
</名札>

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

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

33 :Name_Not_Found:2005/08/14(日) 11:10:54 ID:???
>>32
面白い考え方だが、同名の他人だっているわけだ。
その場合id="1年3組27番 鈴木太郎"で一意にしちゃう方が管理上も楽。

34 :Name_Not_Found:2005/08/14(日) 13:08:22 ID:???
idは1つのページで1つしか宣言できないけど
id〜〜の中のulはこういうスタイルとかを決められるから便利。
classはほとんどつかってないなぁ

35 :Name_Not_Found:2005/08/14(日) 15:35:45 ID:???
>>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 :35:2005/08/14(日) 15:49:47 ID:???
自分なら、ナビゲーションの場合↓みたいな感じでマークアップ
<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 :32:2005/08/14(日) 16:35:08 ID:???
       |
   \  __  /
   _ (m) _ピコーン
      |ミ|
    /  `´  \
     ('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 :Name_Not_Found:2005/08/14(日) 16:43:11 ID:???
>>37
なんつうか、お前が言いたいのは多分「スタイルシートで装飾する際に使うセレクタとしてのCLASS、ID」
向こうが言いたいのは多分「要素に一意性を与えるためのID、汎用性を与えるためのCLASS」

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

39 :32:2005/08/14(日) 16:51:55 ID:???
>>38
いえ、要素の識別の話ですよ。
「言葉の意味を正確に反映したマークアップ」と言っている通りです。
どちらかと言えばスタイルありきで話をしているのは>>35氏の様な…?

40 :35:2005/08/14(日) 18:22:30 ID:???
スタイルありきですよ。だってスタイルシートってそういうものじゃない。
(見栄えをよくするためにコーディングスタイルをぐちゃぐちゃにしてもいいということではない)

>>37
>class="雑種犬" id="ポチ" の親要素に当たる「犬」はclassであるかidであるか、という…
class/idの選択で言えば、犬は当然classなんじゃ?
<!-- Javaでいうところの
class 犬{}
class 雑種犬 extends 犬{}
雑種犬 ポチ; -->

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

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

41 :35:2005/08/14(日) 19:00:58 ID:???
>>40
○ 考えていくだと思う。 × 考えていくべきだと思う。 orz

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

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

42 :32:2005/08/14(日) 19:44:41 ID:???
>>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 :35:2005/08/14(日) 20:34:28 ID:???
>>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 :21:2005/09/02(金) 21:03:34 ID:???
idの値に+はinvalidでした。使わないでください。

45 :20:2005/09/02(金) 21:07:10 ID:???
それを示唆したつもりだったのだけど、表現が悪かったかしら…。

46 :Name_Not_Found:2005/09/02(金) 22:48:22 ID:???
断定してないので悪いかといわれればそうです。
まあ私のミスです。

47 :32:2005/09/02(金) 22:54:09 ID:???
このスレのことすっかり忘れてた。

48 :Name_Not_Found:2005/09/02(金) 23:04:09 ID:???
流れを読まずに質問します。

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>
----------

こんな2つ以上のファイルがある場合、<h2>要素は
各ファイル内においては一意なのでidっぽいですが、
サイト全体からみると<h1>を親とする同レベルの子なのでclassかな、などと悩んでしまいます。
IDやCLASSというのは1ファイルのみで考えていいのでしょうか?
それともサイト全体で考えないといけないのでしょうか?

49 :Name_Not_Found:2005/09/02(金) 23:11:30 ID:???
仕様嫁

50 :Name_Not_Found:2005/10/18(火) 01:08:04 ID:???
ID名って考えるよね・・・

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

W3Cは
○○○Block とかだね

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



51 :Name_Not_Found:2005/10/21(金) 16:58:14 ID:???
<div id="4649">
<h1 class="072">

…得ろサイト管理人ならやってそうだ

52 :Name_Not_Found:2005/10/21(金) 18:31:24 ID:???
数字から始めちゃダメだってば。

53 :Name_Not_Found:2005/10/21(金) 18:35:51 ID:???
<div id="left">

…DIV厨ならやってそうだ

54 :Name_Not_Found:2005/10/21(金) 19:12:30 ID:???
<div id="I">
<div id="am">
<div id="god">

ストーリー仕立てにするんだ

55 :Name_Not_Found:2005/10/21(金) 19:18:54 ID:fJ8AcKiF
#I#am#god { display:none }

56 :Name_Not_Found:2005/10/21(金) 19:48:02 ID:???
>>55
個別性300wwww

57 :Name_Not_Found:2005/10/22(土) 00:57:56 ID:???
<br id="a001">(500以上ある)
classに変えたいがそれは出来ない

58 :Name_Not_Found:2005/10/22(土) 01:59:37 ID:???
何の為に、そんな沢山作ったんだw

59 :Name_Not_Found:2005/10/22(土) 07:19:15 ID:phy6e9sc
置換すれば大丈夫だよw

60 :Name_Not_Found:2006/02/05(日) 05:09:14 ID:6v/CbQWw
なにげに良スレage

61 :Name_Not_Found:2006/04/19(水) 23:46:59 ID:???
昔leftとかrightとかつけてた。

62 :Name_Not_Found:2006/07/05(水) 21:11:03 ID:???
こんなIDですがいかがでしょうか。

63 :Name_Not_Found:2006/10/13(金) 03:33:14 ID:xspLPqcz
まぁ上げてみようじゃないか。

64 :Name_Not_Found:2006/10/13(金) 20:38:40 ID:vF0BvFJl
てst

65 :Name_Not_Found:2006/10/14(土) 12:29:42 ID:???
結局記号にすぎないんだからleftだろうがcenterだろうがredだろうが無問題。






徹夜で書きなおしたけどな。

66 :Name_Not_Found:2006/10/14(土) 16:09:54 ID:???
ソシュールっすか

67 :Name_Not_Found:2006/10/26(木) 17:19:46 ID:fbMh31PC
#head
#foot
#right
#left
#all

68 :Name_Not_Found:2006/10/27(金) 00:14:48 ID:???
<div id="DOOM">
<div id="Hexen">
<div id="Quake">

69 :Name Not Found:2006/10/27(金) 04:56:59 ID:??? ?2BP(0)
[wedding.css]
#happy
#hell
#fight
#restart

70 :Name_Not_Found:2006/12/28(木) 21:08:40 ID:???
ムギとかいうやつ俺の発言に影響されてうpするだろうなww
ほんと他人の言葉に影響されやすい奴wwネットだってのになww  by>>413

71 :ムギ:2007/01/03(水) 21:35:04 ID:???
しねーよww

72 :Name_Not_Found:2007/02/02(金) 16:24:18 ID:LkYYtuMC
<div id="h1">
<div class="h2">
<div class="h3">
絶対いると思ったが俺だけか

73 :Name_Not_Found:2007/02/02(金) 17:03:03 ID:???
>>72
そんなdiv使いをするやつはidとclassの区別も出来ないだろ

74 :Name_Not_Found:2007/02/03(土) 00:03:44 ID:???
>>73
おめぇごときに何がわかるってんだよw

75 :Name_Not_Found:2007/02/03(土) 00:10:51 ID:???
何だその逆ギレ

23 KB
■ このスレッドは過去ログ倉庫に格納されています

★スマホ版★ 掲示板に戻る 全部 前100 次100 最新50

read.cgi ver 05.02.02 2014/06/23 Mango Mangüé ★
FOX ★ DSO(Dynamic Shared Object)