※ ChatGPTを利用し、要約された質問です(原文:CSSのID属性の利用の仕方について)
CSSのID属性の利用の仕方について
このQ&Aのポイント
CSSのID属性を利用する方法について悩んでいます。
現在行っているCSSの設定方法で問題が起こる可能性はあるのでしょうか?
他のブラウザではどのように表示されるかも確認したいです。
CSSで下記のような利用の仕方は今後のブラウザ上で問題が発生する可能性はあるでしょうか?ID属性は、1つの文章で1度だけ適用する場合に利用するのは知っているのですが、その概念が明確にわかっていなくて迷っています。
【前提】DIVタグ(ID)で下記のような領域を設定しています。
#ryouiki01(一番大きな領域→ここでは便宜上「領域01」とします)
#ryouiki02(#ryouiki01の中に設定した領域→ここでは便宜上「領域02」とします)
#ryouiki03(#ryouiki02の中に設定した領域→ここでは便宜上「領域03」とします)
【現在行っているCSSの設定】
"#ryouiki01 #ryouiki02 h1" →左記の設定で「領域02」内のh1タグにスタイル(青文字)を指定しています。
"#ryouiki01 #ryouiki02 #ryouiki03 h1" →左記の設定で「領域02」内に作られたさらに小さい領域である「領域03」内のh1タグにスタイル(赤文字)を指定しています。
【質問点】
IE06以降では上記のような指定の仕方をしてもまったく問題なく表示されます。今回の例ですと、「領域02」内のh1は青文字で、「領域03」内のh1は赤文字で表示されます。単純に考えると、「領域03」内のh1タグは、「領域02」でのスタイル指示と「領域03」でのスタイル指示がダブっていることになり、直近の指示である「領域03」の指示が最終的に適用されているようです。
この運用の仕方って「WEB標準」としてはおかしいのでしょうか?
他のブラウザではどのように表示されるか今のところ確認はしていません。
まあ、タイトルタグはh1~h6まであるので全部利用すればよいのですが、すでにh5まで利用していて、残りは予備で取っておきたいのと、タイトル用に別途ID属性を設定してもよいのですが、サイトがだいぶ複雑になってきたので出来るだけIDも増やしたくないという意図から、現在行っているCSSの設定方法で管理できればやりやすいな・・・と思っています。
この「領域03」が含まれるページは、今後もたくさん作る予定なので、最初が肝心だと思っています。素人っぽい質問ですみません。
補足
ありがとうございます。 スタイル設定の上書きは特に問題ないとの事で、少し安心しました。 >見出しをひとつ作るごとにh1,h2,h3と数字を増やしているのでしょうか。 この部分は大丈夫だと思います。 たとえば、h1,h2,h3のタグは、実際に3種類のスタイルがあるから使い分けていて、見出しを作るごとに増やすようなことはしていません。 今作っているホームページが、事情があって見出しの種類が多く、そのためにタイトルタグがたくさん欲しいという状況になっている感じです。 実際のタイトルの種類(スタイル)は20種類くらいあり、ホームページ上の見出しの数だけ単純に数えると数百あるという状態です。 御質問の趣旨は、このような意味ですよね?? まだまだ、CSSは勉強中です。