ＣＳＳのどの部分を変更するとＨＴＭＬに反映されますか？

質問

無料配布のwebテンプレートをお借りしてＨＰを作成しています
サイドメニュー欄や本文の文字の装飾は結構今までも色々なテンプレートで行ってきましたが
今回お借りしたテンプレではどうしても文字の大きさや太字等の簡単な装飾や<ul>タグにstyle指定し以下の<li>リストの記号が出来ません。
何処を変更すると<font color="****">や<b>や<ul style="***">が反映されるのでしょうか？
cssの記述は
/*ページ全体の指定*/
*{
margin:0;
padding:0;
font:normal normal 100% "ＭＳ ゴシック","Osaka",sans-serif;
border:none;
}

body{
margin:0px;
padding:0px;
font-size:84%;
background:#333333 url("img/bg.gif") repeat-x;
color:#666666;
}

/*ページ全体のリンク指定*/
a{
color:#30B008;
}

/*ページの輪郭*/
#flame{
width: 780px;
margin:0 auto;
}

/*ヘッダ*/
#head{
}
/*サイト名前：ロゴを入れたりしてください*/
#logo{
font-size:300%;
padding:20px 0;
color:#ffffff;
font-family:Arial Black;
}

/*ヘッダメニュー*/
#headmenu{
width:780px;
height:40px;
margin-bottom:10px;
}
#headmenu ul{
width:780px;
list-style:none;
}
#headmenu li{
width:148px;
height:40px;
float:left;
margin-right:10px;
background:url("img/headmenu_a.gif") no-repeat;
}
#headmenu li a{
display:block;
width:113px;
height:27px;
padding:13px 0 0 35px;
text-decoration:none;
color:#000000;
}
#headmenu li a:hover{
background:url("img/headmenu_ah.gif") no-repeat;
}
#headmenu li.rightbox{
margin:0;
}

/*サイドとメインをくくる*/
#centertop{
background:url("img/centertop.gif") no-repeat;
height:10px;
}
#center{
background:url("img/centerbg.gif") repeat-y;
}
#centerbottom{
background:url("img/centerbottom.gif") no-repeat;
height:10px;
}

/*サイドのブロック*/
#box_side{
width: 240px;
float: left;
}

.menu{
width:200px;
margin:20px;
}

h3{
font-weight:bold;
color:#666666;
height:25px;
background:url("img/menutitlebg.gif") no-repeat;
padding:5px 0 0 10px;
}
#box_side ul{
list-style:none;
}
#box_side li{
width:180px;
margin:5px 10px;
}
#box_side li a{
text-decoration:none;
color:#666666;
}
#box_side li a:hover{
color:#000000;
}

/*右のブロック*/
#box_main{
width: 540px;
float: right;
}

/*右のタイトル部分*/
h1,h2{
font-weight:bold;
color:#ffffff;
background:url("img/subtitlebg.gif");
height:25px;
padding:5px 0 0 10px;
}

/*メインの記事の部分*/
.main{
margin:20px 20px 0 20px;
}

/*本文をくる*/
p{
padding:15px 7px;
line-height:150%;
}
です。

HTMLは
（略）
<!--メインのブロック-->
<div id="box_main">

<div class="main">
<h1>H1大見出し</h1>
<p>
<b><font color="red" size="5">有難う</font></b>
</p>
<blockquote>
引用文blockquote引用文blockquote
</blockquote>
</div>

<div class="main">
<h2>H2小見出し</h2>
<p>
P要素P要素
</p>
</div>
</div>
<!--メインのブロック終わり-->

<!--サイドのブロック-->
<div id="box_side">

<div class="menu">
<h3>メニュー</h3>
</div>

<div class="menu">
<h3><center>各種表記</center></h3>
<ul style="disc">
<li><a target="_blank" href="*******"><b>免責事項</b></a></li>
<li><a target="_blank" href="*******"><b>プライバシーポリシー</b></a></li>
<li><a target="_blank" href="*******"><b>特定商取引法に基づく表記</b>/a></li>
<li><a href="#">リンクD</a></li>
</ul>
</div>

です。
メインの<b><font color="red" size="5">有難う</font></b>の部分
サイドの<h3>各種表記</h3>以下に<b>タグと<ul>タグを入れてますが反映されません

