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;
}
お力をお貸し下さい。
No.3ベストアンサー
- 回答日時:
★そもそも<LI>タグで<H2>タグを使っているのが間違いかもね。
・どうして<H2>タグなの?→<LI>タグにいろいろと記述すればよいのでは?
下に2つの解決策を載せます。どうぞ。
解決策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>
・以上です。これで一様、文字は小さくなりました。→私の環境での結果論!
この回答への補足
あ、上記のサンプルでは、h2になっておりました。
<li><h2>は確かに変ですね。
実際のソースでは、<h3>と指定しております。
私の勘違いでした、申し訳ありません。
<h2>カテゴリ</h2>
<ul>
<li><h3>カテゴリ名</h3></li>
</ul>
は、(X)HTMLのマークアップ記述では間違ってはいないと思うのですが、
中見出し→小見出し。。。やっぱりダメな方向なんでしょうか?
カテゴリ中のカテゴリ名なんで。微妙かな。
上記の方法でも、無事解決することが出来ました。
ありがとうございました。
No.4
- 回答日時:
> これで一様、文字は小さくなりました。
時折見かける誤りですが、「一様」ではなくて「一応(いちおう)」です。
# 他には、「いちよ」なんて書いている人を見かけたこともあります。
No.2
- 回答日時:
こんにちは
他の場所に<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" />
ご回答ありがとうございます。
説明不足で申し訳ありません。
当方、XHTML1.0、Transitionalでマークアップ記述をしているので、
</li>は必要となっており、記述しております。
上記の方法で再度やってみると出来ました。
ありがとうございました!
No.1
- 回答日時:
★最初に</H2>がありません。
・あと</LI>は必要ないのでは?
・<UL>の方に ID を付けてみたらどうかな。→<DIV></DIV>は必要なくなるよ。
●xxx.html
<UL id="box-cat">
<LI><H2>カテゴリ名</H2>
<LI><H2>カテゴリ名</H2>
</UL>
・『xxx.css』は問題ないと思うよ。
・以上。おわり。
大先生ありがとうございます。
あ、</li>は急いで書いて忘れていました。
マークアップにはミスはありません。
なるほど。ulにidを指定するのですか。
やってみましたが、やはりムリでした。(チクショー;
さすがに、h2 calss="" は不格好なので
それ以外の方法でないのでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<ul>~</ul>が二つ続くと間に改...
-
どうしてもエラーが解決できま...
-
css 横並びのナビゲーションバ...
-
ulタグやliタグの中でbrタグ...
-
HTMLで組織図を作成する方法
-
リストの数字のフォントサイズ...
-
アコーディオンメニューがかく...
-
divタグ内のコンテンツが重なっ...
-
複数行にまたがる括弧を表示し...
-
<li>で改行する横並びのメニュー
-
HTML5のfooterに見出しを付けて...
-
「CSS」リストの2段組どのよう...
-
html <ul></ul>の並びで一行空...
-
ポップアップメニューを表のよ...
-
リストが途中で切れていても背...
-
html/cssの、navを2段にする...
-
ブログのメニュー設定時にテン...
-
li 長さ指定
-
Listの中に<br>を入れてはダメ...
-
正規表記について「除く」の表...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
divタグ内のコンテンツが重なっ...
-
<ul><li></li></ul>にするメリ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
リンク文字同士の間隔を開ける...
-
<ul>~</ul>が二つ続くと間に改...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
display:table;を多段表示させたい
-
ボタンを横に並べて表示させる方法
-
html <li>の中の文字一部に色を...
-
CSS質問:大手サイトを見ると何...
-
html <ul></ul>の並びで一行空...
-
Tableの1セル内に画像・テキス...
おすすめ情報