- ベストアンサー
CSSが反映されない問題について
Bnbnbnta101の回答
- Bnbnbnta101
- ベストアンサー率7% (41/516)
まずhtmlタグが二個ありますね。 そういうときはbody{color:red}位にしたほうが良いですよ。 htmlファイルも然りです。中身盛りすぎです。
関連するQ&A
- CSSが正確に反映されません。
４つの枠を丸で囲み、かつそれぞれの枠を等間隔で空けたいと思います 丁度以下の2つを表示した場合の、contentsとmainの間の間隔が理想的です。 しかし書いたCSSの設定が正確に反映されません。 headerとfooterもこの大きさで広げたいと思うのですが、広がりません。 また、なぜheaderは丸くならず、footerはサイズからはみ出すのでしょうか。 背景を赤に設定しているのですが、それも反映されません。 なぜこうなるのかどなたかご存知の方、ご指摘いただけると助かります。 どうかよろしくお願いします。 以下、2つのファイルは同じフォルダに保存しました。 dreamweaverのアカデミック版で作り、firefox3.6.13で表示しています。 style.css ---------------------------------------------------------- @charset "utf-8"; /* CSS Document */ <!-- * { margin:0; padding:0; } h1, h2, p { margin: 0 1em; } <!--背景の設定--> body { background-color: red; } <!--コンテンツの幅を指定--> #wrapper, #main, #header, #menu, #footer { width:1120px; } <!--角を丸くする--> #header, #menu, #contents, #footer { background-color: #66FFFF; border:2px solid #999; padding: 8px; margin-bottom:5px; -webkit-border-radius: 5px; /* Safari,Google Chrome用 */ -moz-border-radius: 5px; /* Firefox用 */ } <!----> #wrapper { margin: 0 auto; line-height: 1.5; } #main { } #header { height: 50px; } #menu { width: 160px; float: left; } #menu ul { list-style: none; margin-left: 1em; } #contents { float: right; width: 900px; } #footer { clear: both; height: 50px; text-align: center; } --> ------------------------------------------------------------------------------------ index.html ------------------------------------------------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"><head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>勉強用</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wrapper"> <div id="header"> <h1>Site Title</h1> </div> <div id="main"> <div id="menu"> <p><strong>float:left</strong></p> <ul> <li>Menu</li> <li>Menu</li> </ul> </div> <div id="contents"> <h2>Sub Title</h2> <p><strong>float:left</strong></p> <h2>Sub Title</h2> <p>text</p> </div> </div> <div id="footer"> <p>Footer</p> </div> </div> </body> </html>
- 締切済み
- CSS
- ＣＳＳが反映されません
勉強不足は承知ですが、もうどうにもお手上げ状態です。 質問させてください。 ＣＳＳを勉強しているのですが、反映されません （本や、サイトのサンプルとおり記述しても、です） （タグ、スペルの間違いがないかは１０回以上確かめています） （ＣＳＳサイトのサンプルをクリックすると、それは表示されます） ●ヘッダー内に指定すると、反映されない ○例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html;charaset=shift_JIS"> <meta http-equiv="Content-Type" content="tet/css"> <style type="text/css"> <!-- p.ehon{ font-size:100px; color:red; } --> </HEAD> <BODY> <p.ehon> 「絵本」の色は赤色です </p> </BODY> </HTML> ・・・結果・・・ ブラウザには標準フォント（色、サイズ）で ”「絵本」の色は赤色です” と表示される 文字色は font-color:red font-color:#rbg番号 などしてみても、黒のまま 文字サイズも３０ｐｘ、５０ｐｘ、１００ｐｘとしてみているが、結果は同じ文字サイズ （標準）になる ○<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html;charaset=shift_JIS"> <meta http-equiv="Content-Type" content="tet/css"> <style type="text/css"> <!-- body{color:#CCFFCC} h1{color:#996633} --> </HEAD> <BODY> <h1> 絵本の色は赤色です </h1> </BODY> </HTML> ・・・結果・・・ ブラウザになにも表示されない ●ＢＯＤＹ内指定 ○例 <div style="color:red"> 絵本の色は赤色です </div> ・・・結果・・・ フォントサイズ標準で、文字色赤で表示されました ○例 <div style="color:red;font-size:50px;"> 絵本の色は赤色です </div> ・・・結果・・・ ブラウザに何も表示されませんでした ○２回目 <div style="color:red;font-size:50px;"> 絵本の色は赤色です </div> ・・・結果・・・ フォントサイズそれなりの大きさに。文字色は赤で表示されました ○３回目 全く同じタグでブラウザには何も表示されず・・・・ ///////////////////////////////////////////////////////////// いったい何が問題なのでしょうか。 こんなところで足止めされているのが悲しいです・・・
- ベストアンサー
- その他（インターネット・Webサービス）
- CSS backgroundが反映されません
CSS初心者です。 CSSレイアウトで問題にぶつかりました。 下記CSSをIE6で見るとbodyに書いた 「background-image:url(images/flower.png); 」が反映されません。 IE10では反映されました。 いったい何故でしょうか。。。 調べてみたのですがいまいち分かりませんでした。 よろしくお願いいたします。 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ * { margin:0; padding:0; } body { background-image:url(images/flower.png); background-repeat:no-repeat; background-position:bottom; background-attachment:fixed; background: rgb(#00000); color: rgb(76, 76, 76); } body{ text-align:center; } div#container { background-image:url(images/sora.jpg); background-repeat:no-repeat; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; } div#container{ width: 770px; margin: 0 auto; text-align: left; border: 3px solid rgb(228, 225, 219); } .photo{ margin: 0px; padding: 0px; left: 600px; top: 970px; width: 141px; position: absolute; } .photo2{ margin: 0px; padding: 0px; left: 400px; top: 970px; width: 141px; position: absolute; } p { line-height: 2em; font-size: 0.8em; } .p1{ font-weight: bold; letter-spacing: 0.1em; } .h1{ text-align: center; } h1 span { display:none; } h2 span { display:none; } h3 { line-height: 1.2em; padding-top: 2.4em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } h3 { background-image:url(images/h3.png); background-repeat:no-repeat; background-position:0px 35px; padding-right: 40px; padding-left: 30px; } h2 { line-height: 1.3em; padding-top: 1em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } a{ color:#0000ff; font-style:normal; text-decoration:underline; } a:link { color: rgb(90, 120, 255); font-style:normal; text-decoration:underline; } a:visited { color: rgb(165, 188, 255); text-decoration:underline; } a:hover { color:#ff0000; font-style:normal; text-decoration:underline; } acronym { border-bottom-color: currentColor; border-bottom-width: medium; border-bottom-style: none; } #intro { padding: 0px 79px 0px 86px; } #participation p { padding-right: 40px; padding-left: 10px; } #intro { padding-top: 50px; } #preamble p { padding-right: 40px; padding-left: 15px; } #explanation p { padding-right: 40px; padding-left: 15px; } #preamble { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #explanation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #participation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #benefits { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #requirements { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #quickSummary p{ padding-right: 40px; padding-left: 10px; } #footer { text-align: center; line-height: 1.5em; padding-top: 10px; padding-bottom: 40px; font-size: 0.9em; } #footer a:link { color: rgb(133, 126, 112); } #footer a:visited { color: rgb(133, 126, 112); } #footer a:hover { color: rgb(133, 126, 112); } #footer a:active { color: rgb(133, 126, 112); }
- ベストアンサー
- 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が反映されていたのに、先日からいきなりCSSが反映されなくなり原因が分からず困っています。 当方、コードは読める位の超初心者レベルです。。 因みに、コードは下記のようになっています。（途中省略してあります）また、Dreamweaver8を使用しています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta name="copyright" content="Nikukyu-Punch" /> <title>自社サイト</title> <meta name="description" content="○○" /> <meta name="keywords" content="○○" /> <link href="style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- .style2 {font-size: 16px} .style8 {color: #3366FF} .style11 {color: #b65313; font-size: 14px; } .style12 {color: #b65313} --> </style> </head> <body> <div id="container"> <div id="header"> <h1>○○</h1> <a href="index.html"><img src="images/logo1.gif" alt="○○" name="logo" width="653" height="114" id="logo" /></a></div> <!--/header--> <div id="contents"> <div id="wrap"> <div id="main"> <h2>○○</h2> <br /> <p >○○</p> <div class="item-box"><img src="images/item/3401.jpg" alt="○" width="164" height="164" /><div class="box-btn3"><a href="○"><img src="images/new1.gif" alt="new" />○○<br /> </a></div> </div> <div class="item-box"><img src="images/item/3403.jpg" alt="○○）" width="164" height="164" /> <div class="box-btn3"><a href="○○">○○</a></div> </div> </div> <!--/main--> <div id="sub"> </div> <!--/wrap--> <div id="side"> <!--/side--> <div id="footer"> Copyright(C)○○ All Rights Reserved.<br /> </div> <!--/footer--> </div> <!--/contents--> </div> <!--/container--> </body> </html> ---------------------CSS----------------------------------- @charset "shift_jis"; body { font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 90%; line-height: 2; color: #333333; margin: 0px; padding: 0px; text-align: center; } /*コンテナー ---------------------------------------------------------------------------*/ #container { text-align: left; width: 1091px; margin-right: auto; margin-left: auto; border-top: 5px solid #ff476d; background-color: #FFFFFF; } /*３カラムを囲むボックス ---------------------------------------------------------------------------*/ #contents { clear: left; width: 100%; } /*左・中央を囲むボックス ---------------------------------------------------------------------------*/ #wrap { width: 897px; float: left; padding-bottom: 50px; margin-top: 20px; } /*中央ブロック ---------------------------------------------------------------------------*/ #main { float: right; width: 703px; } #main .item-box{ foat:left; width:200px; height:300px; border:1px #CCCCCC solid; padding:5px 5px 0px 5px; float: left; margin-top: 0px; margin-right: 6px; margin-bottom: 15px; margin-left: 15px; } #main .item-box img{ /*margin: 5px 0px 5px 5px;*/ margin-left:15px; border:solid #cccccc 1px; } #main .box-btn3 { font-size:10px; color: #333333; width:164px; text-align:center; padding: 0px 0px 0px 0px; margin-left:15px; border:1px #CCCCCC solid; } /*フッター ---------------------------------------------------------------------------*/ #footer { clear: both; width: 100%; text-align: center; border-top: 1px solid #bfbfbf; padding-top: 1em; padding-bottom: 1em; } どなたかご教授頂けたら助かります
- 締切済み
- デザイナー・クリエイティブ職
- CSSが反映されなくて困っています。
アメブロでカスタマイズをしています。 いろいろ追加したり修正したりしていましたら、 何もしていないコメント欄の文字すべてが 急に大きくなってしまいました。 ネットで調べたＣＳＳ /*コメントタイトル*/ #comment_module .title{ font-size:12px; } /*コメントラベル*/ #comment_module .label{ font-size:12px; } /*名前*/ .comment_footer span.comment_author{ font-size: 12px; } /*日付*/ .comment_footer span.comment_date{ font-size: 12px; } /* コメント */ #comment_module .each_comment{ font-size:12px; } を入れてみましたが、変わりません・・。 キャッシュも削除しましたし、とじかっこも抜けていないと思います。 教えてください。よろしくお願い致します。
- 締切済み
- HTML
- 外部CSSがIEで無反映
Web制作初心者です。 ポートフォリオとしてサイトを2つくらい作ったのですが、2つとも Google Chromeで表示確認をしていて、出来上がってから Internet Explorerでも表示確認をしてみたら、IEでは 外部CSSが全く反映されていない状態でした。 何がダメなのか全くわかりません。 お手数ですがご助言お願い致します。 ------------HTML----------------- <!doctype html> <html> <head> <meta charset="text/html; charset=utf-8"> <meta name="descrption" content=""> <meta name="keywords" content=""> <link rel="stylesheet" type="text/style" href="common.css"> <link rel="stylesheet" type="text/style" href="index.css"> <title> Profile-TOP- </title> </head> <body> <div id="wrapper"> <!--*************ヘッダー部分*************--> <div id="header"> <h1>My Profile Site</h1> <!--ナビゲーション部分--> <div class="navi"> <ul> <li class="top">TOP</li> <li><a href="profile.html">Profile</a></li> <li><a href="design.html">Design</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div><!--/navi--> </div><!--/header--> <!--************コンテンツ部分************--> <div id="content"> <a href="profile.html"><img src="images/NY.png" alt="ny"></a> <p class="please">↑<br>Please click the image!</p> <p class="site">当サイトは私のプロフィールやポートフォリオを掲載しています。</p> </div><!--/content--> <!--*************フッター部分*************--> <div id="footer"> <p>Copyright © 2013 nnn All Rights Reserved.</p> </div><!--/fotter--> </div><!--/wrapper--> </body> </html> --------------CSS----------------- -----common----- /*----------body部分---------*/ * { font-family: serif; } body,html { background: url("images/wood_texture4.jpg") ; color: #ffffcc; margin: 0; padding: 0; line-height: 20px; height: 100%; } img { border: none; } /*--------wrapper--------*/ #wrapper { width: 900px; margin: 0 auto; padding: 0; } /*---------header---------*/ #header { background-color: #000000; margin: 0; height: 120px; padding-top: 1px; } h1 { float: left; font-size: 40pt; padding-top: 10px; padding-left: 30px; padding-right: 60px; width: 440px; margin-top: 0; margin-right: 30px; } .navi ul { margin-top: 0; } .navi ul li { list-style-type: none; float: left; width: 80px; margin-top: 28px; margin-right: 2px; padding: 6px 10px; text-align: center; background-color: #151515; font-weight: bold; } a:link { color: #cccccc; text-decoration: none; } a:visited { color: #cccccc; } a:hover { color: #ff6600; } /*------------content---------------*/ #content { background-color: #6e6e3c; clear: left; color: #000000; margin: 0; height: auto; } /*-------footer-------*/ #footer { background-color: #000000; height: 40px; padding: 10px; clear: both; padding-right: 20px; margin-top: 0; margin-bottom: 0; } #footer p { text-align: right; vertical-align: middle; } --------index.css--------- /*content*/ #content img { position: relative; left: 50px; } p { text-align: center; margin-bottom: 0; } .please { color: #ffffff; font-weight: bold; font-size: 15pt; } .site { padding-bottom: 20px; } /*現在のページナビ*/ .top { color: #990000; }
- ベストアンサー
- CSS
- CSS font-size について
cssでfont-sizeを指定したのに反映されなくて困っています。（スクリーンショットをとって確認したところ） 12pxと13pxは11px 14pxと15pxは13px 16pxは15pxになってしまいます。 プログラムは次のように打ちました。お願いします。 <HTML> <HEAD> <TITLE>無題ドキュメント</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <STYLE type="text/css"> <!-- h1 { font-size: 12px; font-weight: normal} h2 { font-size: 13px; font-weight: normal} h3 { font-size: 14px; font-weight: normal} h4 { font-size: 15px; font-weight: normal} h5 { font-size: 16px; font-weight: normal} --> </STYLE> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000"> <h1>春夏秋冬 12px</h1> <h2>春夏秋冬 13px</h2> <h3>春夏秋冬 14px</h3> <h4>春夏秋冬 15px</h4> <h5>春夏秋冬 16px</h5> </BODY> </HTML>
- ベストアンサー
- HTML
- cssで3カラムを実現したいのですが・・・
cssで3カラムを実現したいのですが、左メニューがカラム落ちします。 素人なので、あるサイトを見本にした所、左メニューがカラム落ちしてしまいます。 原因がわかりませんので、わかる方どうか助けてください。 -------html--------- <body> <div id="page"> <div id="header"> <div class="inner"> <p>#header</p> </div> <!-- / #header--></div> <div id="container"> <div id="contents"> <div id="main"> <div class="inner"> <h2>#main</h2> <p>メイン</p> <p>testてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテスト</p> <p>testてすとテスト</p> <p>testてすとテスト</p> <p>testてすとテスト</p> <p>testてすとテスト</p> <p>testてすとテスト</p> <p>testてすとテスト</p> <p>testてすとテスト</p> <p>testてすとテスト</p> </div> <!-- / #main--></div> <div id="sub"> <div class="inner"> <h2>#sub</h2> </div> <!-- / #sub--></div> <!-- / #contents--></div> <div id="ex"> <div class="inner"> <h2>#ex</h2> </div> <!-- / #footer--></div> <!-- / #container--></div> <div id="footer"> <div class="inner"> <h2>#footer</h2> </div> <!-- / #footer--></div> <!-- / #page--></div> </body> </html> -------css--------- body { margin:30px 0 0 0; background:#EEE; color:#000; line-height:1.5; text-align:center; font-size:small; font-family:verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; } *:first-child + html body { font-family:"メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; } html { overflow-y:scroll; } h1,h2,h3,h4,h5,h6 { font-size:medium; letter-spacing:.1em; } p { margin:0 0 10px; } img,fieldset { border:0; } .inner { padding:10px; } /* by */ .by { position:absolute; bottom:10px; right:10px; margin:0; padding:5px; background:#FFF; } /*----------------------------------------------- __page -----------------------------------------------*/ #page { width:90%; min-width:600px; margin:0 auto; text-align:left; } /*----------------------------------------------- __header -----------------------------------------------*/ #header { background:#000; color:#FFF; } /*----------------------------------------------- __container -----------------------------------------------*/ #container { float:left; width:100%; background:#999999; } /*----------------------------------------------- __contents -----------------------------------------------*/ #contents { } /* __main ------------------------------------------*/ #main { float:left; width:100%; } #main .inner { margin:0 200px 0 180px; background:#FFF; } /* __sub ------------------------------------------*/ #sub { float:left; width:150px; margin-left:-200px; background:#009999; } /* __ex ------------------------------------------*/ #ex { float:left; width:150px; margin-left:-100%; background:#CCCC00; } /*----------------------------------------------- __footer -----------------------------------------------*/ #footer { clear:both; background:#000; color:#FFF; }
- ベストアンサー
- HTML
- HTMLの構造
HTML初心者です。 テキストでHTMLの構造が <html> <head> </head> <body> <header> </header> <main> </main> <footer> </footer> </body> </html> となっているのに対して、 スタイルシートは、 html, body { font-size : 16px ; color : black ; } となっているのを見ましたが、このスタイルシートは、 html { font-size : 16px ; color : black ; } ではだめなのでしょうか。 一番外側であるhtmlタグを指定すれば、 bodyタグ内もすべて含むのではないのでしょうか。 よろしくお願いいたします。
- ベストアンサー
- CSS
お礼
何が問題だったのか分からなかったので、やむなくファイルをすべてコピーアンドペーストしました。（初心者だから、タグの内容も多くはないですし）。 どの辺が原因なのか分かってる場合は、余計なタグは省略することにしますね。ご回答ありがとうございました。