プロが教える店舗＆オフィスのセキュリティ対策術

html/CSSでBOX内にBOXを作り、その両方に異なる<h2>タグ

解決済

  • 質問者：okimuk2050
  • 質問日時：
  • 回答数：3件

html/CSSでBOX内にBOXを作り、その両方に異なる<h2>タグを設定したい。

具体的には、
--------------------------------------------
#box1{・・・・・・}
#box1 h2{
font-size:14px;
border: solid red 1px;
width: 800px;
}
#box2{・・・・・・}
#box2 h2{
font-size:10px;
border: solid blue 1px;
width: 400px;
}
--------------------------------------------

というCSSがあり、html上ではbox1の中にbox2が入っています。
--------------------------------------------
<div class="box1">
<h2>あああああ</h2>
<div class="box2">
<h2>いいいいい</h2>
</div>
</div>
--------------------------------------------


このとき、CSSの「box1のh2タグの設定」がbox2内のh2タグにおいても反映されてしまいます。
box2内では「box2のh2タグの設定」を反映させたいのですが、どうすればできるのか
教えていただけますでしょうか。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.1ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

リンク先でもないのになぜ無駄なidを指定するのかわかりません。


classはともかく、スタイルシートのためだけのidなんて上書きもしにくいし、あとあとメンテナンスで泣くことになるよ。
詳細度や子孫、兄弟関係をうまく使おう。
下記は子孫セレクタをつかって二つのdivを見分けている。pについては隣接セレクタを使ってる。
idはむろん、classも一切使ってない。

　参考書がまずいみたいですね。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<title>Untitled</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
p{text-indent:1em;margin:0ex 1em;line-height:3ex}
h2{ font-size:2em; border-style:solid;border-width:0px 0px 2px 0px;}
body div h2{color:red;border-color:red;}
body div div h2{color:blue;border-color:blue;}
p+p{background-color:rgb(200,200,200);}
-->
</style>
</head>
<body>
<div>
<h2>あああああ</h2>
<p>ここはbody直下の汎用ブロック<p>
<p>ここは二つ目以降の段落<p>
<p>ここは二つ目以降の段落<p>
<div>
<h2>いいいいい</h2>
<p>ここはdiv内のdiv内のブロック</p>
</div>
</div>
</body>
    • good
    • 0
    • 件
通報する
この回答へのお礼

なるほど。
セレクタの親子関係がうまくいってなかったんですね。
てか、body div div h2{}というふうな使い方は初めて知りました。

ありがとうございます。

通報する
お礼日時：2010/04/25 02:59

No.3

  • 回答者： ORUKA1951
  • 回答日時：

＞body div div h2{}というふうな使い方は初めて知りました。



　これは子孫セレクタと言って、この場合は、単純セレクタ(要素名)の配下にある単純セレクタを次々に指定しています。単純セレクタは詳細度が1ですから、この指定では詳細度が4となり、body div h2{}の詳細度が3ですから、それを上書きします。
　これはCSSの最も重要な部分と言ってもよいでしょう。カスケーディングとは継承という意味。もし、#を使って個別に指定していたら、ちょっと規模の大きいHTMLだと膨大なスタイルを書き連ねばなりません。#はひとつあたり詳細度100ですからね。
　もちろんCSSだけでなく、HTMLも複雑・煩雑になってしまいます。

　セレクタ　詳細度はプロパティを覚えるより先にきちんと覚えておかなきゃ・・・

セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
は仕様書( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )でも、プロパティより先に説明してある。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： naokita
  • 回答日時：

それが、反映されにのは、


CSS側が # ←これはID指定なのに、
HTML側で class になっているから何も効かないはず。
# ＝ ID　. ＝ class　（ここだけの単なるミスかな？）
-----------------------------------
但し、それを修正しても個別に反映こそするが、
box1でbox2に無い要素を指定したらbox2にも反映される。
例えば、CSSで #box1 h2{color:red;} を入れたら両方反映してしまう。

新旧のブラウザで、これを回避するには、
h2に個別の id や class を振る。
知っていると思いますが、
例
<h2 class="box1h2">box1のh2</h2>
<h2 class="box2h2">box2のh2</h2>

h2{ h2共通の指定 }
.box1h2{ box1のh2の個別の指定 }
.box2h2{ box2のh2の個別の指定 }
--------------------------
NO.1さんの方法は綺麗でお手本となりますが、
初心者が使うと修正が大変なので、最初は個別指定が良いと思います。
最後に、
共通するCSSは共通させて、
纏めれる要素は纏めて最適化する。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報