質問
質問者：kyanasaki <li><h2>カテゴリ名<h2></li>でh2の文字を小さくしたい
困り度：
  • 困っています
 H2の文字を小さくしたいと考えていますが、
スタイルシートでなかなか再現できません。
下記のように設定していますが間違いがありますでしょうか？

xxx.html
<div id="box-cat">
<ul>
<li><h2>カテゴリ名<h2></li>
<li><h2>カテゴリ名<h2></li>
</ul>
</div>

xxx.css
#box-cat {
width:200px;
}

#box-cat h2 {
font-size:11px;
font-weight:normal;
}


お力をお貸し下さい。
質問投稿日時：07/03/25 14:00
質問番号：2863910
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

良回答20pt
回答者：Oh-Orange ★そもそも<LI>タグで<H2>タグを使っているのが間違いかもね。
・どうして<H2>タグなの？→<LI>タグにいろいろと記述すればよいのでは？
　下に２つの解決策を載せます。どうぞ。

解決策1:
#box-cat H2{
　MARGIN:0em 0em 0em 2em;　←ここがポイント！
　FONT-SIZE:11px;
　FONT-WEIGHT:normal;
}
※『#box-cat』と『xxx.html』はそのままで良い。

解決策2:
#box-cat2 LI{
　FONT-SIZE:11px;
　FONT-WEIGHT:normal;
}
※『#box-cat』はそのままで良い。

●xxx.html
<UL id="box-cat">
<LI>カテゴリ名
<LI>カテゴリ名
</UL>

・以上です。これで一様、文字は小さくなりました。→私の環境での結果論！
種類：回答
どんな人：経験者
自信：参考意見
回答日時：07/03/25 16:09
回答番号：No.3
この回答への補足あ、上記のサンプルでは、h2になっておりました。
<li><h2>は確かに変ですね。
実際のソースでは、<h3>と指定しております。
私の勘違いでした、申し訳ありません。
この回答へのお礼<h2>カテゴリ</h2>
<ul>
<li><h3>カテゴリ名</h3></li>
</ul>
は、(X)HTMLのマークアップ記述では間違ってはいないと思うのですが、
中見出し→小見出し。。。やっぱりダメな方向なんでしょうか？
カテゴリ中のカテゴリ名なんで。微妙かな。

上記の方法でも、無事解決することが出来ました。
ありがとうございました。

回答

良回答10pt
回答者：leap_day こんにちは

他の場所に<h2>がないのであれば・・・

<style type="text/css">
<!--
h2 {
font-size:11px;
font-weight:normal;
}
//-->
</style>

<ul>
<li><h2>カテゴリ名</h2>
<li><h2>カテゴリ名</h2>
</ul>

でいいと思います

他の場所にも<h2>があるのであれば・・・

<style type="text/css">
<!--
.box-cat h2 {
font-size:11px;
font-weight:normal;
}
//-->
</style>

<ul class="box-cat">
<li><h2>カテゴリ名</h2>
<li><h2>カテゴリ名</h2>
</ul>

<h2>カテゴリ名</h2>

とすればO.K.かと思います

<ul id="box-cat">でするなら
.box-cat h2 を #box-cat h2　に（つまりそのままでO.K.)

質問文のでしてもそのままでできてましたけど？(</li>は除いて)

xxx.cssがうまく読み込まれていないのでは？
<link rel="stylesheet" href="xxx.css" type="text/css" />
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：07/03/25 15:54
回答番号：No.2
この回答へのお礼ご回答ありがとうございます。
説明不足で申し訳ありません。
当方、XHTML1.0、Transitionalでマークアップ記述をしているので、
</li>は必要となっており、記述しております。

上記の方法で再度やってみると出来ました。
ありがとうございました！
最新から表示｜回答順に表示｜良回答のみ表示
このページのトップへ