CSSのフォント設定・指示で、複数のフォント指示IDを組み合わせたIDがつくれないでしょうか？

CSSですが、フォント記述が面倒で困っております。
記述したものを組み合わせる宣言をして、XHTMLマークアップの方ではその組み合わせ名だけ記述して済むようにできないものでしょうか？
または、他の方法で簡素化合理化できる方法があればそれでも結構です。
ご教授いただけましたら幸いです。

【フォントサイズ11px】フォントサイズだけを指定したID
【フォントサイズ12px】フォントサイズだけを指定したID
【フォントサイズ14px】フォントサイズだけを指定したID

【リンクカラー緑,hover赤(下線:緑)】リンクだけを指定したID
【リンクカラー白,hover緑(下線:白)】リンクだけを指定したID

【フォントカラー黒(薄色背景用)】フォントカラーだけを指定したID
【フォントカラー白(濃色背景用)】フォントカラーだけを指定したID

【使用する組み合わせ宣言1】上記IDのどれとどれを組み合わせたかを指定したID
【使用する組み合わせ宣言2】上記IDのどれとどれを組み合わせたかを指定したID

というようにして、XHTMLマークアップの方では、例えばテーブルに文章を記述したいなら、テーブルタグに上記の【使用する組み合わせ宣言】のID名だけを記述すればそれでOK、というようにできれば楽になると思うのです。
もっといいのは、CSSで【使用する組み合わせ宣言】のIDは記述必要なく、XHMLの方で組み合わせ宣言できれば最高です。
実際を例に出すと、

------------------------------------------------------------
/* リンク以外のフォント設定 */
------------------------------------------------------------
#font_black {
text-align:left;
color: #FFFFFF;
font-size: 11px;
line-height: 120%;
}

------------------------------------------------------------
/* リンク部分だけのフォント設定 */
------------------------------------------------------------
#font_link_green a:link {
color: #d0ae22;
text-decoration: none;
border-bottom: 1px solid #d0ae22;
}

#font_link_green a:visited {
color: #d0ae22;
text-decoration: none;
border-bottom: 1px solid #d0ae22;
}

#font_link_green a:active {
color: #ff0066;
text-decoration: none;
border-bottom: 1px solid #d0ae22;
margin-bottom: 0px;
}

#font_link_green a:hover {
color: #fde582;
text-decoration: none;
border-bottom: 0px;
}

とCSSで記述しておき、XHTMLの方では、

<table class="#font_black .font_link_green">



などと記載するような(この書き方はあくまで例です)感じです。

このように、CSSのフォント記述において、何か簡素化・合理化する記述方法はないものでしょうか？
普通にやっていたらソースは増えるし色の変更などであちこち書き直す必要があるしで(置換不能なケースもありますし)面倒この上ないですね。
宜しくお願い致します。

No.7 ベストアンサー 回答者： abril 回答日時： 2008/03/31 13:48

> それとも自分のこの喜びで喜ぶ場合じゃないもっと合理的な方法があるのかな・・・・^^;

以下はまた余計な説明の1つです。

.hoge1 {
font-size: 11px;
}
.hoge2 {
color: #cc0000;
}
.hoge3 {
border: solid 1px #000000;
}
<p class="hoge1">この段落は文字が小さい</p>
<p class="hoge1 hoge2">この段落は文字が小さくて赤い</p>
<p class="hoge1 hoge2 hoge3">この段落は文字が小さくて赤くボーダーで囲まれている</p>

