こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

「CSSで1つの要素に複数のクラスを指定する」に対応したブラウザは?

恥ずかしながら、最近ようやく『同一idは一つのページ内で複数用いるべきではない』の意図するところが分かってきました。これまで、この事を理解していなかったがために、

aaa ←文字色:青、背景色:黄
bbb ←文字色:緑、背景色:黄
ccc ←文字色:青、背景色:赤
ddd ←文字色:緑、背景色:赤

といった表現を実現するために、

---CSSファイル内の記述---
.blue{color:blue;}
.green{color:green;}
#bg_yellow{background-color:yellow;}
#bg_red{background-color:red;}

---HTMLファイル内の記述----
<div class="blue" id="bg_yellow">aaa</div>
<div class="green" id="bg_yellow">bbb</div>
<div class="blue" id="bg_red">ccc</div>
<div class="green" id="bg_red">ddd</div>

というようなソースをよく書いておりました。この場合、idの意味を理解して、解決するには、例えば下の3通りの方法があるように思います。

(1)IDを4つ作成し、1つずつ適用する
---CSSファイル内の記述---
#blue_bg_yellow{color:blue;background-color:yellow;}
#green_bg_yellow{color:green;background-color:yellow;}
#blue_bg_red{color:blue;background-color:red;}
#green_bg_red{color:green;background-color:red;}

---HTMLファイル内の記述----
<div id="blue_bg_yellow">aaa</div>
<div id="green_bg_yellow">bbb</div>
<div id="blue_bg_red">ccc</div>
<div id="green_bg_red">ddd</div>

(2)クラスを4つ作成し、1つずつ適用する
---CSSファイル内の記述---
(1)の『#』を『.』にする

---HTMLファイル内の記述----
(1)の『id』を『class』にする

(3)クラスを4つ作成し、2つずつ適用する
---CSSファイル内の記述---
.blue{color:blue;}
.green{color:green;}
.bg_yellow{background-color:yellow;}
.bg_red{background-color:red;}

---HTMLファイル内の記述----
<div class="blue bg_yellow">aaa</div>
<div class="green bg_yellow">bbb</div>
<div class="blue bg_red">ccc</div>
<div class="green bg_red">ddd</div>

今回の例では、数も少なく、どれでもそれほど変わらない感じですが、この(3)の書き方には、どれほどのブラウザが対応しているのでしょうか?

個人的に使用しております

・Firefox 2.0
・Internet Explorer 6.0

では動作するのですが、それ以外のブラウザでの動作に関してご存知の方は、ぜひ教えて下さい。(特にMacは持っていませんので、Macのブラウザの情報は非常にありがたいです)

ある程度のブラウザで動作するようなら、

.b,strong{font-weight:bold;}
.i,em{font-style:italic;}
.u,ins{text-decoration:underline;}
.s,del{text-decoration:line-through;}
.u_s{text-decoration:underline line-through;}

のように、よく使いそうな表現をまとめたスタイルシートを作ろうかな、などと考えております。打ち消しながら下線引く事なんかはまずないとは思いますが、これは例えばの話です。

長文を最後までお読みいただきありがとうございました。

投稿日時 - 2007-06-24 04:00:07

QNo.3110635

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

一部のJavaScriptのライブラリを使うときに、
スタイルシートが半角スペースで区切っていくつも指定できる、というルールを考慮していないものがありますので、
そういうのを使う場合に不具合が出ます。

スクリプトを使わずにスタイルシートだけなら、たぶん大丈夫だと思います。

> 打ち消しながら下線引く事なんかはまずないとは思いますが
特別な必要がなければ <span class="s u"> でいいと思います。
1文字のクラス名(クラスセレクタ)についてはわかりません。
省略しすぎてわかりにくくなる、ということかも知れませんが。

アンダースコアは使えませんので、
underscorePlusStrikeなど、大文字を混ぜてみてはいかがでしょうか。

投稿日時 - 2007-06-25 01:00:00

ANo.2

#1さんと同意見で、classを複数利用しておりますが問題なし。

後半の .b,strong .i,em .u,ins .u_s
は間違いです。一文字指定もいけません。
「.b」はクラスで? 「strong」は<strong>でそのまま?
何故わざわざclass指定するのでしょうか?

それなら
<p class="bol">クラスで太字</p>
-------------------------
.bol { font-weight:bold }

投稿日時 - 2007-06-24 15:17:20

ANo.1

classを複数書けないブラウザというのは聞いたことがないので、
安心して使って構わないと思いますよ。
(class名にアンダーバー「 _ 」が使えないブラウザはありますが)

なお、あくまで例だとは思いますが、
class="blue i u_s"とか、スタイルを直接連想させる名称はあまりよろしくありません。
http://www.kanzaki.com/docs/html/htminfo17.html#S32
こちらの「クラス名の考え方」という部分。

投稿日時 - 2007-06-24 04:58:07

あなたにオススメの質問