« Apolloがあれば、確認用MACはもう不要？ | Back To Blog Top | コーディング、理想と現実のはざま。 割と雑記風味。 »
classとidの使い分けについて考えてみる
CSS Nite Vol.18の懇親会で行われたiwaimさんのプレゼンで、headerの部分は本当にidでいいの？という問いかけがありました。
多分、多くの人が行っているclassとidの使い分けは、複数回登場するかしないかだと思うんですけど、それはどうやら間違った基準なようです。
仕様書は？
そもそも、仕様書の定義としては、二つの違いはどうなっているのでしょうか。
id = name [CS]
この属性は、要素に名前を割り当てる。この名前は文書中で一意でなければならない。
class = cdata-list [CS]
この属性は、ある要素に1つのクラス名を割り当てるか、または複数のクラス名を設定する。幾つの要素に対してでも、同じクラス名あるいはクラス名群が割り当てできる。複数のクラス名については、空白文字によって区切らねばならない。
The global structure of an HTML document (ja)（HTML 4.01 仕様書邦訳）には、このようにあります（英語版は本人が読めないから勘弁な！）。
また、次のようにも書いてあります。
一方のclass属性は、ある要素について1つ以上のクラス名を割り当て、この要素が当該クラス/クラス群に属することが示され得る。
つまり、idは一意な名前を付ける場合に使います。
classがちょっとややこしい書き方（仕様書ってどうして解りにくい書き方なんだろう！）なんですけど、2つめの引用部分を見ると（そしてiwaimさんのプレゼンを見ると）、要素を分類する為に使える属性である事が解ります。
一意の名前と要素の分類。 これがclassとidの違いのようです。
わかりやすい例としてiwaimさんのスライドにも引用されていた、徳保 隆夫さんのTips/WebPage/class と id の違いとは？より引用します。
あなたの家で飼っている犬を、より細かな分類で雑種犬と呼ぶか、唯一無二の名前でポチと呼ぶか、そういう違いなのです。
あー、なるほど。 っていう感じです。
コーダーはclassでShunはid。 スターバックスはclassでスターバックスラテはid。 そういう事なようです。
となるとheaderは？
そう言われると、headerはclassな気がしてきます。 て言うか、そうなるとcontainerやmainColumnもclassになるような雰囲気です。
文書ツリーで親要素っぽい物にはidを振りがちですけど、むしろそれは逆なのではと。
header │ │ ├───h1 │ │ ├───description │ │ └───nav ├Home ├Blog └Link mainColumn │ │ （略）
こんなツリーがあった場合には、「headerという分類に属するh1」とか、「headerに属するnavに属するBlog」という感じになるのかな。
つまり、idはこまかーい所まで突き詰めた名前で、classは大雑把な部分での名前とでも言いますか。
あ。 今ちょっと解りやすい例を思いついたかも。
classという袋の中に、idという品物が入っているみたいな？
これをheaderという袋の中に、h1やdescriptionなど各コンテンツという品物が入っていると置き換えれば･･････ほら！
ただしその他の点では？
ここまでは文書としてのclassとidの使い分けを考えてみました。
でも、特にidは文書としてだけではなく、プログラムで操作する時やアンカーを貼る時にもよく使います。
そうなると、headerにページ内リンクを貼る時にはちょっと困った事になります。
まあでも、idにせんが為に文書を変えたりするのは本末転倒だと思いますし、この辺りはアンカー用としてheaderにclassとidの両方を指定しても問題無いんじゃないかな、と思います。
ちなみに、Shunさんの職場ではidはプログラマの物。 classはコーダーの物。という区分けになっています。 これは業務を円滑にする為の判断なようです。
ただ、昨日のちょっとしたMTGでは「言ってくれれば状況によっては対応するよ」という話もありましたし、これが絶対という訳ではないようです。
まとめ
という訳で、一意の要素にはidを、グループ化する要素にはclassを。
更にWebサイトの機能として必要な部分にはidを、というのが一つの答えかな、と思いました。
おまけ
でもま、headerにidが間違いかと言うと、必ずしもそうとは言えないかと思います。
文書によっては一意かグループ化か、判断が難しい（人によって異なる）事もあるかと思いますし（例えば、ニュース記事での『東京都渋谷区に住む男性（無職 38才）』や『バールのような物』など、その記事内では一意な気もするけど、視野を広げるとグループとも取れる）。
実際の業務でどこまで追求するのか、という話もありますね。
経営側からすると、「どっちでも良いから早く仕事しる」って感じかもしれませんし。
9 Comment
＞everesさん
コメントありがとうございます！
なるほど。 こういった記事を書く時も、『文書ありき』である事を、もっと意識していないとですね。
どうもありがとうございました。
こんにちは。
自分もiwaimさんのプレゼンをお聞きしてから結構考えてみました。
文書中唯一の特別な分類 としてIDとみるか、文書中唯一の特別な分類 としてclassとみるかって感じですかね。結局どっちでもいいのかなぁとか思ったのですが、Web Standards Projectだと構造系はID付いてるのでとりあえずIDでやってみようかなぁと思いました。
あ…、htmlタグが使えるとあったので「文書中唯一の特別な分類」のとこにそれぞれemつけてわけてみたのですが見た目が変わってなかったですね。すみません。
前のコメントはソースみてくだｓ
＞よまさん
コメントありがとうございます！
結局は文書によっても違ってくるでしょうし、「これが絶対！ 正解！」とできないのがツライところですよねえ。
あと、コメントがポンコツで申し訳ないです。
あちこちガタがきてるなあ・・・。
「div id="header"」は、グルーピングと言うより、headerと言うボックスをレイアウト（の効率）上必要とする場合に設置する、一意の要素なんではないでしょうか。
それと、ごく一般的なHTMLの記述でも「id は foo で、bar と baz の class に属する」って要素は頻繁に出てくると思っていました。出現回数どうのって話は、7～8年前に間違った説明例として聞いたっきりです。
＞21さん
コメントありがとうございます！
＞レイアウト（の効率）上必要とする場合に設置する、一意の要素
なるほどー。 そういう考え方も納得できますね。
文書としての「袋」だとclassだけど、制作の効率上設置する「袋」はid、っていう感じでしょうか。
7,8年前というと、僕はWeb制作の世界と殆ど関わりが無かった頃なので、当時の状況は全く知りません。
ただ、多くの人が、これまでclassとidの違いについて、深く考えずに使っていたのは事実なのかも、と思いました。
多分、だからこそ、今回この話題でちょっとした盛り上がりを見せているのかな、なんて。
自分でもちょと不安になったので、class / id の設定についてもう一度考えてみました。
id
文書中に於いて、一意の要素に与える識別子
class
文書中に於いて、任意の要素群に与える識別子
この理解で行くと、「header」なる div があった場合、それは「この文書に於いて、この Division は header なる一意の要素である」って事ですね。header が不必要な文書には当然そんな要素出てきませんし、header に何をさせるかは文書によりけり。
で、一般的な「header」なる div の使い方は、ページ内で冒頭に表示したい要素（タイトルとかメニューとかロゴとか広告とか）をまとめる為の器です。当然それは、器が要るので置いてある。器にまとめる事で「この器以下は全て header に属しますよー」って明示を、CSS やらスクリプトにしたいが為に。明示したくなけりゃ置かなきゃいいだけの事ですね。
実際に自分が過去作ったサイトでは、header div は無く、h1 とimg に class="header" を指定したものもありました。class で置いた理由は、要らん div を外すのが一つ。あと、ページとして考えた時に、header という構造を持つのではなく、冒頭に出てくる要素って扱いしか必要なかったからです。
きちんと追っかけていないので、この話題がなぜにこの時期出てきたのかよく判ってないんですが、ひとまず自分の中ではまとめ直すいい機会になりました。
ちなみに、7～8年前は私も中学生だったので、件の出現回数の話は、多分雑誌かWebかで見たんだと思います。
＞21さん
またまたコメントありがとうございます！
しかも、このコメントだけでご自分の記事にできそうな濃い内容で恐縮です。
＞h1 とimg に class="header" を指定
うわ、何だかこれ凄いCoolですね。
今度マネさせてください！
ここ数日の間にこの話題で盛り上がったのは、CSS Nite Vol.18 の懇親会で行われた、iwaimさんのプレゼンがきっかけだと思っています。
あのプレゼンが無かったら、未だに自分は深く考えずにclassとidを使っていたかもしれません。
「idは一意な名前を付ける場合に使う」のではなくて、「文書内での意味(位置づけ)を表すものなので、一意にならないとおかしい」ではないでしょうか。
日本のWebデザイナがidを自分たちの手に取り戻す日が来ることを祈りつつ。
Name:everes | 2007年03月21日 17:47