人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: sls
●カテゴリ:ウェブ制作
✍キーワード:Class CSS いまいち セレクタ リファレンス
○ 状態 :終了
└ 回答数 : 6/6件

▽最新の回答へ

1 ● ogrenavi
●10ポイント

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

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

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

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

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

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

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

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

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

■ idとclassの意味

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

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

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

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

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

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

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


2 ● mizusawaaki
●18ポイント

http://hp.vector.co.jp/authors/VA022006/css/selector.html

セレクタ - CSS2リファレンス

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

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

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

◎質問者からの返答

ありがとうございます。

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

.hoge

でclassで、

#hogehoge

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


3 ● paphio
●18ポイント

http://zoo.millto.net/~tancro/stylesheet/index.html

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

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

http://zoo.millto.net/~tancro/stylesheet/css_ouyou.html


4 ● くいっぱ
●18ポイント

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

STRANGE SPACE (奇妙空間)

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

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

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

タグに対するスタイル>

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

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

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

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


5 ● ogrenavi
●18ポイント

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

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

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

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

http://deztec.jp/site/tips/page/p0045.html

http://www.cybergarden.net/webcss/efficient.html

◎質問者からの返答

ありがとうございます。

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

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


1-5件表示/6件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