-PR-
解決済み

スタイルシートでidとクラスの定義について

  • すぐに回答を!
  • 質問No.4043904
  • 閲覧数557
  • ありがとう数5
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 50% (14/28)

スタイルシートでidとクラスの違いについてですがidは、1ページ内で一度しか使えないので、ページのレイアウトとして使われることが多くclassは、1ページ内で何度も使用することが可能で、同じデザインを複数指定したい場合に使用される事はわかったのですが、1つのページで id="heder"と定義した場合、その同じページのフッターを定義する際id="footer"とはせずclass="footer"とするべきなのでしょうか?
それと同じページ内でidを2度使用するとどうなるのでしょうか?
教えて下さい!!
通報する
  • 回答数2
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

質問者が選んだベストアンサー

  • 回答No.2
レベル7

ベストアンサー率 43% (10/23)

だいぶ勘違いが入っています。
idはこの場合、horiewebという個人名です。このサービスでは一意です。
対して
classは質問者・回答者という分類です。大勢おられます。1回しか出てこなくても、classがふさわしい場合と、idがふさわしい場合があります。このページで質問者は1回しか出てきませんが分類としての質問者ですからclassにすべきで個人としてはidにすべきです。

idとclassを比べるとidの方が限定的になります。スタイルシートでは詳細度が高いといいます。はぁ?だと思います。

詳細度が高いということは、違う指定をしたときに、id指定の方が優先されるということです。idで紫を指定していれば、後からclassで赤を指定しても紫で表示されます。

また、名前ですから、アンカー(リンクなど)にも使えます。ページのそこのidを指定してリンクを貼れるのです(一意だから特定できる)。同じページに2つ同じidがあったら、どうなるのでしょう?やってみてください。

ちゃんと理解して使い分けした方がいいですよ。とはいえ、あまり、上手な説明でないですね。2つリンクを貼っておきます。
class と id の違いとは?
http://deztec.sakura.ne.jp/x/01/tips/page/p0045.html
カスケード-詳細度
http://homepage2.nifty.com/Shouji/pc/css/ss-cascade.html#specificity
お礼コメント
horieweb

お礼率 50% (14/28)

回答ありがとうございました。
実践してみます。

idは一つ指定するとHTML上で定義した全てに反映されてしまうために1度しか使用できないのですね!
classは同じサイト内で何回同じ名前で指定してもそのページ単位で使用できるという事なんでしょうね。

なんとなくわかってきました。
今後もよろしくお願い致します。
投稿日時 - 2008-08-24 03:13:27
-PR-
-PR-

その他の回答 (全1件)

  • 回答No.1
レベル12

ベストアンサー率 43% (197/454)

ちょっと勘違いされてますね。
「ひとつの文書内に同じIDが2つ以上存在してはならない」んです。
つまり id="header" が2つ以上あってはならないのであって、
その同じ文書に id="footer" があっても何の問題もないです。
id="" がひとつしか使えない、という事ではありません。

また、仮に2つ以上の同一IDがあっても、
現在の主要なブラウザは問題なく表示してくれます。
同一文書内リンク、たとえば index.html#header のような
リンクが正常に機能しない事を除けば、実際上はあまり問題ないです。
無論、正しくはないので、バリデータにかけるとエラーが出ますが。
お礼コメント
horieweb

お礼率 50% (14/28)

有難うございました。
ずっとわかりませんでしたがようやくわかりました。(感謝!!)
これからも宜しくお願いします。
投稿日時 - 2008-05-23 15:01:24


このQ&Aで解決しましたか?
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
-PR-
-PR-
このQ&Aにこう思った!同じようなことあった!感想や体験を書こう
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


新大学生・新社会人のパソコンの悩みを解決!

-PR-

ピックアップ

-PR-
ページ先頭へ