ここから本文です

スタイルシート(css)について質問です

nns********さん

2008/6/2023:57:04

スタイルシート(css)について質問です

基本的なことですみません、お時間のある方お願いします。

下記のようなHTMLファイルを作りました。
<h2>と<h3>に同じ色で下線を引きたいのですが
スタイルシートで同時に設定することは出来ませんか?

=HTML=
<div class="main">
<h2>AAA</h2>
<p>aaa</p>
<h3>BBB</3>
<p>bbb</p>
</div>

=CSS=
.main h2,h3 {
font-size: 110%;
border-bottom: dashed 3px #ffcc00;
padding-left: 5px;
}

上記のような設定は出来なかったのですが、
やはり、<h2> <h3>別々で設定しないといけませんか?

winXP,IE6 です。よろしくお願いいたします。

閲覧数:
983
回答数:
5
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

えどさん

2008/6/2218:09:53

基本的なことはみなさんが言われてる通りと思います。
また、CSSが適用されなかったのはmichelin5556さんが言われているように
単純なHTMLのミスでしょう。(</3>と、hが抜けています)

それと、これは注意点ですが(自分も昔やった・・)

.main h2,h3 { ... }

の部分の指定ですが、質問者さんがやりたいこととして、
mainのDIV内のh2、h3にそれぞれ同じ下線を引く、ということですよね?(違ったらすいません)

しかし、この指定では「mainのクラスのついたDIV内のh2およびh3すべて」という指定になっています。
カンマ区切りの意味は、単純に列挙です。
つまり、

.main h2 { ... }
h3 { ... }

と書いたことと同等となります。(...部分が同じとします)

質問者さんがやりたいことを実現するのは

.main h2 , .main h3 { ... }

と、どちらにも「.main」をつける必要があります。
最初に書かれているものでも動作的には同じように見えますが、
例えば.subというクラス名をつけたDIV内にh3があったとしても
上記のh3のCSSが適用されてしまうことになります。

ですので、カンマを使って同じCSSを適用する際は注意する必要があります。

質問した人からのコメント

2008/6/27 01:36:38

抱きしめる 皆様、たくさんのご回答ありがとうございました。
<h3>の記述間違いは、当然実際のファイルでは間違いはありません。ご指摘ありがとうございます。
今回は、こんな私でも理解ができ、解りやすくご説明いただいた、edo_m18さんに決めさせていただきました。他の皆様の回答も今後の参考にさせていただきます。
本当にいい勉強になりました、ありがとうございました!!

ベストアンサー以外の回答

1〜4件/4件中

並び替え:回答日時の
新しい順
|古い順

mic********さん

2008/6/2123:27:01

正確かつ汎用性のあるCSSの記述は他の方に譲るとして、
見本で示されているHTMLの記述に単純なミスがあります。

=HTML=
<div class="main">
<h2>AAA</h2>
<p>aaa</p>
<h3>BBB</3>
<p>bbb</p>
</div>

<h3>BBB</h3>にすると、両方とも下線が表示されます。(私のXP+IE6でテストしてみました。)

maenet1972さん

編集あり2008/6/2211:42:43

補足:上記お2人の回答者へ
口を挟んで申し訳ありませんが、多分、質問者のやりたい事は
特定の要素"main"に対してのみ、h2とh3に同じ色の下線を引きたいという事だと思います。

=CSS=
.main h2,.main h3 {
font-size: 110%;
border-bottom: dashed 3px #ffcc00;
padding-left: 5px;
}

=HTML=
<div class="main">
<h2>AAA</h2>
<p>aaa</p>
<h3>BBB</h3>
<p>bbb</p>
</div>
<h2>ここのh2は下線が引かれません</h2>
<h3>ここにも下線が引かれません</h3>

zzzさん

2008/6/2100:26:46

まず、class=mainの指定をdivにしている特別な理由はありますか?
もしなければ、見出し要素(h2~3)への修飾なのですから、直接見出し要素にクラス指定しましょう。

また、見出し要素をH2 H3に分ける必要がありますか?
H1とH2..H3.....の違いは、文字の大きさです(H1>H2>H3)
文字の大きさを統一するのならば、どちらもH2でかまわないと思うのですが。
つまり

=HTML=
<div>
<h2>AAA</h2>
<p>aaa</p>
<h2>BBB</h2>
<p>bbb</p>
</div>

=CSS=
h2 {
font-size: 110%;
border-bottom: dashed 3px #ffcc00;
padding-left: 5px;
}

ですね。

また、見出し要素をH2 H3に分ける必要があるというのならば、

=HTML=
<div>
<h2>AAA</h2>
<p>aaa</p>
<h3>BBB</h3>
<p>bbb</p>
</div>

=CSS=
h2.h3{
font-size: 110%;
border-bottom: dashed 3px #ffcc00;
padding-left: 5px;
}

とすれば良いと思います。

bul********さん

編集あり2008/6/2102:11:05

単純にボーダーの色をそろえたいということでしょうか?
それとも、テキストの下線の色をそろえたいということでしょうか?


ボーダーの下線の色を変えるなら、
そのままでもあってますよ。
確認のため、質問者様と同じタグを打ってみたら、
ちゃんと表示されていましたよ。
ちなみに私の環境は質問者様と同じです。
スペルの打ち間違いとかないでしょうか?
一度確認してみてください。


テキストの下線なら、
cssの.main h2,h3のなかにcolorを指定すれば
出来ると思います。

テキストの下線の場合は、
text-decoration:underline;
で下線を引きます。

それで文字を赤くするなら
color:red; (※もちろん#ff0000でもOK)

タグに打ち込むと

=CSS=
.main h2,h3 {
font-size: 110%;
text-decoration:underline;
padding-left: 5px;
color:red;
}

これでテキストに下線が引かれ、なおかつ赤色で表示されます。


追記
私も、見出し要素なら直接指定したほうがいいと思います。
そんなに個別で指定するようなものではないので。

もうひとつ、見出し要素は見出しの優先順位を指定するものであって、文字の大きさを指定する
ものではありません。
ページのタイトルに大見出しのh1、サブメニューにh2を使ったり・・・などです。
ページの内容を章立てするときに使うので、h1のあとにh3が来たりするのは
htmlの構文としてあまり良くないようです。

長文になり申し訳ございません。

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる