- ベストアンサー
classとIDの違い
classとIDの両方の設定ができますよね。 あの具体的な使い分けってあるんですか。 時々、IDとclassが一緒になっていることがありますよね？
- yasyatengu
- お礼率82% (435/530)
- CSS
- 回答数6
- ありがとう数6
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (5)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
まず、HTMLはその文書を構成する要素をマークアップするメタ言語と呼ばれるものです。 すなわち、ここが見出し、ここが段落と言う風に、タグ(荷札)で囲んで印をつけ(マークアップ)ます。 ところが、限られたタグしかありませんから、文書を構成する要素といっても限界があります。そこで、要素にclass名やid属性(attribute)をつけて区別できるようにします。 ★7.5.2 要素識別子: id属性とclass属性 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.2 ) (注)解らないときは、仕様書を確認する癖をつけましょう。伝聞よりは正確で確実な情報を得られます。それを調べて解らないときに聞くとよいです。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿ここから id = name [CS] この属性は、要素に名前を割り当てる。この名前は文書中で一意でなければならない。 class = cdata-list [CS] この属性は、ある要素に1つのクラス名を割り当てるか、または複数のクラス名を設定する。 幾つの要素に対してでも、同じクラス名あるいはクラス名群が割り当てできる。複数のクラス名については、空白文字によって区切らねばならない。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで また、用意された要素(タグ)が無い場合、DIV,SPANを使ってマークアップしますが、そのDIV,SPANの項目には 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 各々、内容が行内であるか(SPAN)ブロックレベルであるか(DIV)は定めるが、他のプレゼンテーション的語彙を示すことはない。 従って著者は、この両要素をスタイルシートやlang属性等と併用することで、HTMLを自身の必要や好みに応じられるようにできる。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［7.5.4要素のグループ化: DIV要素とSPAN要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より と書かれています。 具体的に説明すると次のようなHTMLにおいて、 <body> <!-- ここからヘッダ要素 --> 見出しやナビゲーション <!-- ヘッダこまで --> <!-- ここから本文の章(section) --> 章見出し <!-- 本文終わり --> <!-- ここから本文の章(section) --> 章見出し <!-- 本文終わり --> <!-- ここからフッタ --> フッター記事 <!-- フッタ終わり --> で構成されている場合、 {HTML5]では、 <body> <header> <h1>見出し</h1> </header> <section> <h2>章見出し</h2> <p>記事</p> </section> <section> <h2>章見出し</h2> <p>記事</p> </section> <footer> <h2>フッタ見出し</h2> </footer> </body> となります。HTML4.01には、この様な(文書)構造を示す要素(タグ)がありませんでしたから、 「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する」ために <body> <div class="header"> <h1>見出し</h1> </div> <div class="section"> <h2>章見出し</h2> <p>記事</p> </div> <div class="section"> <h2>章見出し</h2> <p>記事</p> </div> <div class="footer"> <h2>フッタ見出し</h2> </div> </body> というマークアップが推奨されていました。検索エンジンはこのようなclass名やidは理解しています。また、著者自身も後でHTMLやCSSを見直すときに理解しやすいです。 【現実には】、この様なマークアップをするためには著者自身が内容を理解して適切なclass名をつけなけれはなりませんが、オーサリングツールに読解力はありませんから、class名にwrapper,container,left,rightなど、検索エンジンにも意味不明なものが付けられ続けていました。その反省からHTMLでは、文書の構造を示す要素(タグ)がいくつか決められました。 ここから解るように、IDやclassは本来は「文書に構造を付加するため」のものなのですが、スタイルシートのためと誤解されている向きも多々あります。 {あの具体的な使い分けってあるんですか。} IDは単純に「その文書にひとつしかない」要素を示すものがIDです。主にリンクの終端に使われます。class名は、文字通りグループ(クラス)を示すものです。特にclass名はスタイルシートにとって便利が良い機能です。 {時々、IDとclassが一緒になっていることがありますよね？} もちろん一緒だろうと別だろうと構いません。 <div class="header"> <div class="nav" id="nav"> <ol> <li><a href=""></a></li> リンク先<a href="nav">として、スタイルシートで、div.navあるいはdiv#navでも可能です。スタイルシートで、一意属セレクタ(IDのこと)はb=1,クラスセレクタはC=1ですから、詳細度が異なります。 いずれにしても、スタイルシートのためにIDやclass名を乱雑につけるべきではありません。詳細度などカスケーディング機能で要素を特定できないときにのみつける意識が必要です。 【例】 <div class="header"> <div class="nav" id="nav"> <ol> <li><a href=""></a></li> に対して、div.nav ol li a{color:red;}[詳細度 0 0 1 4]で済むものを <div id="header"> <div class="nav"> <ol> <li><a href="" id="red"></a></li> に対して、#red{color:red;}詳細度[0 1 0 0]なんてしないことです。
お礼
ご回答有り難うございます。 仕様書を見ることは大切だと思います。 こちらはラフなスタイルで活用しています。 しかし、本より多くの知識を短時間が得ることもでき 掲示板は掲示板でかなり有効なツールだと思います。 名前が同じ件は既に他の方の返信で述べておりますが、 少し配慮が足りなくて申し訳ありません。
- 0909union
- ベストアンサー率39% (325/818)
すみません。もう一つありましたね。 ＞＞時々、IDとclassが一緒になっていることがありますよね？ ＞ 脳内で混乱しませんか？ ”ClassID” と言う場合ですね。IDとは一般用語ではユニークになる名前。となります。HTMLオブジェクトの属性には”ClassID”はありませんが、一般的な呼び方として、Classには名前が重ならないように、当然、 ユニークなるIDを使用することを意識させるために、 Class ID（クラスID）を指定してください。 なんて言う、言い方で指示している参考書とか、初心者むけにはありますね。 その辺を誤解している場合がありますね。 HTMLオブジェクトの属性の”ID”と”Class”の事をいっているんだ。と言う感じですか。 クラスIDと言ったら、"Class"の値の事を指しているので、消して単独で存在していう”ID”ではない。 この辺をNo３さんが、含めていったのかもしれませんね。
お礼
No2さんのコードのように一行で出るという意味です。 書き方に配慮がなくて済みません。 classIDなる言葉があるのですか。 そういうことも知りませんでしたが、変な言葉ですよね。
- 0909union
- ベストアンサー率39% (325/818)
＞＞時々、IDとclassが一緒になっていることがありますよね？ ＞ 脳内で混乱しませんか？ ホローのホローですね。たぶん、設定されている名前が一緒になっている、と言うことでしょう。 スクリプト言語は、厳密に指定しなくても、イージーに使う事がゆるされています。 その辺をうまく使っている方も多く、有名なJavaScriptのフレームワークでも、その辺をうまく使ったと開発者は思ったのでしょうが、結果的に失敗に終わりバージョンを重ねるごとに、ちゃんとした人が設計しなおしたのでしょう。 その辺を改善して誤動作しないようになり、無駄なループがなくなりました。 確かにIDとClassに同じ名前をつけるいる物がたまにありますが、たいていミスでそうなっている場合ですね。そうでない場合は、前述のような意図して、行っている場合ですね。 よくあるのが、同じ名前があった場合、指定した場所、順番で優先順位が内部仕様として、存在します。 例えば順番があるとすれば、何かのパーツを閲覧ユーザーによって変えたい場合、何を変えるかですが、機転が利かないやつだと、全く違うカテゴリーの物を変えようとします。 色＝形＝大きさ＝オブジェクト型（文字、画像） 例えば、「はい、いいえ」と言う選択しで、色かオブジェクト型を変えてしまう。何てことですね。そうした場合、優先される順番をうまく利用する方法ですね。 これらは、ちゃんと考えれば、苦肉の策としての順番を利用する方法をとらなくても、できるのに、どうしてもそれをしたい。 なんて投稿がよくあります。 まあ、このような人は、この世界に向かない人なのでしょう。 さらに言えば、このようなスクリプトの言語や、ブラウザの仕様に頼って作ってしまう場合、かなり危険があり、年がたったりして、それぞれバージョンを重ねると、動作しなかったり、誤動作する対象になります。 アンフェアと言う映画がヒットしているそうですが、言語の仕様も、なるべくアンフェアがないようにバージョンアップ（上位互換、下位互換と言う事）していますが、 それでも、仕様や動作があいまいだった部分を最初に検討課題とますので、そのようなあいまいな仕様はたいて是正されてしまい、そこをついて作った物は誤動作します（開発者の最初に意図した動作とは違う事になる）。 投稿者がもし、そのようなサンプルを見たら、まねしないよに。ミスだと思ってください。
お礼
ご回答有り難うございます。 もし私がWebサイトを作るのなら趣味程度です。 HTML自体、プログラミング言語と異質なところがあり、 簡単なようでいて触ってみると中々奥が深い。 なので今は眺めている程度です。
- naokita
- ベストアンサー率57% (1008/1745)
詳細は、NO.1.2さんので分かると思いますが、 かなり多いのが、 ヘッダー メイン サイドバー フッター などは、 そのページに１回しか出ないので、テンプレートなどでよく利用されます。 <div id="wrapper"> <div id="container"> <div id="header"> <div id="side-nav"> <div id="footer"> <div id="Copyright"> IDはCSSの詳細度でclassより優先されますし。 固有名詞というけども、 （NO2さんでいえばポチやタマ）何回も登場する場合には、 classにしなければいけないので、 初心者の内（理屈がわかるまで）は、 classを使いまわしたり、統一した方が良いかも知れません。 ------------- <a href="#nav">IDナビに移動<a>とすれば、指定のIDに移動する設定ができます。 ＞時々、IDとclassが一緒になっていることがありますよね？ 脳内で混乱しませんか？ コンピューターは混同しませんから問題ないですが・・・
お礼
確かにdiv id="header"とかはよく見ますよね。 idとclassが一緒というのは一行の中で出てくるという意味で No2さんのコードがそのものです。混乱すみません。
- DrFell
- ベストアンサー率55% (305/551)
よくある解説では、htmlページ内で1回しか使えないのがID、何度でも使えるのがclassと書いているページがあります。まぁ、結果はそういうことなんですけど、微妙に違います。 ●idはアイデンティティの略。 広義には、「同一性・独自性・固有性、個性、国・民族・組織などある特定集団への帰属意識、身元、特定の人」などの意味で用いられます。コンピューター関係では、「一致、識別」のことです。 学術用語での定義は、哲学分野では、「ものがそれ自身に対して同じであって、一個のものとして存在すること」です。心理学・社会学・人間学などでは、「人が時や場面を越えて一個の人格として存在し、自己を自己として確信する自我の統一を持っていること」と説明され、「本質的自己規定」をさします。 ●class 分類、種類、種族、属性。 簡単にいうと、idは名前、classは属性。yasyatenguが名前、男・東京都民・成人・人間・教えてgooの利用者、Okwaveの利用者……が属性。 htmlではページ内にリンクを貼りたい場合、idを付けていればそこに飛べますが、classでは飛べません。 cssではclassとidでは詳細度が違います。classより、idの記述が優先されます。 ＞時々、IDとclassが一緒になっていることがありますよね？ 使い分けされている場合も、使い分けされていない場合、意味もわからずコピペソースを貼ってある場合もあります。
お礼
id>classでそういう概念があるのは知りませんでした。 そういえばページ内のリンクは#にしか飛びませんよね。 ご回答有り難うございます。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
classとidが同時に出てくるとはそういう意味です。 一行で出てくることがあったので何かなと。 こちらの説明は分かり易くて助かりました。 どうもご回答有り難うございます。