恥ずかしながら、最近ようやく『同一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;}
のように、よく使いそうな表現をまとめたスタイルシートを作ろうかな、などと考えております。打ち消しながら下線引く事なんかはまずないとは思いますが、これは例えばの話です。
長文を最後までお読みいただきありがとうございました。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
一部のJavaScriptのライブラリを使うときに、
スタイルシートが半角スペースで区切っていくつも指定できる、というルールを考慮していないものがありますので、
そういうのを使う場合に不具合が出ます。
スクリプトを使わずにスタイルシートだけなら、たぶん大丈夫だと思います。
> 打ち消しながら下線引く事なんかはまずないとは思いますが
特別な必要がなければ <span class="s u"> でいいと思います。
1文字のクラス名(クラスセレクタ)についてはわかりません。
省略しすぎてわかりにくくなる、ということかも知れませんが。
アンダースコアは使えませんので、
underscorePlusStrikeなど、大文字を混ぜてみてはいかがでしょうか。
No.2
- 回答日時:
#1さんと同意見で、classを複数利用しておりますが問題なし。
後半の .b,strong .i,em .u,ins .u_s
は間違いです。一文字指定もいけません。
「.b」はクラスで? 「strong」は<strong>でそのまま?
何故わざわざclass指定するのでしょうか?
それなら
<p class="bol">クラスで太字</p>
-------------------------
.bol { font-weight:bold }
No.1
- 回答日時:
classを複数書けないブラウザというのは聞いたことがないので、
安心して使って構わないと思いますよ。
(class名にアンダーバー「 _ 」が使えないブラウザはありますが)
なお、あくまで例だとは思いますが、
class="blue i u_s"とか、スタイルを直接連想させる名称はあまりよろしくありません。
http://www.kanzaki.com/docs/html/htminfo17.html# …
こちらの「クラス名の考え方」という部分。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML要素のid/class名の長さに...
-
CSSのクラス名・ID名の指定でワ...
-
サイトにjQueryが使用されてい...
-
最近、HTMLのヘッダーをIDで定...
-
「目次」と「サブ目次」のスタ...
-
子孫セレクタの読み方をおしえ...
-
スタイルシートで複数のlinkパ...
-
CSSに同じclass名がいっぱい‥。...
-
ページの左右の余白(枠外)に...
-
CSSでスクロールバーの色変更
-
CSSで下まで背景色を伸ばす方法
-
webサイト印刷時に特定の画像を...
-
:hoverで他の要素の値を変更で...
-
liリストタグの背景色に色がつ...
-
リンク文字の 一部だけ色を変...
-
idの中のid指定
-
印刷用CSS IEのとき、画像が印...
-
ようこそ と一文字ずついれる...
-
Jimdoで文章中のリンクを張った...
-
htmlの文字が縦書きになる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
brにクラスをつけてcssでdispla...
-
HTML要素のid/class名の長さに...
-
idの中のid指定
-
htmlのid属性って必要なの?
-
サイトにjQueryが使用されてい...
-
CSSのクラス名・ID名の指定でワ...
-
個別にリンクの色を変える方法
-
透過背景を解除するにはどうす...
-
liリストタグの背景色に色がつ...
-
子孫セレクタの読み方をおしえ...
-
CSSに同じclass名がいっぱい‥。...
-
最近、HTMLのヘッダーをIDで定...
-
外部css定義したclassをht...
-
CSS, リンクの色を一部変えるに...
-
リンク文字の 一部だけ色を変...
-
display:table-cell内でこんな...
-
htmlとcssで吹き出しの中に文字...
-
同ページ内でリンクの色を変え...
-
外部スタイルシートで定義した...
-
name属性とid属性
おすすめ情報