上記の様な仕様で設計してしまう事は、合理的ではないというか、コンテンツ自体の整合性が低く論理性が薄れる、といった方が良いかもしれません。こういう考え方は言ってしまえば、CSS導入以前にfontタグなどの拡張属性を使用してその場その場で装飾的要素を付加していた仕様を「単に（タグの拡張属性を）記号化して実態を外部ファイルにまとめて書いた」というだけの事になります。CSSは「本来は論理構造のみであった筈のHTML文書に拡張して付加してしまった装飾的要素を取り払い、別物として一括管理する」という様な概念に基づいています。そういう意味では勿論、上記の様な使用法自体は間違いではなく、ケースバイケースでは有用（必然性がある）となる事もあります。
しかし、これではCSSでの定義が装飾そのものに特化しており、論理的な意味を第一とした定義になっていません。ANo.2で回答した「名前」の付け方、ということと関連してきますが、HTML側の論理構造が適切でなければいけないのと同様に、CSSもまた論理的に装飾要素が構成されている事が望ましいのです。何故か？装飾要素は字面の通り「装飾」でしかなく、そのもの自体に「意味」はなく、その実態は常に流動的（デザインが変更されたら併せて変更を余儀なくされる）だからです。上記の様な使用法は結局「装飾」という面を主体とした使用法であり、HTML側の構造が「装飾」に左右される存在になっています。例えば、<p class="hoge1">としていた段落にもやはり「赤い」という装飾も追加したい、となった時にはHTML側も<p class="hoge1 hoge2">と修正しなければなりません。

これに対して、下記の様な仕様であったとします。

.notes {
font-size: 11px;
}
.notes_attention {
font-size: 11px;
color: #cc0000;
}
.notes_special {
font-size: 11px;
color: #cc0000;
border: solid 1px #000000;
}
<p class="notes">この段落は「備考」である（故に文字が小さいという装飾性を与える）</p>
<p class="notes_attention">この段落は「注記」である（故に文字が小さくて赤いという装飾性を与える）</p>
<p class="notes_special">この段落は「特に注目してもらいたいお知らせ」である（故に文字が小さく赤く段落がボーダーで囲まれている）</p>

こういう考え方であれば、CSSのclassの定義自体がHTML側での論理構造と合致している為、例え「装飾性」がどの様に変わろうともHTML側は修正の必要がありません。コーダーは、CSSを有効に利用・管理、進行過程でのデザイン変更の可能性も予め頭に置き、とにかくメンテナンスを合理的に行う為に、デザインを見た段階でまず「的確なHTMLのマークアップ」をする為の論理的意味を各要素のレイアウトやスタイルに対して関連づけて行くところから始めます。

この考え方は、くしくも質問者様の仰っていた

> ただ、一番良いのは、XHTMLのclassで複数のclassセレクタを記述するのではなく、
> これすらもCSSでグループ名でもつけれたら最高ですが。
> これがもしできれば、もしも複数のclassのうちひとつ別のclassと差し替える必要が出たとき(そのclassを記述し直しすればいい気もするので> 本当にこんな事象があるのかわかりませんが)、CSSのグループ登録箇所だけ直せば良いのでラクチンです。

を実装しているものであり、

> これができないと、XHTML側の全ての記述を書き直す羽目になります。

まさにその様な「非効率的な手間」を省く事にもなります。質問者様はclassごとでの装飾要素の重複を嫌われて「装飾要素」のパーツごとに分解し、それを組み合わせて使うやり方を選ばれてしまったわけですが、 個々の装飾要素が各「論理的意味付けのあるセレクタ」において重複している事自体は、CSSとして何の問題もないのです。

> こんなにやりやすいのに、なんで大企業サイトでclass="hoge1 hoge2"という記述を見た記憶がないんだろう・・・
> たまたま見たサイトだけのことなんだろうか・・・・・

それはつまり、残念ながら多くの(CSSを的確に導入しているサイトに限ります。企業であってもお粗末な構成のところは少なくないですから）サイト制作者にとっては、その様な仕様は「やりやすく」はない、ということになるかと。巨大なコンテンツを抱えるサイトほど、その様な効率の悪い構成にはしないでしょう。

しかしながら、質問者様が
> それはそれとして、兎に角現状でもとっても満足です！
であり、ご本人にとってそれが一番やりやすいという事でしたら、それは勿論個人の自由ですので。

それから、質問者様はCSSのシンタックスの理解がまだまだ不足しておられる様です。今回は目先の納期の問題もあり、時間がないのかもしれませんがせめて次のお仕事までにはじっくりと学ばれて正しい知識を身に付けておくべきでしょう。相手が素人さんや趣味のサイトを制作しているなら自由に勝手にやって下さい、とスルーするところですが、この仕事でお金をもらう以上、現在の様な「うろ覚え」の知識でCSSを使う事は許されないと思いますよ。
このスレッドや他のスレッドでのコメントを拝見してきた率直な感想として言わせて頂きましたので、悪しからず。

この回答へのお礼

色々と教えていただいてありがとうございますm(_ _)m
あまりにも何度も書いてもらっていうのでもう申し訳ないです。
今後はスルーしてくださいね！

ご紹介くださったCSSの記述方法は、のちにHTML側の変更が不要なので、CSSだけみると重複箇所があっても、それでもHTMLののちの変更が出ることと比べれば合理的である、と理解しました。
私もその通りだと思いました。ただ、CSSの中でグループ化したidなりclassなりが発行できる機能が欲しいです。このぶんだとその機能はおそらく無いんでしょうね。
パーツごとに記述をしておいて、使いたいパーツを複数選んだclassを発行して、そのclassひとつをHTML側では記述すれば済む、という形になればいいのに、と思いました。

何がともあれありがとうございました

お礼日時：2008/04/03 13:18

No.6 回答者： auty 回答日時： 2008/03/30 14:00

#1 です。

＞＞＞　これはブラウザが最新めのものだけという制限がないでしょうか？

昔からです。


だいぶ整理されてきたようですが、後一言付け加えさせていただきます、

混乱の元は、HTMLとCSSの関係にあるように思われます。
HTMLがあいまいのままCSSの利用ばかりのことを考えられておられるようです。

私の理解が間違っていなければですが（つまり仕様書を確認して言ってるわけではありませんが）今回の件に関して、HTMLのタグについて次のことを理解する必要があります。

・　一つのタグに複数の属性は書けますが、同じ名前の属性を２つ以上書いてはいけません。

・　idという名の属性は、特別な意味・働きを持っており、これはHTMLの中でユニークなもので無ければなりません。（idカードなどをイメージしてみてください。これは、leap_day様も言われているとおりです。）

・　このユニークというのは、一つのタグの中はもちろん、別の異なるタグでも使ってはいけないということです。つまり、HMTL毎に「ただ１つ」でなければならないということです。

HTMLに関してのこうした決まりを、CSSで利用しているだけです。
したがって、このid属性を利用して、CSSを適用する場合、その対象は HTMLの1箇所のみとなることを十分理解すればよいと思います。

残念ながらブラウザは、同じidを２箇所以上使ってもエラーとして教えてくれないので困惑するところでもあります。

この回答への補足

【お礼を書いた後に、実際にclass="hoge1 hoge2"とやってみました】

ありがとうございます！
実際にやってみました。
結果、バッチリです！

フォント関連の記述を機能によって分けてパーツ化できました。
そして、class複数指示が可能なことにより、必要なものを複数チョイスしてXHTMLに記述する、最高です！
これでCSS内の重複・冗長も防げます。

ただ、一番良いのは、XHTMLのclassで複数のclassセレクタを記述するのではなく、
これすらもCSSでグループ名でもつけれたら最高ですが。
これがもしできれば、もしも複数のclassのうちひとつ別のclassと差し替える必要が出たとき(そのclassを記述し直しすればいい気もするので本当にこんな事象があるのかわかりませんが)、CSSのグループ登録箇所だけ直せば良いのでラクチンです。
これができないと、XHTML側の全ての記述を書き直す羽目になります。


それはそれとして、兎に角現状でもとっても満足です！
こんなにやりやすいのに、なんで大企業サイトでclass="hoge1 hoge2"という記述を見た記憶がないんだろう・・・
たまたま見たサイトだけのことなんだろうか・・・・・
それとも自分のこの喜びで喜ぶ場合じゃないもっと合理的な方法があるのかな・・・・^^;

何度もありがとうございました。

補足日時：2008/03/30 15:43

この回答へのお礼

またもありがとうございますm(_ _)m

> ・　一つのタグに複数の属性は書けますが、同じ名前の属性を２つ以上書いてはいけません。

ああ、これは当然だと思います。ひとつのタグに同じ名前の属性を入れる意味がないですよね。
同じ指示を繰り返すという間違いは作業時に思いつかないのでこれは大丈夫です。


> ・　idという名の属性は、特別な意味・働きを持っており、これはHTMLの中で
> ユニークなもので無ければなりません。
> （idカードなどをイメージしてみてください。これは、leap_day様も言われているとおりです。）

はい、これもこれまでの回答で理解しました。


> ・　このユニークというのは、一つのタグの中はもちろん、別の異なるタグでも
> 使ってはいけないということです。つまり、HMTL毎に「ただ１つ」でなければならないということです。

はい、これも過去回答で既に理解しました。



> HTMLに関してのこうした決まりを、CSSで利用しているだけです。

はい、これはもとより理解しています。


> したがって、このid属性を利用して、CSSを適用する場合、その対象は
> HTMLの1箇所のみとなることを十分理解すればよいと思います。

はい、id属性の決まりとして、ひとつのHTMLファイルの中に同じid属性を繰り返して
使用することはできない、ということですよね。
これは以前からそのように思っております。二回以上使ったことはありません。


> 残念ながらブラウザは、同じidを２箇所以上使ってもエラーとして教えてくれないので
> 困惑するところでもあります。

このことは、id属性だけにとどまらず色んなことでありますね。
全くもってその通りだと思います。

繰り返しありがとうございますm(_ _)m

お礼日時：2008/03/30 14:55

No.5 回答者： abril 回答日時： 2008/03/30 12:27

かなりidとclassの区別／理解が混乱しておられた様ですね。

CSSのidとclassの概念は、昔から変わってないですよ。
※idとclassは力関係においても違いますので、定義が対立する時にはセレクタの振り分けを工夫するなどの注意が必要です。

> 企業サイトでCSS化済んだサイトをみていてもIDばかりじゃないか。

そうですか？むしろ逆のパターン（idを全く使用せずclassで全部定義）ならCSS導入し始めの昔、少なくなかった様な気がしますが（CSSのシンタックスに慣れない内はidよりclassの方が重複して使えるなど、とっつきやすいから、という理由だったかもしれません）。
たまたま質問者様がお手本にしたサイトが不幸にして偏っていたのでしょうね。

> これはブラウザが最新めのものだけという制限がないでしょうか？
> 例えばIE7、Firefox2だけとか。
> これは昔からできたんでしょうか？　たまたまかもしれませんが大手企業サイトをみていてもこのような記述を見たことがない気がしていまし> て。

いえ、かなり昔から対応してます。できなかったのはNN4.7ぐらいでしたから、もうかなり前の話です。
質問者様の参考にされた「大手企業サイト」がその様な使用をしていない理由は（正確なところは勿論わかりかねますが）、「複数ごちゃごちゃとclassを指定しないでも済む」様なデザインで予め設計してあるからだと思います。つまり、　HTML側の論理構造を考慮しながら汎用性の高い（あちこちに例外処理を作らない）テンプレートとして徹底させるという事ですね。

この回答への補足

【お礼欄書き込みの続き(お礼欄のあとにお読みください)】

>> これはブラウザが最新めのものだけという制限がないでしょうか？
>> 例えばIE7、Firefox2だけとか。
>> これは昔からできたんでしょうか？　たまたまかもしれませんが大手企業サイトを
>> みていてもこのような記述を見たことがない気がしていまし> て。

> いえ、かなり昔から対応してます。できなかったのはNN4.7ぐらいでしたから、もうかなり前の話です。

おお、そうでしたか！
それは良い！


> 質問者様の参考にされた「大手企業サイト」がその様な使用をしていない理由は
> （正確なところは勿論わかりかねますが）、「複数ごちゃごちゃとclassを指定しないでも済む」様な
> デザインで予め設計してあるからだと思います。つまり、　HTML側の論理構造を
> 考慮しながら汎用性の高い（あちこちに例外処理を作らない）テンプレートとして徹底させるという事ですね。

アレ？
もしかして私が結論づけた方法は合理的でないかも？？

私は、皆さんのこれまでの教えでたどりついたフォントに関する合理的な記述方法は
以下のように思っておりました。

【本文の通常メインで利用するフォント記述】
[1] フォントサイズのclass(例：.fntsize12)
[2] リンク絡みのclass(例：.lnk-honbun)
[3] それ以外のフォント関連のclass(例：honbun)

に分けてclassセレクタをつくり、XHTMLマークアップで
「class="fntsize12 honbun lnk-honbun"」
と記述するようにする。

また、「※」で文章を補足する小さい文字の場合なら

【本文を補足するときのフォント記述】
[1] フォントサイズのclass(例：.fntsize11)
[2] リンク絡みのclass(上の[2] を使えるのでここは不要)
[3] それ以外のフォント関連のclass(上の[3] を使えるのでここも不要)

XHTMLマークアップでは
「class="fntsize11 honbun lnk-honbun"」
と記述すれば良い。

このようにすれば、上記の【本文を補足するときのフォント記述】の
[2] と[3] が不要になるので自分としてはこれまでよりも効率だと思っていたのですが、
貴方様の書き込みを拝見しておりますと、私はもしかして大きな考え違いがあるような・・・

補足日時：2008/03/30 13:11

この回答へのお礼

本当にありがとうございます。
何度も、しかも非常に質が高くそれでいてわかりやすい、
そして親切な書き方を毎回していただきまして。

> かなりidとclassの区別／理解が混乱しておられた様ですね。
>CSSのidとclassの概念は、昔から変わってないですよ。
>※idとclassは力関係においても違いますので、定義が対立する時には
>セレクタの振り分けを工夫するなどの注意が必要です。

ハイ、^^;
全くもっておっしゃる通りで、混乱していました。
セレクタの振り分けについては調べなくてはならないなと思っております。


>> 企業サイトでCSS化済んだサイトをみていてもIDばかりじゃないか。

>そうですか？むしろ逆のパターン（idを全く使用せずclassで全部定義）なら
>CSS導入し始めの昔、少なくなかった様な気がしますが（CSSのシンタックスに
>慣れない内はidよりclassの方が重複して使えるなど、とっつきやすいから、
>という理由だったかもしれません）。
>たまたま質問者様がお手本にしたサイトが不幸にして偏っていたのでしょうね。

ああ、済みません、私の言葉足らずです。
bodyタグ直後から<div id="container">とはじまる、
いわゆるブログのSEOの強さをHTMLサイトに取り入れだした当初、という
意味で書いておりました。
その時に「おお、HTMLサイトもMainFrameをTableで制作するのをやめて、とうとうMainFrameをCSSで制作する時代に突入したか、何何？<div id="">だらけだな。class使わないのか？。そうかTableをはずすと、メインに記述する配置的なものは<div id="hoge">で記述しまくるのか！」
などと思ったわけです^^。

おっしゃるとおり、これよりももっと前のMainFrameがTable制作の時代は(黎明期を除く)、
本文フォントサイズを見栄えよく小さめに(12px程度とかに)、かつ、合理的にできるCSSが
Tableタグ、tdタグを中心にclass指定で入れられていましたよね。
このことを想起させてしまったようですね。失礼いたしました。

お礼日時：2008/03/30 13:11

No.4 回答者： goldfox 回答日時： 2008/03/30 09:39

一つの要素に、複数のIDでスタイルシートを指定する、という考え方がダメなのです。

IDの付いた要素に、スタイルシートで指定する、と考えれば、一つの要素に複数のIDを使うことはありません。

.a1{color:#ff0000}
.a2{background-color:#ffffaa}
.a3{border-bottom:1px solid #0000ff}
<span class="a1">その１</span>　
<span class="a2">その２</span>　
<span class="a3">その３</span>　
<span class="a1 a2 a3">その４</span>

この回答へのお礼

どうもありがとうございます。

ですが済みません、文章の意味がわかりません申し訳ありません。
内容がわかりたいです。


>一つの要素に、複数のIDでスタイルシートを指定する、という考え方がダメなのです。

これは要は、
#hoge1
#hoge2
#hoge3

というようにid宣言となる記述をしており、class宣言記述をしていないからXHTML側でclass=""の中に複数の記述が出来ないのだ、
という、他の方の回答と同じことを再度書かれているのでしょうか？
.hoge1
.hoge2
.hoge3
と書くんだよ、と。
この理解であっているならば、はい、得心しました。



>IDの付いた要素に、スタイルシートで指定する、と考えれば、
>一つの要素に複数のIDを使うことはありません。

これはちょっとわかりませんでした。



> .a1{color:#ff0000}
> .a2{background-color:#ffffaa}
> .a3{border-bottom:1px solid #0000ff}
> <span class="a1">その１</span>　
> <span class="a2">その２</span>　
> <span class="a3">その３</span>　
> <span class="a1 a2 a3">その４</span>

これは、要はこのように書いたら良いよ、ということでしょうか。
私は、皆さんのこれまでの教えでたどりついたフォントに関する記述方法としては、

【本文の通常メインで利用するフォント記述】
[1] フォントサイズのclass(例：.fntsize12)
[2] リンク絡みのclass(例：.lnk-honbun)
[3] それ以外のフォント関連のclass(例：honbun)

に分けてclassセレクタをつくり、XHTMLマークアップで
「class="fntsize12 honbun lnk-honbun"」
と記述するようにしようかと思っております。

また、「※」で文章を補足する小さい文字の場合なら

【本文を補足するときのフォント記述】
[1] フォントサイズのclass(例：.fntsize11)
[2] リンク絡みのclass(上の[2] を使えるのでここは不要)
[3] それ以外のフォント関連のclass(上の[3] を使えるのでここも不要)

XHTMLマークアップでは
「class="fntsize11 honbun lnk-honbun"」
と記述すれば良い、と思っております。

このようにすれば、上記の【本文を補足するときのフォント記述】の
[2] と[3] が不要になるので自分としてはこれまでよりも効率だと思っていますが、まだ非効率な考え方でしょうか？
もっともっと効率化できるのならば飛びつきたい心境であります

お礼日時：2008/03/30 12:18

No.3 回答者： leap_day 回答日時： 2008/03/30 02:31

こんにちは

idが一つだけ、classが複数使うことができます

言うなれば『id』が『人の名前』(同姓同名の場合もありますけど）その人だけを指しますよね？
『class』が『性別など』(男性だとか女性だとかそういった感じです)

でid,classでスタイルシートの書き方が違って
idが(id="sample")
#sample { }
classが(class="sample")
.sample { }
となります

なので質問に書いてあるのは全てidに対してのスタイルシートになっています
(classに対しての指定をしていないのでclass指定しても何も指定していないのと同じなので変化がありません)

『 # 』を『 . 』に変更すれば
class="fnt09 fnt-clr-grn fnt-link-red"でスタイルシートが反映されます

要はそのページでその部分だけ指定するときに『id』を使用し、何度も別の場所で使用するときには『class』を使用します

この回答への補足

【すみません、お礼欄の文字数制限があったので続きをこちらへ記載】


>要はそのページでその部分だけ指定するときに『id』を使用し、
>何度も別の場所で使用するときには『class』を使用します

この説明も今ならよくわかります。例えば、GlobalNavigationならば、他の箇所で使用するはずがありませんものね。他の箇所で使用するしないというのを誤解していたようです。
GlobalNavigationのidは他のページどこでも使われているから、
「他の箇所で使用する」じゃないか。
と思っていたのでしょう。「そのページにおいて」他の箇所で使用しない、という意味だったんですね。


ひとつだけもしよろしければ伺いたいのですが、

>『 # 』を『 . 』に変更すれば
>class="fnt09 fnt-clr-grn fnt-link-red"でスタイルシートが反映されます

これはブラウザが最新めのものだけという制限がないでしょうか？
例えばIE7、Firefox2だけとか。
これは昔からできたんでしょうか？　たまたまかもしれませんが大手企業サイトをみていてもこのような記述を見たことがない気がしていまして。
恐らく的外れなんだとは思うのですが。

兎に角、貴方様にも本当にお世話になっております。
ありがたく思っております。
これでベースのHTMLファイルがかなり確定的になれたので、
他のページへの反映したあとの変更が、今後はミドルエリア(中段のコンテンツエリア)の
幅が3pxほどオーバーした箇所の修繕の一回で済みそうな感触を持ちました。

補足日時：2008/03/30 11:53

この回答へのお礼

いつもお世話になっておりますm(_ _)m

>idが一つだけ、classが複数使うことができます

そうですね。書き込んだ後にネットサーフしていてどこでもそう書いてあるので、自分の理解というのが何がどうなっていたのかよく思い出してみました。で、わかりました。
最初にCSSを本で読書した昔、classは何度でも使えると本に書いてありましたが、「セレクタで記述したCSSは他に同じものがあったらダメじゃないか。classは使うことないな。IDだけでいいじゃないか。企業サイトでCSS化済んだサイトをみていてもIDばかりじゃないか。classは考えずにいいぞ」と当時思って、それでclassのことがよくわからない今、当面はIDだけでいこうと思いをはせたのだと思います。


>言うなれば『id』が『人の名前』(同姓同名の場合もありますけど）
>その人だけを指しますよね？
>『class』が『性別など』(男性だとか女性だとかそういった感じです)

なんというわかりやすい説明でしょうか。このように言われたなら一発でわかってしまいます。


> でid,classでスタイルシートの書き方が違ってidが(id="sample")
>#sample { }
>classが(class="sample")
>.sample { }
>となります

なるほど！
これまた一発で理解できました！
例えば、XHTMLマークアップするとき、TableやtdタグにCSSを入れるときは、Table時代からやっていたことと同じで、class="hoge"と入れればいいわけですね。
それにはCSSではこれまた昔と同じで.class名と記述すれば良いと。
Table時代からCSSを文字の記述で使ってはいましたが、それから比べてCSSは記述ルールが全く変わった別物になったのだと思っていたので、誤解していました。

あちこちネットサーフしていて、CSSのTipsテーマのサイトはあちこちにあるのですが、結構サイトによって書いてあることが違っていて困るところです。いったいどれが本当の情報なのか・・・
評価が高いCSS Tipsサイトがどれなのか自分が知っていればいいのですが。



>なので質問に書いてあるのは全てidに対してのスタイルシートになっています
>(classに対しての指定をしていないのでclass指定しても何も指定していないのと同じなので変化がありません)

ということですよね！
classとしてセレクタしていないので、いくらXHTML側でclass記述しても使えないわけですネ^^;

お礼日時：2008/03/30 11:53

No.2 回答者： abril 回答日時： 2008/03/29 20:45

id属性はHTML側の1つのタグに複数指定することはできません。

ANo.1の回答者様のアドバイス通り、classセレクタの使用でご希望のことは実現できるのでは。
※もしかして…idセレクタしか使用していないわけではないですよね？

またしても余計な事を言う様ですが、idやclass名に、その要素の装飾そのもの的意味を持たせた名前を付けることはあまりお奨めできません…例えば、"#font_link_green"という名前は、多分「緑色のリンク」的ニュアンスかと思いますが、では途中でカラーリングの変更があったらどうなるでしょう？その箇所が、緑ではなく赤色のリンクになってしまったら？クラス名の意味するところと実態が合わない、というちぐはぐな現象が起きてしまいます。また、それを避ける為にスタイルが変更する度にいちいちid/class名を修正していたらそれは本末転倒な煩雑さですし。なので、id/class名には、できるだけ論理構造的意味を表す名前を付ける方が望ましいです。つまり、文字色を赤くするから「赤色」という名を付けるのではなく、文字色を赤くするのはそこを強調したいという論理的意味故なのだから「強調色」という名前を与える、といった考え方です。こういうネーミングをしておけば、仮にデザイン変更で赤が青に変わってしまったとしても、「強調する為に色を変える」という意味は変わりませんので、CSS上のプロパティを変更するだけで、id/class名自体は左右されないで済みます。

この回答への補足

セレクタの名称のつけ方、その通りですよね。
ただ、本件の場合、色の系統は完全に決定されているので、変更あると
すれば微細な変更になるので、あえて6桁のWebカラーでは色がわかりにくいので
ぱっとみてわかりやすい色名称にしておりました。
しかしおっしゃることはごもっともだと思います。
いい話を教えてもらっております。

補足日時：2008/03/29 21:41

この回答へのお礼

またもありがとうございます！m(_ _)m

>※もしかして…idセレクタしか使用していないわけではないですよね？

そうなんです、idセレクタしか使用していないんです。
セレクタの使い方は色々とあるようですが、最低限でまずページをつくることが優先ですので(業務納期的に)、あえて深く入っていない状況です。


>id属性はHTML側の1つのタグに複数指定することはできません。

ひとつしかできないと思っていましたが、もしかしたら逆に、
class属性は複数指定できるということなんでしょうね。
ただ、だいぶ前に最初にCSSの本を読んだとき、class属性はひとつしか記述できないとか、何かこう、全然使えないような感想を持って、
逆に、id属性は何度でも使用できる、と書いてあったので、
「ならば全部<div id="hoge">で書けばいいじゃないか。classのことは覚えずに結構」
と思っていたんです。

ん？　でもTableタグのときの昔から、tableタグやtdタグに、ひとつのHTMLページにいくつでもclass="hoge"と記述していたなぁ・・・
済みません、ちょっとidとclassの使い分けがわかりません。
ネットサーフ＆本を見てみます・・・・・


>ANo.1の回答者様のアドバイス通り、classセレクタの使用でご希望のことは実現できるのでは。

やってみたけれどもダメでした。
<table class="fnt09 fnt-clr-grn fnt-link-red">
と記述したテーブルタグの中の文章は適用されませんでした。
やり方が何かこう違うんでしょうかね・・・

お礼日時：2008/03/29 21:37

No.1 回答者： auty 回答日時： 2008/03/29 19:24

タグのクラス属性（class）には、複数のCSSクラスを指定することが出来ます。

CSSで定義されたセレクタを

.class1
.class2
.class3

とすると、半角スペースで区切って

class="class1 class2 class3"

と指定する方法があるのでこれが利用できないでしょうか。

この回答への補足

idとclassの使い方を逆に記憶していたのかな・・・
今、ネットサーフしていると、

* 「id」は1ページ内で同じ名前を1回しか使用できない。
* 「class」は1ページ内で同じ名前を何度も使用できる。

ととあるサイトに書かれていました。
何で逆に思っていたんだろう？？
でも、以前TableをやめてはじめてつくったCSSでのサイトは<div id="">だらけで、逆に<div class="">という記述はひとつもないです。
おっかしいなぁ・・・・

脱線済みません・・・

補足日時：2008/03/29 21:51

この回答へのお礼

早々にありがとうございます。

しかし、やってみたけれどもダメでした。
<table class="fnt09 fnt-clr-grn fnt-link-red">
と記述したテーブルタグの中の文章は適用されませんでした。
やり方が何かこう違うんでしょうかね・・・

お礼日時：2008/03/29 21:39