初めてのケースですので悩んでます。
今後の為にもこのような場合CSSは何処を変更するのでしょうか？
宜しくお願い致します。

回答No.3

liv2007 · ベストアンサー

#box_side ul{
list-style:disc;
margin: 7px;
}
このように小さい数値にしてもはみ出る場合、

width: ***px;
となっている数値を変更して、指定されているボックスの幅を
大きくしたり、小さくしたりすると大丈夫かもしれません。
全体の幅が780pxなので、#box_sideの幅を大きくする場合
は、#box_mainの幅を、合計780px以内になるように小さく
する必要があります。
変更する場所によっては、背景画像の大きさも変更する必要
が出てくるかもしれません。
HTMLの構造や背景画像のサイズが分かっていないので、
どのボックスの幅を変更すれば良いのか、今の状態では分
かりませんが、ご自分で分かったら試してみてください。

メニューや各種表記の部分がボックスごと下に落ちて表示
されているのでしたら、#box_sideまたは#box_mainの
どちらかの幅を大きくしなかったでしょうか？
あるいは、全体の幅を小さくしなかったでしょうか？

お礼

！！そうですよね！！
以前もサイド部分に単に画像でリンクさせたＨＰを作っていたらサイドごと下に落ちてしまったんでした！

その時は目に見える画像でしたのでサイズをピッタリに罫線分も考慮して入れなおしたのを忘れてました！

<ul><li>は表示されるまで見えないので気が付かなかったｗｗｗ
pxサイズを小さくしても駄目でしたのでそのままリストマーク無しでもいいか～～と思っていた所です（汗）

＞メニューや各種表記の部分がボックスごと下に落ちて表示
されているのでしたら、#box_sideまたは#box_mainの
どちらかの幅を大きくしなかったでしょうか？
あるいは、全体の幅を小さくしなかったでしょうか？

全体サイズを大きくして、#box_sideの値はテンプレのままにし#box_mainを全体780pxに合わせて540pxにしましたのでサイドのサイズは手を加えていないのですけれど

再挑戦してみます！！
ｗｗｗホント覚えても（というかその場しのぎで出来て喜んでも）次から次へとあーーしたいこーーしたいと試行錯誤で出来た事の記憶がトコロテンのように流れてしまいますｗｗｗ
何度も申し訳ございませんでした

補足

重ね重ねご指導ありがとうございます

#box_side{
width: 240px;
float: left;
ここのwidthを270まで広げ（もうヤケで大目に広げましたｗｗ）

#box_main{
width: 540px;
float: right;
こちらを510にしたのですが

結果は、、、同じでした(ヘ；＿ ＿)ヘ・

でサイドの
.menu{
width:200px;
margin:20px;
}
ここのmargin:10px；にし

.main{
margin:20px 20px 0 20px;
}
ここをmargin:10px 20px 0 20px;
にしてみたところ

出来ました！！素人考えでメインの左余白が20pxありますのでその20px分をリストマークに使ってしまおうとやってみました（笑）
はじめはどちらも0pxにしたのですが全く余白が無しでは見栄えが悪いので10pxに・・・・

きっと本来の余白20pxのまま変更するにはそれなりに皆様が仰る方法が正当なのでしょうし、私も納得できるのですが何故かコイツ（テンプレ）は言うことを聞いてくれませんｗｗｗ

一応なんとか形になりましたので
ご報告致します

本当に最後までご面倒おかけいたしました
ありがとうございます

回答No.2

liv2007

>「ul」
サイドブロックの
list-style:none;の部分を削除し
list-style:disc;
margin-left:20px;
>に置き換えましたところ

margin-left:7px;
など、左側の余白を小さな数値にするとどうなるでしょうか？

<b><font color="red" size="5">有難う</font></b>
これを
<span class="font01">有難う</span>
のように、<b>と<font>タグを使用しないで、代わりに<span>
を使用してみてください。
class名を指定すると、特定の箇所にだけスタイルを適用できます。
上記の例の場合、class名にfont01を指定したので、
スタイルシート部分に以下のように記述します。
.font01 {
color: #FF0000;
font-size: 150%;
font-weight:bold;
}
※他の場所にも同じclass名を指定して、複数の特定の箇所に
同じスタイルを適用させることも出来ます。

<li><a target="_blank" href="*******">免責事項</a></li>
<li><a target="_blank" href="*******">プライバシーポリシー</a></li>
<li><a target="_blank" href="*******">特定商取引法に基づく表記</a></li>
<li><a href="#">リンクD</a></li>
上記のように<b>タグを削除して、
スタイルシートの
#box_side liの部分に
font-weight: bold;
を追加して
#box_side li{
font-weight: bold;
width:180px;
margin:5px 10px;
}
のようにしても、リストタグの文字(各種表記部分)を太字に出来ます。

スタイルシートについては、以下を参考にしてください。
http://www.tohoho-web.com/css/basic.htm
http://www.tohoho-web.com/css/index.htm

お礼

参考回答有難うございます！
サイドメニューですが枠外に出てしまうと言う事は
margin-left:20px;
この20pxによりサイズオーバーだと思い15px程にしてみましたが駄目でした
それより小さいサイズにはしてみていないのでもう１度やってみますね

font sizeの件ですが
先頭部分の
font:normal normal 100%
を削除したままにしてみた所sizeも適用になりました
本来の記述方法とは違うかもしれませんけど一応文字部分は自由に変更可能になりました

仰るとおり
cssクラス指定の使い方が理解出来ていれば楽なのですが
どうしても簡単にHTMLでその場その場でしのいでしまうのです・・・
ですからHTMLも凄く余分なタグだらけです（汗）

参考サイト有難うございます
日々少しづつ進んでいこうと思います
御丁寧にお答え頂き感謝いたします！

補足

先程の
＞font:normal normal 100%
を削除したままにしてみた所sizeも適用になりました
この部分が間違いでしたので訂正いたします

font:normal normal 100%を削除しNO.1様にご指導いただいた
font-family:"ＭＳ ゴシック","Osaka",sans-serif;
font-size: 100%;
を入れましたがsize適用にならなかった為
font-size: 100%;
この部分を外してみたところ適用になりました

こちら本当です
失礼いたしました

回答No.1

asamixxx

■ul
#headmenu ul{
width:780px;
list-style:none;
}

#box_side ul{
list-style:none;
}

この2箇所で「list-style:none;」が指定されています。
<ul style="disc">を有効にしたいのであれば、この部分は、「#box_side」に含まれていますので、
#box_side ul{
list-style:none;
}
が該当します。
また、先頭の
*{
margin:0;
padding:0;
font:normal normal 100% "ＭＳ ゴシック","Osaka",sans-serif;
border:none;
}
で、marginが0に設定されてしまっていて、リストの「●」が見えませんので、
#box_side ul{
list-style:disc;
margin-left:20px;
}
などとすれば表示されます。

■b
太字にならないのは、
*{
margin:0;
padding:0;
font:normal normal 100% "ＭＳ ゴシック","Osaka",sans-serif;
border:none;
}
で、「normal」を指定しているため。
font列の部分を
font-family:"ＭＳ ゴシック","Osaka",sans-serif;
font-size: 100%;
に書き換えれば大丈夫です。
（但し一括指定で太字を解除する記述を削除しているため、今まで普通の文字だった部分が太字になる可能性があります）

補足

asamixxx様
御丁寧に説明有難うございます
「太字」
御指摘の通り置き換えましたところ指定部分のみ太字になりました

「ul」
サイドブロックの
list-style:none;の部分を削除し
list-style:disc;
margin-left:20px;
に置き換えましたところ指定部分に●は付きましたがサイドブロックの全て（メニュー・各種表記を含む）がメインとサイドをくくる
#centertop{
background:url("img/centertop.gif") no-repeat;
height:10px;
}
#center{
background:url("img/centerbg.gif") repeat-y;
}
#centerbottom{
background:url("img/centerbottom.gif") no-repeat;
height:10px;
}
で指定された白色画像部分の（この画像上にサイドとメインが分けられています）枠外に縦長そのままの形で飛び出てしまいフッターに挟まれた形になってしまいました

font colorは反映しますがsizeは変わりません
先頭のほうの
font-size:84%;
この部分で84%となっているからでしょうか？

テンプレのブラウザ上での状態が判らない状態で今どのように変形してしまったかを私の説明では伝わらないと思います・・・・
理解できます範囲で結構ですので
宜しければ今一度御教授お願い致します