CSSでクラスの重複部分の記載方法

このQ&Aのポイント
  • CSSのクラスを定義する際、重複部分の記載方法について質問があります。
  • 例えば、クラスDivAとクラスDivBで、一部の設定を共通化したい場合、どのように記述すればよいか知りたいです。
  • 「後は、DivAと同じ」というような書き方があれば教えてください。
回答を見る
  • ベストアンサー

cssでclassを記載する時の重複部分の記載方法

お世話になります。 cssでのクラスの書き方についてです。 例えば、 div.DivA{ color:red; font-size:13px; padding:5px; margin:5px; } などと記載して、 DivAと、フォントサイズのみを変えたDivBを定義したいとき、 div.DivB{ color:red; font-size:20px; padding:5px; margin:5px; } とすれば、可能なわけですが、 このDivBの定義をするとき、DivAの設定事項を引き継いだ記載方法は無いものでしょうか。 つまり、 div.DivB{ font-size:20px; 「後は、DivAと同じ」 } 「後は、DivAと同じ」 の部分の記載方法です。 よろしくお願いいたします。

  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
noname#83877
noname#83877
回答No.1

div.DivA { font-size:13px; } div.DivB { font-size:20px; } div.DivA, div.DivB { color:red; padding:5px; margin:5px; } こういうのですか? 個人的には少しこれだとソースで分ける意味がわかりにくいので <div id="WRAPPER"> <div ckass="DivA">AAAAAAAA</div> <div ckass="DivB">BBBBBBBB</div> </div> として #WRAPPER div { color:red; padding:5px; margin:5px; } div.DivA { font-size:13px; } div.DivB { font-size:20px; } こんな感じにしますが。

rqg2010
質問者

お礼

metametamuさん、すごく速いご回答ありがとうございます。 その通りです。 教えていただいたような記載方法を考えていました。 また、 「個人的には」、と、いう記載方法もとても参考になりました。 ありがとうございました。

関連するQ&A

  • CSS IDごとのCLASS指定

    以下のようなCSSがあった場合に、それぞれのIDに同じ名前で中身の違うCLASSを指定する事は出来るのでしょうか? #main{ margin:0; padding:0; background: transparent; float : left; font-size : 0.8em; } #menu{ margin:0; padding:0; width:140px; float : left; font-size : 0.8em; background :url('img/back.gif') no-repeat left top; color:#17F600; } #mainにはこれ、 .txt { font-size : 1em; line-height : 120%; margin:0 0 5px 380px; padding:0 0 0 30px; text-align : left; color:#69788A; } #menuにはこれ .txt{ font-size : 1em; padding:0 0 0 10px; margin:5px 30px 5px 0; text-align : left; color:#69788A; border-bottom:1px solid #CFDEEF; } といったかんじなのですが…

    • ベストアンサー
    • HTML
  • モバイルサイト構築 - CSS/Class/IDの使用について

    初めて携帯サイトを作っています。 モバイルサイトに詳しい方、教えてください。 CSSは外部ではなくHEADのスタイル部分に記述しています。IE等のPCブラウザでは普通に表示されるのですが、エミュレーターで表示してみるとスタイル(ID)がまったく適用されません。 Classで指定している部分はそのスタイルが適用されているのですが、ID#で指定すると適用されません。書き方に問題があるのでしょうか・・・。 まずはAUを対象に作っているのですが、何かAUどくとくの記述ルールがあるのでしょうか。教えてください。 以下ソースです。(CSSだけ)↓↓↓↓ <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML 1.0//EN" "http://www.openwave.com/DTD/xhtml-basic.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <!-- XHTML宣言 ここまで --> <!-- ここから上は固定 --> <head><title>いまよむトップ</title> <meta http-equiv="content-type" content="text/html;charset=shift_jis" /> <!-- CSS --> <style type="text/css" media="メディアタイプ"> body {margin:0; padding:0;} .marquee { font-size:xx-small; /* 変更不可 */ color: #ffffff; background-color: #FF0066; } .top_logo {text-align: center;} .div_bace { font-size: x-small; /* 変更不可 */ background-color: #FFCCCC; } .div_bace#top {border: solid 1px #000000;} .title { font-size: medium; color: #ffffff; text-align :center; margin-top :0; } .title#001 {background-color: #ff0066;} .title#002 {background-color: #FF9900;} .title#003 {background-color: #33CCFF;} .title#004 {background-color: #000000;} .title#005 {background-color: #99CC00;} .title#006 {background-color: #FF9900;} .title#007 {background-color: #990099;} .title#008 {background-color: #FFFFB5;} .title#009 {background-color: #FF6699;} .title#010 {background-color: #000000;} .title#011 {background-color: #000000;} .div_bace#shinkan {border: 2px solid #ff0066; margin: 3px;} .div_bace#osusume {border: 2px solid #FF9900; margin: 3px;} .div_bace#tokushu {border: 2px solid #33CCFF; margin: 3px;} .div_bace#shoseki {border: 2px solid #000000; margin: 3px;} .div_bace#comic {border: 2px solid #99CC00; margin: 3px;} .div_bace#shashinshu {border: 2px solid #FF9900; margin: 3px;} .div_bace#boyslove {border: 2px solid #990099; margin: 3px;} .div_bace#magazine {background-color: #FFFFB5; margin: 3px;} .div_bace#ranking {border: 2px solid #FF6699; margin: 3px;} .div_bace#imayomu_room {border: 2px solid #000000; margin: 3px;} .div_bace#search {border: 2px solid #000000; margin: 3px;} .footer {border: 2px solid #000000; margin: 3px;} .bottom_base {font-size:xx-small; /* 変更不可 */} .hr_color { color:#808080; /* 変更不可 */ width:100%; /* 変更不可 */ size:1px; /* 変更不可 */ } .smallest {font-size: xx-small;} .smallest#orange {color: #ffcc00;} .smallest#red {color: #ff0000;} .smallest#pink {color: #FF00FF;} .smallest#gray {color: #C0C0C0;} .smallest#blue {color: #3300CC;} .border { width :100%; height :90px; margin :5px; border-top: 2px solid #ff0066; border-bottom: 2px solid #ff0066; text-align: center; } .largest {font-size: medium;} .largestt#orange2 {color: #ffcc00;} .largest#red2 {color: #ff0000;} .largest#pink2 {color: #FF00FF;} .largest#gray2 {color: #C0C0C0;} .largest#blue2 {color: #3300CC;} </style> <!-- CSS ここまで--> </head>

    • ベストアンサー
    • HTML
  • CSSのフッター部分について

    CSS初心者です 今回外部CSSで作成したのですが途中まではうまくいきました しかし最後のフッターを入れるとレイアウトが崩れるのです。 今回の形状はページに上から「ページ(ホームページタイトル)」「ヘッダー(サブタイトル)」「同域上に左右に分けて「submanu」「main」」として最後にfootで「コピーライトなどを書いて」閉めたいのです 作ったCSSは以下の通り(どこが悪いのでしょう(foot入れるまで理想に近づいていたのですが)) *{ margin: 0px; padding: 0px; } div#page { text-align: left; border: 1px solid #333333; background: #66FFFF; width: 720px; margin: 0px; } div#head { width: 720px; padding: 5px 5px 0px 0px; margin: 0px; background: #FF00FF; } div#main { margin: 0px; border-left: 1px solid #FF; padding: 20px 0px; background: #00CCFF; width: 560px; height: 5000px; float: left; } div#submenu { width: 160px; height: 5000px; margin: 0px; padding: 20px 0px; float: left; background: #00FF33; } div#foot{ clear:both; text-align:center; font-size:10px; background:#FFFFFF; width:720px; height:20px; }

    • 締切済み
    • CSS
  • 外部css定義したclassをhtmlで引き継ぎ別名で定義する方法

    いつもお世話になります。 外部cssで、例えば xyz.css div.abc{ font-size:13px; width:100px; height:120px; border:solid; border-width:2px; border-color:#460675; } などと定義し、 htmlで <link rel="stylesheet" href="xyz.css" type="text/css"> <style type="text/css"><!-- div.def{ ここで、class abc の内容の一部のみ変更、追加をしたいんですが、 その記載方法がわかりません。 } --></style> 次のようにしてもできますが、 <div class="abc" style="ここに記載" ・・・・ JavaScriptで、classを切り替えて使用したいので、 cssで定義したclassを基に新たなclassを新たな名前でそれぞれのページでできないものかと調べています。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • cssでタブの2段重ねの方法を教えてください

    当方、html、css初心者です。javascriptに関しては全くちんぷんかんぷんです。 http://xampp.utun.net/ このようなサンプルがあったのですが、これを改造して、 タブを縦2段でレイアウトしたいのですが、 方法を教えて頂けないでしょうか? CSSソース ----------------------------------------------------------------------- <style type="text/css"> /* ▼(A)表示領域全体 */ div.tabbox { margin: 0px; padding: 0px; width: 400px; } /* ▼(B)タブ部分 */ p.tabs { margin: 0px; padding: 0px; } p.tabs a { /* ▼(B-2)リンクをタブのように見せる */ display: block; width: 5em; float: left; margin: 0px 1px 0px 0px; padding: 3px; text-align: center; } /* ▼(B-3)各タブの配色 */ p.tabs a.tab1 {background-color: blue;color: #000;} p.tabs a.tab2 { background-color: #aaaa00; color:white;} p.tabs a.tab3 { background-color: red; color: white; } p.tabs a.tab4 { background-color: red; color: white;} background-color: #F00; color: white; } p.tabs a:hover { color: yellow; } /* ▼(C)タブ中身のボックス */ div.tab { /* ▼(C-2)ボックス共通の装飾 */ height: 150px; overflow: auto; clear: left; } /* ▼(C-3)各ボックスの配色 */ div#tab1 { border: 2px solid blue; background-color: #ccffff; } div#tab2 { border: 2px solid #aaaa00; background-color: #ffffcc; } div#tab3 { border: 2px solid red; background-color: #ffcccc; } div#tab4 { border: 2px solid red; background-color: #ffcccc; } div.tab p { margin: 0.5em; } </style> ----------------------------------------------------------------------------- 上記の通りです。 ご指導、ご鞭撻の程を宜しくお願いします。

    • 締切済み
    • CSS
  • CSS 〈address〉タグで囲んだ部分を最下部に表示したい

    CSS 〈address〉タグで囲んだ部分を最下部に表示したい お世話になっております。 CSSでサイトを構築しようと考えております。 その際にコピーライト部分を〈address〉~〈/address〉タグで 囲み、その部分をページの最下部に表示したいのですが それが出来ずに悩んでおります。 よく『containerの全長(例えば500px)のheightを指定して、main(450px)とfooter(50px)でそれぞれにも 高さを指定すればよい』との解答を見かけますが、私が考えるのは もっと単純に『ページの最下部に表示』をしたいのです。 例えばテーブルタグを使えば【vertical-align: bottom】で 簡単に実践できますがこの表現方法はスマートとは言えません。 過去ログを検索したところ・・・ http://okwave.jp/qa/q2859912.html の質問サイトに私と全く同じ症状に悩み、解決した方への回答が あるのですが、解答と同様に私のサイトにタグを適用しても解決出来ず困っております。 【index.html】 (--ページヘッダは省略--) <title>タイトル</title> <link rel="stylesheet" type="text/css" href="style.css" /> <style type="text/css"> </style> </head> <body> <div id="container"> <div id ="header"> <h1>こんにちは</h1> </div> <ul> <li><a href="index.html">top</a></li> <li><a href="schedule.html">schedule</a></li> </ul> <div id="main"> <h2>Welcome!!</h2> </div> <address>Copyright&copy;</address> </div> </body> </html> 【style.css】 @charset "utf-8";body , html { height: 100%;} body {color: #444444;} div#container {border: solid 2px #aaaaaa; padding: 20px; width: 500px; height: 100%; background-color: #ffffff; margin-left: auto; margin-right: auto} div#header {background-color: #111111; padding: 5px 20px;} h1 {font-size: 1.25em; font-family: Verdana, Helvetica, sans-serif; color: #66aa66} h2 {font-size: 1em; padding-left: 20px; padding-bottom: 3px; maragin-bottom: 10px; border-bottom: solid 2px #999999; background-image: url(freeback65.gif); background-repeat: no-repeat} ul {list-style-type: none; margin-left:0; background-color: #888888; padding-left:0; padding:3px 20px} li {display: inline; padding-right: 10px; color: #ffffff} li a {text-decoration: none; color:#ffffff} li a:hover {background-color:#bbbbbb} p {font-size: 0.75em; padding-left:10px} address {font-size: 0.625em; font-style: normal; color: #2d444f; text-align: center; text-valign: bottom;} この状態でwebで見ますと、肝心のアドレス部分は#container内の <p>タグの直下に表示されます。私の希望としましてはcontainer内の 一番下に表示されるのが理想です。 ご教授よろしくお願いいたします (タイトルミスで間違えてマルチ投稿になっちゃいました)

    • ベストアンサー
    • HTML
  • css leftsideだけ色をつける方法

    あるサイトのレイアウトを参考にしながらcssの勉強をしています。 html <body> <div id="page"> <div id="head"> <img src="./simpe01/img/logo_img300-60.gif" alt="log_img" width="300" height="60"> </div> <div id="navigation"> <ul> <li><a href="./index.htm">HOME</a></li> <li><a href="./contents/index.htm">コンテンツ</a></li> <li><a href="./link/index.htm">リンク</a></li> </ul> </div> <h1>○○</h1> <div id="leftside"> <p>新着情報</p> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </div> <div id="main"> <h2>ごあいさつ</h2> <div class="imgbox_f"><img src="./img/img_sample.jpg" alt="サンプル" width="200" height="257"></div> <p>画像は&lt;div id=&quot;imgbox_f&quot;&gt;&lt;/div&gt;で囲むと写真右へ。</p> <p>あいさつ文を入力しおく。<strong>太字</strong>は&lt;strong&gt;&lt;/strong&gt;で囲む。</p> <ul> <li>箇条書き</li> <li>箇条書き</li> </ul> <h2>補足情報</h2> <p>サイトの使い方や、 注意事項を書いておく。 </p> </div> <!-- #foot 画面一番下 --> <div id="pagefooter"> <p>必要ならコピーライトや、サイトの付加情報を書くところ。 </ p> </div> </div> </body> css *{ margin: 0px; padding: 0px; } body { background-color: #FFFFF; font-size: 95%; line-height: 150%; text-align: center; color: #333333; margin: 0px; } div#page { text-align: left; border: 1px solid #333333; background: #FFFFFF; width: 780px; margin: 5px auto; } div#head { padding: 10px 10px 5px 5px; margin: 0px; background: #FFFFFF; } div#navigation { padding: 10px; background: #E188FF; border-top: 1px solid #333333; border-bottom: 1px solid #333333; height: 25%; } div#navigation ul{ margin: 0px; padding: 0px; background: #FFFFFF; } div#navigation li{ float: left; padding: 0px; margin-left: 10px; color: #FFFFFF; list-style: none; } div#navigationu a{ color: #FFFFFF; text-decoration: none; } div#navigation a:hover{ color: #000000; background: #D7E1EC; } div#main { margin: 0px; border-left: 1px solid #CCCCCC; padding: 10px 0px; background: #FFFFFF; width: 560px; float: left; } div#main p{ margin: 0px 0px 20px 10px; } div#main ul { margin-left: 60px; margin-bottom: 1em; margin-right: 30px; } div#leftside { width: 200px; margin: 5px 0px 0px 5px; padding: 10px 0px; float: left; } div#leftside ul{ margin: 0px 0px 0px 5px; list-style: circle; padding-left: 2em; } div#leftside p{ margin: 0px 10px 10px; } div#pagefooter { border-top: 1px solid #333333; padding: 0px; text-align: center; clear: both; margin: 0px; } div#pagefooter p{ margin: 5px 0px; } strong { color: #CC3333; } h1 { font-size: 110%; padding: 25px 15px 5px; border-bottom: 1px solid #CCCCCC; background: #F3F3F3; font-weight: normal; } h2 { font-size: 110%; margin: 0px 20px 20px; color: #333333; border-bottom: 1px dashed #999999; padding: 0px 0px 5px; clear: both; } dl { margin: 0px 0px 50px 40px; } dt { font-weight: bold; } dd { margin-bottom: 10px; } .imgbox { margin: 0px 0px 1em 10px; } .imgbox img{ border: 1px solid #666666; } .imgbox_f { margin: 0px 10px 1em; float: right; } .imgbox_f img{ border: 1px solid #666666; } --------------------------------------------------------------- leftsideだけに色をつけたいのですが、どうしても右側が20px;分 あまってしまいます。色々いじってみたのですが改善されず、行き詰っています。 bodyのwidthが780px; leftsideが200px; mainが560px; 自分としてはmainの560を580に変えれば解決と思っていたのですが、 そうするとmainがleftsideの下にきて形がくずれてしまいます。 20px分はどの部分を変更すればきれいな形になるのでしょうか。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • 直接書き込むCSSを外部ファイルに設定したい

    CSS初心者です。下記の携帯テンプレートを使ってサイトを作りたいです。 タグに直接書き込むタイプのCSSが多いのですが、 このソースの一部を外部ファイルに設定するには、どういう書き方をしたら良いでしょうか? 【外部に設定したい項目】 ★タイトル下線のMARGIN-RIGHT: 47% ★真ん中の線(画像位置)BACKGROUND-POSITION: 53% ★一番下線のMARGIN-LEFT: 53%; 外部にしたい理由は携帯とパソコンで見た時にそれぞれ線の位置を変えたいと思って いるからです。出来ますでしょうか?CSSに詳しい方、どうかお願いします(>_<) 【全タグ】 <html> <HEAD> <TITLE>TITLE</TITLE> </HEAD> タイトル <H1 style="PADDING-LEFT: 7px; MARGIN: 0px; PADDING-TOP: 10px; BACKGROUND-COLOR: #ffffff"></H1> <DIV style="BACKGROUND-POSITION: 53% 40%; BACKGROUND-IMAGE: url(http://deai.mokuren.ne.jp/up/src/up3891.gif); BACKGROUND-REPEAT: repeat-y"> <DIV style="BORDER-TOP: #000000 1px solid; MARGIN-RIGHT: 47%"> <P style="PADDING-RIGHT: 0px; PADDING-LEFT: 15px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 7px"></P></DIV> <DIV style="MARGIN-LEFT: 40%; PADDING-TOP: 17px"> <DIV style="WIDTH: 300px; MARGIN-RIGHT: 20px"> <H2 style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 13px; PADDING-BOTTOM: 2px; MARGIN: 0px 0px 3px; PADDING-TOP: 3px; BACKGROUND-COLOR: #000000"> <font color="#ffffff">コンテンツ</font></H2></font> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説2</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">その他</a></div> </DIV></DIV> <DIV style="MARGIN-LEFT: 53%; BORDER-BOTTOM: #000000 1px solid"> <P style="PADDING-RIGHT: 5px; MARGIN: 0px; PADDING-TOP: 17px" align=right></DIV></DIV> <P style="PADDING-RIGHT: 5px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-TOP: 5px" align=right> </HTML>

    • 締切済み
    • CSS
  • CSSでマージンを残しつつ中央そろえにする方法について

     こんにちは、Phoenix001と申します。  趣味でホームページ製作をしている者です(ただし割と初心者です)。  先日、ネットサーフィンをしてホームページ作成の参考になるサイトを探していた所、 http://www.gardenxgarden.com/ というサイトを発見いたしました。  このサイトはサイトのサイズが横800pxだと思うのですが、1200pxで開くと左右に均等にマージンがあり、ウィンドウを小さくするとマージンからなくなり、さらにウィンドウを小さくしてもページが崩れないように出来ています。  私はこのようにマージンを作りつつ中央にサイトがあり、ウィンドウを小さくするとマージンからなくなるページは始めて見たので是非自分でもやってみたいのですが、CSSの設定はどうやるのでしょうか?  練習用にHTMLとCSSのソースを作りましたので、これでやり方を示していただけると幸いです。  HTML、CSS内容がメニューとコンテンツの(参考サイトのページ3分割ではなく)2分割です。マージンのやり方なので問題はないと思います。  なるべく間違いがないように骨組みは(マージン以外)作ったつもりですが、間違えていたらご容赦ください。  どうぞ、よろしくお願いいたします。 ■練習用HTML <head> <title>マージンがあり、ウィンドウを小さくするとそこからなくなっていくサイトを作るには?</title> <link rel="stylesheet" type="text/css" href="index.css" media="screen,print"> </head> <body> <div id="main">■■←Mainで全体を覆いますよね?使用しない場合は消してください。 <div id="head"> <h1>マージンのあるサイト</h1> </div> <div id="menu"> <h2>リンク</h2> <ul> <li>マージン</li> <li>作りたいです</li> </ul> </div> <div id="content"> <p>マージンがあるのに中央にそろえられて、ウィンドウを小さくするとマージンから消えていくサイトは始めてみました。是非創ってみたいです。解答しやすくなるようにコンテンツのデータを入れてあります。</p> <h2>案内</h2> <p>HTML、CSSが分かる方、解答をお願いいたします。</p> <dl> <dt>マージン</dt> <dd>ページの余白のこと</dd> <dt>やり方</dt> <dd>分からないです</dd> <dt>作る意欲</dt> <dd>沢山あります。</dd> </dl> </div> </div> ■HTML終了 ■練習用CSS(いらないものは消して、いるものは追加してください。h1、h2は分かりやすくなるように入れています。) body { background-color: white color: black; margin-left : auto ; margin-right : auto ; } h1 { font-size: 1.6em; background-color: #480; color: white; padding: 0.2em; } h2 { font-size: 1.0em; border: 1px solid #480; padding: 0.2em; } p { line-height: 1.6em; } div#main { float: middle; width: 800px; } div#menu { float: left; width: 9em; background-color: white; margin-right: 1em; padding: 0.4em; } div#menu h2 { font-size: 1em; } div#menu ul { font-size: 0.9em; list-style-type: none; margin-left: 0; padding-left: 0.5em; } div#menu li { margin-bottom: 0.4em; } div#content { float: left; width: 80%; } div#content h2 { font-size: 1.2em; border: 1px solid #800; padding: 0.2em; } div > *:first-child { margin-top: 0; } ■CSS終了

    • ベストアンサー
    • HTML
  • CSSのどの部分を変更するとHTMLに反映されますか?

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