CSSテクニックコミュのid指定とclass指定について、safariについて。

私CSS駆け出しです。

初心者の質問なのですが、そういえば自分は細かい範囲の指定をするときに<div class="？？？？">ばかりを使っていて、idで括った事がないなぁ、と思いました。

みなさん、どういう場合にidとclassを使い分けていらっしゃいますか？そしてその違いの意味は？ググってみたけれども分かりませんでした。どうか教えて頂きたいです。

そしてたった今！なのですが、CSSで装飾している最中にブラウザでプレビューした所、新しいタグを入れたりCSSファイルの方に何か書き足した→firefoxでもIE6では即反映されるのに、safariでは反映されない。なんでだ！！と思って一時休憩→休憩を終えてもう一回safariでプレビューしてみると普通に反映されている、、、
という事がたまに起きます。こういう経験がある方、いらっしゃいます？マシンは至って普通のiBookG４です。

宜しくお願いします。

コメント(6)

最初
全て
最新の40件

[1] mixiユーザー 07月20日 23:18

idとclassの使い分けですが簡単に言うとidで基本的に作って１ページに２回以上でてくる要素にはclassを使えばいいと思いますよ。

idは一意のものに指定するもので（jsでgetElementByidとか使うときに２個あったら困りますしね）classはクラス化するという感じでしょうか。

Safariの問題はほぼ間違いなくキャッシュだと思います。
Safariは更新ボタンを１０回以上連打すればクリアされると思いますよ。

こないだ会社で初心者の皆に配ったメモもおいて帰ります。
くじけずにがんばってくださいね

==== おかしいなとおもったらチェックすることリスト ====

* キャッシュはクリアしましたか？
* スタイルシート内のコロン、セミコロンは抜けていませんか？
（Dreamweaverで見ると不自然に青く表示されるので見つけやすい）
* タグを閉じ忘れていませんか？
* スタイルシートへのパスはあっていますか？
* 全角スペースを挿入していませんか？
* DTDの記述は適切ですか？

ほかの落とし穴もブログで紹介しています、宣伝申し訳ありませんがよろしくお願いします。
http://stopnlisten.no.land.to/

[2] mixiユーザー 07月20日 23:31

はじめまして。
私もkennsuさんと同じような感じです。
headerやfooter・グローバルナビゲーションなど、必然的に１ページ内で1箇所しか指定しないような所はidを、ページ内で何度も使い回すものはclassを使っています。

[3] mixiユーザー 07月21日 04:22

ちは、
＞Safariは更新ボタンを１０回以上連打
cmd+alt+E

[4] mixiユーザー 07月21日 04:58

header、footer、グローバルナビゲーションはclassでしょう。

使い分けに関しては、次のドキュメントが非常に解りやすいです。

P-0045 class と id の違いとは？
http://deztec.sakura.ne.jp/x/01/tips/page/p0045.html

[5] mixiユーザー 07月21日 09:16

私も、ページ内で一つのものに id を使用しています。
後は、DOM などで参照する要素に対して固有の id を振ります。

ページ全体の骨格部分は id で、肉付けを class 、DOM でコントロールする要素は id というような、大雑把なイメージでいます。

[6] mixiユーザー 07月21日 20:01

kennsuさん＞
safariの問題、原因はキャッシュでした。ありがとうございます。
ブログもチェックさせてもらいますね。

なると@うしさん＞
そういう風に例（？）をあげて頂くと、イメージがしやすいです。早速class→idにすべき箇所を探してみます。

oppさん>
使います！ありがとうございます。

iwaimさん＞
とても解りやすく、勉強になりそうなのでP-0045だけじゃなくはじめから（P-0001がnot foundになりますね。）通して見ようと思います。ありがとうございます。

拳骨斎さん＞
DOMという言葉を初めて聞いたので”？？？？”という感じですが、知る切っ掛けになりました。勉強します。

みなさん、本当にありがとうございます。
身近に聞く相手が居ないので本当に助かります。これからもこのコミュニティでこまごま質問をさせて頂くと思います。また宜しくお願いします！
mixiを始めて今までで一番ミクシーに感謝！と思いました。

ログインすると、みんなのコメントがもっと見れるよ