こんにちは、よく<div class"○○○○">とか<div ID=""○○○>などと記述がしてあるのですが、classとIDの違いは何でしょうか?
私はよくわからないので、全部classで書いていたのですが、やはり何かが違うからclassとIDが存在するのだろうと思ったら、気になってしょうがありません。
ちなみに全部classで書いている私は駄目なのでしょうか?
また、classとIDの決定的な違いはなんでしょうか?使用方法や正しい使い方などが存在するのでしょうか?
とりあえず現在、全てclassで定義しているのですが、特にこれといった問題は内容に思えます。
詳しい方がおられましたら、宜しくお願いいたします。
No.11ベストアンサー
- 回答日時:
#8 への返信です。
> 再度ですが、こんな感じでは駄目なんでしょうか?
> classでも1つしか使用しない場合同様の効果が出来るのですが・・・。
効果が問題なのではなく、適用される範囲が問題なのです。
CSSの書式効果のみを見た場合、それがidであろうがclassであろうが関係はあ
りません。
スクリプトやアンカー機能で用いないのであれば、IDを忘れ去っても良いです。
#4 でも書きましたが、
『IDを使う必要がないのなら、使わなくてよいです。』
なのです。
私は #8 の例文で、
---------------------------------------------------------------------
印刷したくないのが「印刷したくない」のブロック以外にない場合、他の要素
にも「display:none」が適用される可能性があるのは問題ですよね。
---------------------------------------------------------------------
と書きました。
ここの『適用される可能性があるのは問題』を回避するために、範囲を明示し
たのがIDです。
「そんなもの、自分はclassでも管理できる」とお考えなら、IDは別段必要な
いです。
でも、第三者と共同制作する場合など、意味づけを共有しなければならない環
境では、なくてはならない機能です。
今一度、#4, #5, #8 を続けて読んでもらえば、分かると思うのですが、
どうでしょう。
Bo_Boさん、度々本当にありがとう御座います。
>効果が問題なのではなく、適用される範囲が問題なのです。
素人ながら、心にしみました。実際大分理解が出来てきました。実際私、狭い世界のみで理解しようとしていた事が問題だと思います。それこそスクリプト等を使用した場合を考えたら理解が深まりました。
外部ファイル化した時とかでも、IDが威力を発揮しますよね?
本当にみなさんありがとう御座います。
もっと勉強していいWEBサイトが作れるようにがんばりたいと思います。
No.13
- 回答日時:
まず CSS の指定の仕方について考えてみましょう。
<DIV id=”sidDv001” class=”sclDv002”>
<SPAN id=”sidSp003” class=”sclSp006”>サンプル</SPAN>
<SPAN id=”sidSp005” class=”sclSp006”>さんぷる</SPAN>
</DIV>
SPAN に対して直接しか指定しないのなら CLASS も ID もあまり違いはありません。違いは CLASS は複数が同じ名称で指定でき、ID はそのソース内で一意という点です。
しかしこれが修飾する様な指定方法だと・・・。
実は同じ重みの指定の場合は後述のものが上書き指定となりますが
重みが違う場合はより重い方で。
それでその重みの判断に於いて ID は CLASS よりも重いと。
つまり、
DIV#sidDv001 SPAN 文字色=赤
DIV SPAN.sclSp006 文字色=黒
DIV SPAN#sidSp005 文字色=青
とした場合、「サンプル」の文字色は赤の方が重いと。
「さんぷる」は重さが同じなので後による上書きで 青。
まぁ ID を CSS に意識するなら、以上の様な重みと
あとは一意である意味付けによるデザイン指定の場合。
使い分けをしていれば、将来デザインを変更したい時に
HTML ソースに手を入れなくて済みます。
尚、詳細は参考URLへ
「カスケーディングスタイルシート第1水準」
3.2 カスケードの順序
参考URL:http://www.doraneko.org/webauth/css1/19961217/Ov …
No.12
- 回答日時:
>classで一回だけ使用するといった考えは間違いでしょうか?
別に、間違いではありませんが、
あなたがHTMLを書いて、それを何年も後から(あるいは他の人が)そのHTMLを読んだ時、どう思うでしょうか?
classで指定されているモノは、(今見ているソースの)別の場所にまたclass指定があるかもしれません。
また、今このHTMLには1つしかなくても、分類上将来的に増える可能性があるのかもしれません。
しかし、IDで指定してあるモノについては、(基本的には)1つ見つけた時点で、そのHTMLには、1つしかないということが判明します。
つまり、複数に適用できるもの(class)は、1つのモノにも適用はできますが、それがただ1つであるということを保証してくれませんが、ただ1つであるというもの(ID)は、それがただ1つのものであることを保証してくれます。
No.10
- 回答日時:
根本的に考え方を変えましょう。
「まず初めに HTML ありき」なのです。そして、完成した HTML に合わせてスタイルシートを作るのです。
「スタイルを設定できるように id や class を設定しておく」というのではなくて、「id や class が設定してあったので、それを使ってより良いスタイル設定ができた」ということなのです。
そもそも id や class はスタイル設定だけのためにあるのではありません。他の方もおっしゃっていますが、例えばスクリプトで文書内容を書き換えるときは、class よりも id の方が重要になってきます。あるいは編集ソフトで HTML を編集するとき、指定した id/class の部分だけ抜き出して新しく保存する、というようなことができるかもしれません。
もう一度言いますが、スタイルシートに合わせて HTML の id や class を設定するのでは《ありません》。HTML 文書を書くとき (スタイルシートを作る前) に、文書の構造や内容に合わせてふさわしい id/class をつけるのです。できるだけたくさん id/class を設定しておくほうがいいでしょう。そして、HTML 文書が完璧に出来上がってから、id/class に合わせてスタイル設定やスクリプト作成をするのです。
もちろん全ての id/class に対してスタイル設定をしないといけないなんてことはありません。id や class はスタイル設定だけのためにあるのではないのですからね。スタイル設定のときには役に立たなかった id があってもスクリプト作成のときに役に立つかもしれないし、あるいは最終的にあなたにとってまったく役に立たない id があるかもしれない。
実際、CSS でスタイル設定をするとき、id の恩恵にあずかる機会はそう多くないと思います。でも逆に、JavaScript にとって class はあってもなくてもほとんど違いがないというほど影の薄い存在です。設定した id や class を全部余すところなく使い果たすことなんてないでしょう。でも、それでいいんです。
HTML ソースに id 属性や class 属性を記述しようとしているとき、あなたは CSS でも JavaScript でもなく HTML を書いているのです。HTML の正しい書き方にしたがって id と class を設定する、ただそれだけのことです。HTML を書くときに、スタイルとかスクリプトなどの雑念にとらわれていてはだめだということです。
参考:
http://oshiete1.goo.ne.jp/kotaeru.php3?q=1302776
の No.4 の回答
参考URL:http://oshiete1.goo.ne.jp/kotaeru.php3?q=1302776
No.9
- 回答日時:
idとclassはそもそも違う属性です。
(idは個々の要素の識別名、classは要素のグループ名だと思ってください。)
スタイルシートがidでもclassでもどちらでも指定できるというだけです。
違う属性ですからもちろん
<div id="○○○" class="○○○○">
のように両方の属性を持たせることができます。
スタイルシート基準で考えればidで指定する絶対使用条件はないでしょうけど、
JavaScriptやASPなどにはidが必要になります。
No.8
- 回答日時:
#5 の続きです。
簡単な例:
<html><head><title>TEST</title>
<style type="text/css">
#noPrint { color:green }
</style>
<style type="text/css" media="print">
#noPrint { display:none }
</style>
</head><body>
<h1>印刷したい</h1>
<div id="noPrint">
<h2>印刷したくない</h2>
</div>
</body></html>
上のHTMLでは、id属性 "noPrint" の付いたブロックが印刷されません。
(印刷プレビューで確認してください)
これ、"noPrint" をIDではなく、classとして定義したらどうなるか考えてく
ださい。
印刷したくないのが「印刷したくない」のブロック以外にない場合、他の要素
にも「display:none」が適用される可能性があるのは問題ですよね。
これで理解が進みますか!?
度々ありがとう御座います。
理解が悪くてすみません。再度ですが、こんな感じでは駄目なんでしょうか?classでも1つしか使用しない場合同様の効果が出来るのですが・・・。
<html><head><title>TEST</title>
<style type="text/css">
.noPrint { color:green }
</style>
<style type="text/css" media="print">
.noPrint { display:none }
</style>
</head><body>
<h1>印刷したい</h1>
<div class="noPrint">
<h2>印刷したくない</h2>
</div>
</body></html>
No.6
- 回答日時:
上手く説明できる自身はありませんが(^^;
反対に考えればよいのではないでしょうか。
「スタイルシートをidで指定する」のではなく、
「idで指定されているものをスタイルシートで装飾する」のです。
例えば
<div id="content">内容</div>
ここだけに装飾をしたいときclassを使った場合、
<div id="content" class="waku">内容</div>
などと書くことになりますね。
でもidを指定すれば
<div id="content">内容</div>
これだけで済むわけです。
ありがとう御座います。
しかし私おもいますところ、classで1つしか定義しない場合<div class="content">内容</div>と同じような定義が出来るのですが・・・。
この違いは何でしょうか?
No.5
- 回答日時:
#4 です。
> まだIDの絶対使用条件というものが理解できていないかもしれません・・。
スタイル(CSS)での使用のみを考えているので、理解しづらいのだと思います。
id属性がスタイル以外で果たす役割には、
1. リンクの目標アンカー(<a name="anchor">...</a>と同じ働き)
2. スクリプトなどから参照するための要素の特定
などがあり、これらの役割の方がid属性らしいとも言えます。
スタイルに目を向ければ、その唯一無二の特性を生かして、テンプレート的な
使い方が出来ます。
共通するページのレイアウトをid属性を割り振ったブロック要素で行い、内容
物の書式をそのページ個別で行うなど・・・。
<head>
:
<link rel="stylesheet" href="layout.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
上の "style.css" を別のものにすれば、レイアウトを維持したまま文章など
の書式を変えられます。
No.4
- 回答日時:
まず、IDを使う必要がないのなら、使わなくてよいです。
classのみでスタイルを設定することは「よくあること」で問題はありません。
●idとは?
物を識別するための符号を設定するのに用います。
簡単に言ってしまえば「名札」です。
今、部屋に「Jeff, Eric, Jimi」の3人がいます。
この時、『やぁ!Eric』と声をかけたら、何の迷いもなくEricが返事をします。
しかし、ここにもう一人「Eric」が加わって、『やぁ!Eric』と声をかけたら、
どちらのEricが呼ばれたのか分かりません。
こう言う問題が起こらないように、「同じ部屋には同じ名前の人を入れない」
としたのがIDの考え方です。
ここで言う「部屋」をHTMLページ、名前をIDとすれば、HTML/CSSに当てはまり
ます。
「名前を呼ぶ」と言う動作は、Javascriptやアンカーとしてのリンクなどがあ
ります。
<p><a href="#foo">見出し1へジャンプ</a></p>
:
<h1 id="foo">見出し1</h1>
スタイルの定義方法は、ページの内容を明確な区分ごとに分け、その区分に
スタイルを定義するのが一般的です。
<style type="text/css">
#header{...}
#navi{...}
#content{...}
#footer{...}
</style>
<div id="header">ページの最初</div>
<div id="navi">ナビゲーション</div>
<div id="content">内容</div>
<div id="footer">ページの最後</div>
●classとは?
書式の定義をグループ化したものです。
IDを使う必要性がないのなら、classのみでスタイルを設定することに問題は
ありません。
Bo_Boさん、大変分かりやすいご説明ありがとう御座います。
IDとclassの区分が大分理解できたかと思います。少し疑問が残るんですが・・・。
>まず、IDを使う必要がないのなら、使わなくてよいです。
逆に、必要な時とはどういったときなのでしょうか?使い分け方は分かりましたが、どちらでも対応が出来るんですよね?
例えば<h1>をIDかclassで設定したとした場合、IDは1ページに一回ですので問題ないと思います。ただclassで設定した場合、classは複数回使えるけど<h1>自体、1ページ一回の使用なので、classで一回だけ使用するといった考えは間違いでしょうか?
まだIDの絶対使用条件というものが理解できていないかもしれません・・・。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Ruby No route matches [GET] "/posts/5/destroy" 1 2022/03/24 13:00
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- JavaScript 【Javascript】ボタンクリックで2つのclassに対し、それぞれ別のclassを追加したい 1 2022/07/29 20:52
- その他(プログラミング・Web制作) seleniumbasic chrome操作について 1 2023/03/29 15:40
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ブログの本文のみリンク色を変...
-
CSSに同じclass名がいっぱい‥。...
-
inputタグのテキストBOXだけ右...
-
HTML要素のid/class名の長さに...
-
透過背景を解除するにはどうす...
-
サイトにjQueryが使用されてい...
-
divの入れ子を多用してページを...
-
cssで@importとある場合、どこ...
-
個別にリンクの色を変える方法
-
CSSのクラス名・ID名の指定でワ...
-
CSS, リンクの色を一部変えるに...
-
idの中のid指定
-
スタイルシートで、id属性の中...
-
CSS.div classでグループ化した...
-
htmlの文字が縦書きになる
-
HTML属性での「""」 「''」違い
-
widthやheightの数値に単位(px...
-
htmlのolやulなどlistにtitleや...
-
画像イメージの上下左右、欲し...
-
含む含まないという概念自体の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
個別にリンクの色を変える方法
-
CSSのクラス名・ID名の指定でワ...
-
CSSに同じclass名がいっぱい‥。...
-
idの中のid指定
-
最近、HTMLのヘッダーをIDで定...
-
liリストタグの背景色に色がつ...
-
HTML要素のid/class名の長さに...
-
brにクラスをつけてcssでdispla...
-
透過背景を解除するにはどうす...
-
htmlのid属性って必要なの?
-
フロートのクリアについて
-
ページの左右の余白(枠外)に...
-
サイトにjQueryが使用されてい...
-
CSS, リンクの色を一部変えるに...
-
スタイルシートでデザイン
-
外部css定義したclassをht...
-
Bootstrap3でcontainerがずれる...
-
CSSで、DIV#hogeという記述は何...
-
スタイルシートで、id属性の中...
-
一部のリンクの下線を消す
おすすめ情報