CSSのセレクタ(#)とclassの賢い使い分け、組み合わせ方を教えてください。いままでclassばっかり使用していたのでいまいち#の恩恵が理解できていません。その他、CSSのワンポイントテクニックなど、ただのリファレンスより一歩進んだテクニックの紹介も歓迎です。

宜しくお願いします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2004/10/01 12:51:04
  • 終了:--

回答(6件)

id:ogrenavi No.1

ogrenavi回答回数161ベストアンサー獲得回数92004/10/06 12:00:22

ポイント10pt

http://w3j.org/articles/MTstructuraldesign/MTstructuraldesign01....

プロが教えるMovable Typeの構造デザイン - 元原稿

>>正しく使い分けている場合、IDは一カ所にしか使わないわけですから、

>この部分がよくわかりませんでした。もう少し調べてみます。

ややこしい書き方をしてすみませんでした。

サイト全体のことではなく、「ページ内に一度しか出てこない」という意味でした。

ただ、使い分けについて、「1度しか使わない」ということで使い分けるのは厳密

には違いますので、きちんと書かれているサイトを探してみました。

以下参考URL内の該当部分(ページの下の方です)をまとめておきます。

■ idとclassの意味

 id属性は、その要素に固有の名前を与えるために使います。

 class属性は、その要素がどういった属性というか分類なのかというような区別のために使われるものです。

■ 使い分ける意味(1)併用して使うことができる

 ひとつの要素に対してid属性とclass属性を併用することもできます。

■ 使い分ける意味(2)id属性のほうがスタイル適用の優先順位が高くなる特徴がある

 CSS的な側面からいうと、id属性やclass属性はセレクタとしての重要な役割を担っています。

 このとき、id属性のほうがスタイル適用の優先順位が高くなる特徴もあります

id:mizusawaaki No.2

mizusawaaki回答回数60ベストアンサー獲得回数02004/10/01 12:54:49

ポイント18pt

ココなど参考にしてみてはいかがですか?

#で定義するのは個人的にはあまり好きではないので、

classや、IDを使用しています。

id:sls

ありがとうございます。

あれれ?私の勉強不足でしょうか?

.hoge

でclassで、

#hogehoge

でIDなんじゃなかったでしたっけ?

2004/10/01 12:58:50
id:paphio No.3

paphio回答回数299ベストアンサー獲得回数02004/10/01 12:59:06

ポイント18pt

私はこちらのサイトで勉強しています。

セレクタとクラスについては下のURLで触れています。

id:kuippa No.4

くいっぱ回答回数1030ベストアンサー獲得回数132004/10/01 13:57:51

ポイント18pt

http://www2s.biglobe.ne.jp/~tosinari/

STRANGE SPACE (奇妙空間)

もぉ何年も前に書いてそのままにしているスクリプトで申し訳ないのですが、私は掲題URLのようにしようしています。

レイアウトてきなものは基本、classで指定して、

javascriptなどの為にidを使用してオブジェクトとして処理をしたいときは付加条件で#による指定をしています。

タグに対するスタイル>

タグのclassにおけるスタイル>

(idによるスタイルの指定>)

最後にタグのエレメントとしての直接styleを書き込む、

というような順番で使用しています。

id:ogrenavi No.5

ogrenavi回答回数161ベストアンサー獲得回数92004/10/01 17:05:12

ポイント18pt

http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global....

The global structure of an HTML document (ja)

困ったときは、W3の仕様書をきちんと見ると書いてあります。参考に邦訳をいれておきます。

クラスは複数の要素に共通する分類を割り当てるもの

ID(IDセレクタ(#))は文書内の一つの要素に注目して一意な識別子を割り当てるものです。

2番目の参照先でかかれているように、class と id は全くの別物ですので是非使い分けたい所です。

使い分けの恩恵として考えられるのは、CSSの効率化と、記述の見やすさでしょう。

正しく使い分けている場合、IDは一カ所にしか使わないわけですから、

メニュー部分はID=menu、本文部分はID=main、などのように、

内容にそって使用していれば、後でCSSを見直すときに大変見やすくなります。

3番目のリンク参照先のように、セレクタを組み合わせて使う場合、さらに恩恵に与れるかと思います。

また、併用して使うことができるのも恩恵のひとつだと思います。

蛇足:例を書いたのですが、長くなってしまう上に、はてなは記号(”とか)を変換してしまうのですね。

   かえってわかりにくいので省きました。

id:sls

ありがとうございます。

>正しく使い分けている場合、IDは一カ所にしか使わないわけですから、

この部分がよくわかりませんでした。もう少し調べてみます。

2004/10/01 17:49:41
id:Mars No.6

Mars回答回数203ベストアンサー獲得回数202004/10/01 19:17:30

ポイント18pt

私の使い分けとしては

・汎用性のあるもの(ページ内に複数登場している、又は登場する可能性のあるもの)はclassを

・ユニークなもの(ページ内に一箇所しか存在しないもの)にはidを付けています。

※idはページ内で重複してはイケナイ、複数箇所に同じidを付けてはイケナイことになっています。

また、場合によっては一つの要素にclassとidの両方を付ける事もありますし、classを複数付ける事もあります。

<p id=”hoge” class=”hage uge”>

二つのclassでそれぞれ、レイアウト目的のスタイルと、色関係のスタイルを記述し、更に固有のスタイルを付けたしたい場合とか。

やりすぎるのもわかりづらくなるので、あんまりやりませんが。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません