• ベストアンサー

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; } といったかんじなのですが…

noname#109030
noname#109030
  • HTML
  • 回答数2
  • ありがとう数2

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

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

子セレクタを使用します。 この場合は、 #main .txt{ aaaaa;bbbbb; } #menu .text{ ccccc:ddddd; } です。

noname#109030
質問者

お礼

ありがとうございます。おかげで作業が進みました。 ポイントは回答順につけさせていただきました。

その他の回答 (1)

  • think49
  • ベストアンサー率59% (285/482)
回答No.2

<div id='main' class='txt'>...</div> <div id='menu' class='txt'>...</div> なら #main.txt { ... } #menu.txt { ... } でいいと思います。

noname#109030
質問者

お礼

ありがとうございます。おかげで作業が進みました。 ポイントは回答順につけさせていただきました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • XHTML、CSSレイアウトでフッターを常に最下部に配置するには?

    フッターを最下部に表示したいのですが、#footerに position: fixed; bottom:0;を付け加えてもフッター だけ最下部に表示されコンテンツ部分がついてきません。 ヘイトに100%をつけくわえるのでしょうか? どうかご教授願います。 body { margin: 0; padding: 0; text-align:center; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size:1em; background-color:#CCCCCC; } ol,ul,li { margin: 0; padding: 0; } li { list-style:none; } h1,h2,h3,p { margin: 0; padding: 0; } #container { margin: 0 auto; text-align: left; width: 740px; height: 100%; background-color:#FFFFFF; } #header { width:740px; height:80px; margin:0; padding:0; background-color:#FFFFFF; background-image:url(img/nine_rogo.gif); background-repeat:no-repeat; background-position:left center; } #contents { width:740px; height:100%; margin:0; padding:0; background-color:#FFFFFF; } #menu { float:left; width:140px; height: auto; margin:0; padding:0; background-color:#FFFFFF; color:#000000; } #main { float:right; width:580px; height:auto; margin:0; padding:0 0 0 10px; background-color:#FFFFFF; color:#000000 } #footer { clear:both; width:740px; height:auto; background-color:#FFFFFF; color:#000000; font-size:1em; padding:0.3em 0; text-align:center; }

  • CSS3で困ってます！

    現在、HTML5でサイト書き出し中です。CSS3も使っているのですが、大きな問題が発生いたしまして… 背景のボックスの大きさがbodyの大きさに追随しないんです。ボックスからINFOMATION欄などが飛び出してしまってデザイン的によろしくない感じです。 ボックス要素は、divのidのtopに対して与えています。topはペ0次全部のコンテンツをまとめるためのものです。 今日一日、CSSのソースとにらめっこしたのですがわかりませんでした。皆さんなら、わかると思い頼らせて頂くことにいたしました。どこが間違っているかわかりません！教えてください（涙） CSSは、 @charset "utf-8"; /* CSS Document */ *{ font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } a{ text-decoration:none; } div#top{ width: 920px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; box-shadow: 3px 3px 10px #666; -moz-box-shadow: 3px 3px 10px #666; -webkit-box-shadow: 3px 3px 10px #666; -o-box-shadow: 3px 3px 10px #666; text-align:left; margin:0 auto; } div#header{ text-align:center; } div#banner{ width: 900px; margin: 0px auto; } div#menu{ width: 900px; margin: 0px auto; } div#menu ul { float:left; margin:0; padding:0; height: 40px; text-align:center; } div#menu li { margin:0; padding:0; float:left; font-size:90%; text-align:center; list-style-type:none; width: 225px; -webkit-transition-property: background-color; -webkit-transition-duration: 0.25s; -moz-transition-property: background-color; -moz-transition-duration: 0.25s; -o-transition-property: background-color; -o-transition-duration: 0.25s; background-color: #3C0; height: 40px; } div#menu li span { font-family:verdana; font-size:140%; color:#fff; line-height: 40px; } div#menu li:hover{ background-color: #0F0; } div#contents{ width:900px; height: auto; margin:0 auto; padding: 10px 0; } div#info { float:left; width:450px; } div#info h2{ font-size: 25px; width: 450px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; background-color:#090; color: #FFF; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding-top: 2px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px; margin-top: 0px; text-align:left; } div#info dl dt { clear:left; float:left; width:7em; padding:10px 0.5em; } div#info dl dd { margin-left:0; padding:10px 0.5em 10px 8em; background:#fff url(images/bg_info_line.gif) 0 100% repeat-x; } div#news{ float: right; width: 430px; text-align:left; } こんな感じです。 実際のページはここにあります。 http://skino.cyber-ninja.jp/test/

    • ベストアンサー
    • CSS
  • CSSでの影の付け方

    http://radiocaroline.jp/ 上記のサイトのようにコンテンツ表示領域と 背景領域の間のグラデーション部分はどのように 設定すればいいのでしょうか？ 現在真ん中780px固定で左右を背景画像にしてます。 <style type="text/css"> <!-- body { background: #000000; margin: 0px; padding: 0px; text-align: center; color: #ffffff; background-color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; background-image: url(images/bg.gif); background-repeat: repeat; } .oneColFixCtrHdr #container { width: 780px; background: #000000; margin: 0px auto; text-align: left; } .oneColFixCtrHdr #header { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #header h1 { margin: 0px; padding: 0px 0px; } .oneColFixCtrHdr #mainContent { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #footer { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #footer p { margin: 0px; padding: 5px 0px; } #left { background-color:#000000; width:530px; float:left; } #right { background-color:#000000; width:250px; float:left; } .style2 { color: #FFFFFF; font-size: 80%; } .style1 {font-size: 60%; color: #CCCCCC; } .style6 {color: #CCCCCC} .style7 {font-size: 70%} --> </style>

  • 外部CSSファイルからのリンク色指定

    外部CSSファイルでヘッダー・フッター・左・右と４種類の枠をそれぞれ違ったリンク色に設定したいのですが、下記の記述で個々にリンク色を設定することはできますか？ できるのであればどのように記載すればいいですか？ body{ text-align:center; background-image: url("image/back.gif"); margin: 0 auto; } #container{ width:800px; margin:0px; text-align:left; } .header{ height: 120px; background-image: url("access/top.gif"); background-repeat: no-repeat; background-position: bottom; margin: 0px; } .main{ width:600px; height:100%; float:right; background-color: #FFFF99; padding: 10px; margin: 0px; } .side{ width:200px; float:left; background-color: #0000FF; padding: 10px; margin: 0px; text-decoration:none; color:#FFFFFF; } .footer{ font-size: 10px; } .clear{ clear:both; line-height:0; height:0; }

    • ベストアンサー
    • CSS
  • CSSのpositonでフッタを下部に固定したのですがIE6でズレてしまう原因が分からないので教えてください

    こんばんは、CSSのpositionで下部にフッタを固定する為に設定したらwinIE６で見るとフッタだけ右にずれてしまいます。 当方Mac、osXで主にドリームウィーバーに手打ちです。safari、frefoxではずれませんでした。ソースを省略すると原因が分からないのでCSSを全部載せます。 アドバイスいただけると大変うれしいです。お願いいたします。 html,body{ text-align:center; margin: 0px; background:#FFFFFF; height:100%; } #countainer{ position: relative; height: 100%; min-height:100%; } #contents { padding-bottom:50px; } #header{ height:106px; background-image: url(img/headbg.gif); background-repeat: repeat-x; } #logo { width: 800px; height: 96px; text-align: left; padding: 10px 0 0 0; margin: auto; background-image: url(img/bg_navi.gif); background-repeat: no-repeat; background-position: 100% 100%; } #logo img{ float: left; } #navi{ width: 600px; float: right; } #navi ul{ margin:75px 11px 0 0; padding:0; } #navi li{ width: 100px; height: 21px; float: right; margin:0; padding:0; list-style-type:none; text-align: center; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; line-height: 100%; background-image: url(img/bg_navi.gif); background-repeat: no-repeat; background-position: 0% 100%; } #navi a:link,#navi a:visited{ color:#635142; padding: 0 0 0 12px; } #navi a:hover{ color:#FF6633; text-decoration:none; } #navi a.s:link,#navi a.s:visited{ color:#B59980; } #main{ width: 800px; margin: auto; text-align:left; font-size:80%; } #main .topimg{ width:500px; float:left; text-align: center; } #main .news{ width:300px; height:300px; float:right; background:url(images/bg_news.gif) no-repeat 0px 20px; } #main .news p{ margin:50px 40px 0px; color: #5D4F41; line-height: 150%; font-size: 12px; } #main .body{ width:550px; float:left; clear:both; } #main .body p{ margin:10px 5px; } #main .menu{ width:183px; float:left; font-size:12px; } #main .tabmenu{ width:250px; float:right; } #main h1 span.jp{ font-size: 12px; letter-spacing: normal; font-family:"ＭＳ Ｐゴシック","Osaka","ヒラギノ角ゴPro"; } #main h2{ margin: 30px 0 5px 0; padding:3px; border-bottom: 4px double #83684F; font-size:180%; color: #333333; clear: both; } #main h3{ margin: 30px 0 5px 0; padding:3px; background-color: #83684F; font-size:120%; color: #FFFFFF; clear: both; } #main th{ padding: 3px 5px; background-color: #F3EBDC; border-bottom:1px solid #83684F; text-align:left; font-weight: normal; color:#A07D5E; } #main a.mail{ padding:5px 0 5px 30px; background:url(images/btn_mail.gif) no-repeat 0px 0px; color: #FF0000; } #main a.mail:hover{ background:url(images/btn_ov_mail.gif) no-repeat 0px 0px; } #main .box{ width:183px; float:left; } #main .box img{ margin:0 8px; filter:chroma(color=#FFFFFF); } #main .box h3{ margin: 0 10px; padding: 3px; font-size:100%; color:#A07D5E; position: relative; top: -10px; background-color: #F3EBDC; } #main .box p{ margin: 0 10px; padding: 0; font-size:10px; top: -5px; position: relative; } #footer{ clear:both; color:#666; font-family: Arial, Helvetica, sans-serif; border-top-width: 3px; border-top-style: solid; border-top-color: #D8D8D8; position: absolute; bottom: 0px; margin:auto; text-align: center; font-size: 75%; height: 30px; width: 100%; } #main .body #mn6 { margin-top: 20px; } /*----------------------------span-*/ span.tel{ font-size:24px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#424242; line-height: 24px; } /*-------------------------------------for any--*/ .clear{ clear:both; line-height:1px; } #main .body p { margin-left: 15px; } #main .topimg { margin-top: 20px; }

    • ベストアンサー
    • Mac
  • フッターの画像の位置づけ指定方法がわからない

    ヘッダー・メイン・サイドバー（左右）・フッターの５コマ組みのサイトを表現したいのですが、 フッターに指定した画像を全体サイズでセンターに寄せて（画像の上に、真ん中寄せでテキストを乗せたい）反映させるにはどうしたらいいのでしょうか。フッターに指定しているjpg画像のサイズは、(○●.jpg);511×229pxです、よろしくお願いします。 <style type="text/css"> body /* コンテナ */ div#container{width: 100%; margin-left: auto; margin-right: auto} /* ヘッダー */ div#header{background-color: #ffffff; 　　　　　　　　　 　　font-color:#4876ff; /*background-image: url(.jpg);*/ background-repeat: no-repeat; background-position: center top; 　　　　　　　　　/*padding: 28px 20px 150px*/ } div#header h1{margin: 0} div#header p{color: #ffffff; font-size: 0.50em; margin: 0} /* メイン */ div#main{width: 100%; float: left; margin-right: -230px} /* コンテンツ */ div#content{width: 100%; float: right; margin-left: -186px; margin-right: auto; margin-bottom: 25px} div#content h2, div#content h3, div#content p {margin-left: 186px; margin-right: 230px} div#content h2{background-color: #92c9ff; background-image: url(); background-repeat: repeat-x; border: solid 1px #84c2ff; font-size: 0.875em; color: #00688b; line-height: 32px; padding-left: 6px; margin-top: 0; margin-bottom: 0} div#content h3{background-color: #ffffff; background-image: url(); background-repeat: no-repeat; background-position: 0px 2px; font-size: 0.875em; line-height: 22px; padding-left: 26px; margin-top: 30px; margin-bottom: 0} div#content p{font-size: 0.75em; line-height: 1.6; margin-top: 10px} /* サイドバー */ div#sidebar{ background-image:url(.jpg); width: 170px; float: left; margin-bottom: 25px} ul.sidemenu{font-size: 0.90em; margin-top: 0; margin-left: 0; padding-left: 0; line-height: 0} ul.sidemenu li{list-style-type: none} ul.sidemenu li a{ 　　　　　　display: block; line-height: 25px; text-decoration: none; 　　 text-align:right background-img:url(.gif); 　　　　　　padding-left: 10px} ul.sidemenu li a:hover{background-color: #cdc1c5 　　　　　　　　　　　　　　color: #8b1c62 } ul.sidemenu ul {margin: 0; 　　　　　　padding: 0} ul.sidemenu ul li a {background-img:url(gif); color:#5d478b; border-bottom: solid 1px #ab82ff; 　　　　　　　line-height: 24px} ul.sidemenu ul li a:hover {background-color: #eee0e5; 　　　　　　　　　　　　　 　　　　color:#ffffff; 　　　　　border-bottom: solid 1px #ab82ff; } p.feed{margin-bottom: 10px} p.feed a{font-size: 0.75em; color: #444444; text-decoration: none; line-height: 30px; border: solid 1px #888888; padding: 5px} p.feed img{border: none; vertical-align: middle} /* 右サイドバー */ div#sidebar-right{width: 150px; float: right} div.info{border: solid 1px #84c2ff; margin-bottom: 18px} div#sidebar-right h2{background-color: #c6e3ff; 　　background-image: url(); color: #3c5916; font-size: 0.75em; text-align: center; padding: 5px; margin-top: 0; margin-bottom: 3px} div#sidebar-right p.photo{text-align: center} div#sidebar-right p{font-size: 0.75em; margin: 10px 5px} div#sidebar-right ul{font-size: 0.75em; margin: 5px; padding: 0} div#sidebar-right ul li {background-image: url(); background-repeat: no-repeat; background-position: 0 6px; padding-left: 13px; list-style-type: none} /* フッター */ div#footer{background-image:url(○●.jpg); 　　　　　　background-repeat: no-repeat; width: 100%; margin-top: ; padding-top: 8px; clear: both} address{font-size: 0.75em; font-style: normal; text-align: center} </style> ・・・・・・・・ここまで指定 ここから、html打ち込み↓ <!-- フッター --> <div id="footer"align="center"> ～～テキスト文章～～<br> <address><big>～アドレスのテキスト～</address></big> <br>○○おなじくテキスト</div> <div align="center"> ～◆◆サイトの名前～　　 <img src="○○.jpg"border="0"bordercolor="#87ceeb"alt=""> <br><br> </body> </html> 少しいじると、おかしな反映になります、お助け下さい。

    • 締切済み
    • CSS
  • cssでtableを指定したい

    教えてください。 cssでテーブルを指定しているのですが、別の幅のテーブルを指定したいときはどうすればよいのでしょうか。 現在はこういうふうに書いています。ちょっと汚いですが。。。 ----------------------------- #content #main p{ margin:10px 18px 25px; font-size:12px; } #content #main table { border-collapse: collapse; background-color: #FFFFFF; width: 480px; margin:0px padding; border: 0px #000000: 1px; } #content #main caption{ text-align: right; padding-right: 5px; font-size:12px; } #content #main th { 　　　　border: #999999 1px solid; font-size:12px; font-weight: normal; background-color: #D8EAFC; 　　　　　padding: 5px; } #content #main td{ border-right: #999999 1px solid; border-top: #999999 1px solid; border-left: #999999 1px solid; border-bottom: #999999 1px solid; font-size:12px; text-align: left; 　　　　　padding: 5px; } ----------------------------- 実際にタグを書くときは、こう書いています。 ----------------------------- <table> <tr> <th>aaaa</th> <td>5555555555555555555555555555</td> </tr> </table> ----------------------------- これをmaintable　subtable　というふうに幅が違うものにしたいのですが、cssにmaintableを追加して、<table class=maintable">と指定しても、maintableではなく、tableで表示されます。 こういう場合はどうすればよいのでしょうか？

    • ベストアンサー
    • XML
  • 背景色を変更した所、文字が背景色と被って見づらく

    引き続き質問です。元からあった無料cssテンプレートは背景が黒く、 暗いイメージを持たれると困るとのことで白色の背景に変更しました。 すると、ホームページに記載されている文字が白色の為何が書いて あるか見えなくなってしまいました。 現在は全てのサイト上の文字に<font color="black">何でも</font> というタグを付けて応急措置を考えておりますが、元から文字の色を 全て黒色に指定することはできないものでしょうか。 HPは全くの素人で、どの部位を変更すると良いかご指南いただければ幸いです。 @charset "UTF-8"; /* --------------------- * FONTSIZE MODEL * * --------------------- * 63% -> 10pxに相当 * 70% -> 11pxに相当 * 75% -> 12pxに相当 * 82% -> 13pxに相当 * 88% -> 14pxに相当 * 94% -> 15pxに相当 * 100% -> 16pxに相当 * 107% -> 17pxに相当 * 113% -> 18pxに相当 * 119% -> 19pxに相当 * 125% -> 20pxに相当 * --------------------- */ /* ========BASIC======== */ html { overflow-y:scroll; } body { margin:0; padding:0; line-height:1.6; letter-spacing:1px; font-family:Verdana, Helvetica, sans-serif; font-size:13px; color:#fff; background:#FFF; } br { letter-spacing:normal; } a { color:#d1d1d1; text-decoration:none; } a:hover { color:#666; } img { border:0; vertical-align:bottom; } h1,h2,h3,h4,h5,h6 { margin:0; } /* ========TEMPLATE LAYOUT======== */ #top { width:780px; margin:0 auto; } #contents { float:left; width:780px; } #side { float:left; width:220px; background:#181818; padding:10px 0; } #main { float:right; width:540px; padding:10px 0; } #footer { width:540px; margin-left:240px; } /* ========SIDE CUSTOMIZE======== */ #side h1 { margin:0; font-size:24px; } #side h1 a { color:#fff; } #side h1 a:hover { color:#ddd; } #side div.section { margin:0 10px; } /* ========MENU CUSTOMIZE======== */ #menu ul { margin:0 auto; padding:10px 0; } #menu li { color:#333; text-align:center; list-style-type:none; } #menu li a { display:block; width:220px; color:#f1f1f1; line-height:60px; } #menu li a:hover { color:#f1f1f1; background:#2d2d2d url("../images/bg_menu.gif") 0 0 repeat; } /* ========MAIN CONTENTS CUSTOMIZE======== */ #main #pr p { margin:0; padding:5px 0; } #main #icatch { margin-bottom:10px; } #main a { color:#d1d1d1; } #main a:hover { color:#f1f1f1; text-decoration:underline; } #main h2 { margin-bottom:8px; padding:0 0 0 10px; font-size:15px; font-weight:bold; line-height:35px; border:1px solid #3e3e3e; background:#181818; } #main h3 { clear:both; margin:20px 0 8px 0; padding:0 0 0 5px; font-size:14px; border-left:5px solid #3e3e3e; } #main h4 { margin-bottom:2px; font-size:14px; border-bottom:2px solid #f1f1f1; } #main h5 { margin-bottom:2px; padding:2px 5px; font-size:13px; background:#3e3e3e; } #main h6 { margin-bottom:2px; font-size:13px; border-bottom:2px solid #3e3e3e; } #main p { margin:0 0 1em 0; } #main dt { margin-bottom:3px; } #main dd { padding:0; margin:0 0 0.5em 1em; padding:3px; color:#ddd; background:#181818; } /* INFORMATION CUSTOMIZE */ * html body #main dl.information dd div { display:inline-block; } #main dl.information dt { float:left; width:10em; margin:0; padding:0; color:#fff; } #main dl.information dd { margin:0 0 0.5em 10em; padding:0; color:#fff; background:transparent; } #main table { width:100%; border-collapse: collapse; } #main table th { padding:5px; font-size:12px; text-align:left; border:1px solid #ddd; background:#181818; } #main table td { padding:5px; font-size:12px; text-align:left; border:1px solid #ddd; } /* ========PAGETOP CUSTOMIZE========= */ #pageTop { padding:10px 0; text-align:right; font-size:11px; } #pageTop a{ padding:0 0 0 12px; background:url("../images/bg_pagetop.gif") 0 60% no-repeat; } /* ========FOOTMENU CUSTOMIZE======== */ #footMenu ul { margin:0; padding:10px 0 0 0; text-align:right; border-top:1px solid #b4b4b4; } #footMenu li { display:inline; margin:0 0 0 10px; list-style:none; } よろしくお願いします。

    • ベストアンサー
    • HTML
  • 左側に設置したバナーの縦の長さを小さくしたいです

    現在、無料cssテンプレートを使用して自社サイトを作成しています。 http://web-zen.sakura.ne.jp/index.html 左側のバナー関連が縦長になってしまい、しかし上司にはバナーの数を 減らす事はできないと言われ大変困っております。 そこで、バナーそのものの縦の長さを変更できないか質問してみます。 関係ありそうなcssのファイルの内容は、以下のとおりです。 @charset "UTF-8"; /* --------------------- * FONTSIZE MODEL * * --------------------- * 63% -> 10pxに相当 * 70% -> 11pxに相当 * 75% -> 12pxに相当 * 82% -> 13pxに相当 * 88% -> 14pxに相当 * 94% -> 15pxに相当 * 100% -> 16pxに相当 * 107% -> 17pxに相当 * 113% -> 18pxに相当 * 119% -> 19pxに相当 * 125% -> 20pxに相当 * --------------------- */ /* ========BASIC======== */ html { overflow-y:scroll; } body { margin:0; padding:0; line-height:1.6; letter-spacing:1px; font-family:Verdana, Helvetica, sans-serif; font-size:13px; color:#fff; background:#FFF; } br { letter-spacing:normal; } a { color:#d1d1d1; text-decoration:none; } a:hover { color:#666; } img { border:0; vertical-align:bottom; } h1,h2,h3,h4,h5,h6 { margin:0; } /* ========TEMPLATE LAYOUT======== */ #top { width:780px; margin:0 auto; } #contents { float:left; width:780px; } #side { float:left; width:220px; background:#181818; padding:10px 0; } #main { float:right; width:540px; padding:10px 0; } #footer { width:540px; margin-left:240px; } /* ========SIDE CUSTOMIZE======== */ #side h1 { margin:0; font-size:24px; } #side h1 a { color:#fff; } #side h1 a:hover { color:#ddd; } #side div.section { margin:0 10px; } /* ========MENU CUSTOMIZE======== */ #menu ul { margin:0 auto; padding:10px 0; } #menu li { color:#333; text-align:center; list-style-type:none; } #menu li a { display:block; width:220px; color:#f1f1f1; line-height:60px; } #menu li a:hover { color:#f1f1f1; background:#2d2d2d url("../images/bg_menu.gif") 0 0 repeat; } /* ========MAIN CONTENTS CUSTOMIZE======== */ #main #pr p { margin:0; padding:5px 0; } #main #icatch { margin-bottom:10px; } #main a { color:#d1d1d1; } #main a:hover { color:#f1f1f1; text-decoration:underline; } #main h2 { margin-bottom:8px; padding:0 0 0 10px; font-size:15px; font-weight:bold; line-height:35px; border:1px solid #3e3e3e; background:#181818; } #main h3 { clear:both; margin:20px 0 8px 0; padding:0 0 0 5px; font-size:14px; border-left:5px solid #3e3e3e; } #main h4 { margin-bottom:2px; font-size:14px; border-bottom:2px solid #f1f1f1; } #main h5 { margin-bottom:2px; padding:2px 5px; font-size:13px; background:#3e3e3e; } #main h6 { margin-bottom:2px; font-size:13px; border-bottom:2px solid #3e3e3e; } #main p { margin:0 0 1em 0; } #main dt { margin-bottom:3px; } #main dd { padding:0; margin:0 0 0.5em 1em; padding:3px; color:#ddd; background:#181818; } /* INFORMATION CUSTOMIZE */ * html body #main dl.information dd div { display:inline-block; } #main dl.information dt { float:left; width:10em; margin:0; padding:0; color:#fff; } #main dl.information dd { margin:0 0 0.5em 10em; padding:0; color:#fff; background:transparent; } #main table { width:100%; border-collapse: collapse; } #main table th { padding:5px; font-size:12px; text-align:left; border:1px solid #ddd; background:#181818; } #main table td { padding:5px; font-size:12px; text-align:left; border:1px solid #ddd; } /* ========PAGETOP CUSTOMIZE========= */ #pageTop { padding:10px 0; text-align:right; font-size:11px; } #pageTop a{ padding:0 0 0 12px; background:url("../images/bg_pagetop.gif") 0 60% no-repeat; } /* ========FOOTMENU CUSTOMIZE======== */ #footMenu ul { margin:0; padding:10px 0 0 0; text-align:right; border-top:1px solid #b4b4b4; } #footMenu li { display:inline; margin:0 0 0 10px; list-style:none; } #footMenu li a { padding-left:10px; background: url("../images/bg_footmenu.gif") 0 50% no-repeat; } よろしくお願いします。

  • blog CSSのタイトル色の変更指定について！！

    このblog CSSのブログタイトルの色変更はどうすればいいですか？ .blogtitle　の所で色指定してもダメでした？他に方法があるのですか？ livedoor Blog CSS FileName: ネコさん(20040819) Version: 2006.06.26 ----------------------------------------------------- */ #header{} #header td{ color:#FFF; font-size:12px; text-align:right; padding-right:10px; } #header a:link{color:#FFF;} #header a:visited{color:#FFF;} #header a:active{color:#FFF;} #header a:hover{color:#FFF;text-decoration:none;} body{ margin:0; padding:0; text-align:center; font-family: verdana ,arial ,sans-serif; background-color: #4d9d1c; /*background:#4d9d1c url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/bg.gif') repeat-y 50% 0;*/ } a{color:#666;text-decoration:underline;} a:link{color:#666;text-decoration:underline;} a:visited{text-decoration:underline;} a:active{} a:hover{color:#666;text-decoration:none;} #container{ width:833px; margin:0 auto; text-align:left; word-break:break-all; background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/header.gif') no-repeat; } #banner,#subbanner{ width:833px; height:185px; margin:0 auto 35px;; } #banner a{color:#fff;text-decoration:none;} #banner a:link{color:#fff;text-decoration:none;} #banner a:visited{text-decoration:none;} #banner a:active{} #banner a:hover{color:#fff;text-decoration:underline;} #subbanner a{color:#fff;text-decoration:underline;} #subbanner a:link{color:#fff;text-decoration:underline;} #subbanner a:visited{text-decoration:underline;} #subbanner a:active{} #subbanner a:hover{color:#fff;text-decoration:none;} h1,h2,h3{margin:0;padding:0;} .blogtitle{ font-size:20px; font-weight:bold; padding-top:85px; padding-right:70px; text-align:right; } .description{ color:#000; font-weight:bold; font-size:12px; padding-right:70px; text-align:right; } #categorytitlebody{} #categorytitle{ font-size:14px; font-weight:bold; text-align:center; padding:20px 10px 15px 10px; } #blogcontainer{width:755px;margin:0 auto auto 20px;background-color:#FFF;} #content{ width:564px; float:left; padding-left:10px; text-align:left; padding-bottom:50px; } #links{ width:170px; float:right; padding-bottom:50px; } .blog{} .date{ color:#4d9d1c; font-size:14px; font-weight:bold; text-align:left; margin-bottom:5px; } .title{ font-size:14px; font-weight:bold; text-align:left; background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/nikukyu.gif') no-repeat 0 50%; padding-left:26px; } .blogbody{ line-height:130%; text-align:left; background-color:#f3f1e2; padding:10px 0px 0px 10px; } .main,.mainmore,.portal-links{ line-height:150%; font-size:12px; padding:18px 10px 30px 26px; } blockquote{ padding:5px; margin:5px; border:2px dotted #4d9d1c; } .pict{margin:5px;} .posted{ color:#000; font-size:11px; text-align:left; margin:0; padding:10px 15px 10px 26px; } a.posted{color:#000;text-decoration:underline;} a.posted:link{color:#000;text-decoration:underline;} a.posted:visited{text-decoration:underline;} a.posted:active{} a.posted:hover{color:#000;text-decoration:none;} .menu{ font-size:11px; text-align:right; padding:2px 15px 20px 26px; } .blogbodybottom{ margin-bottom:20px; } .comblogbodybottom{ margin-bottom:20px; } #contentcommentbottom{} .formbodybottom{} #articletop{} #articlebody{} #articlebottom{} .trackbackurlbody{ text-align:left; padding-left:10px; } .trackbackurlttl{ background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/nikukyu.gif') no-repeat 0 50%; font-size:12px; font-weight:bold; padding-left:26px; } .trackbackurl{ padding-top:10px; padding-bottom:20px; text-align:left; } .trackbackurl table{width:350px;margin:0 auto;} input.trackbackbox{width:300px;} .trackbackurlbottom{} a.posttitle:link{color:#000;text-decoration:underline;font-si

    • 締切済み
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する