- ベストアンサー
外部CSSの一部が反映されません。
ホームページビルダーとメモ帳でサイトを作っています。 外部スタイルシートを指定したのですが、一部分だけ反映されません。 反映されないのは下二行のテーブルへのclass指定です。 CSSは以下になります。 * { margin : 0 ; padding : 0 ; } body{ width :100% ;} body,table {font:normal 13px;} table {margin : 0 ; padding : 0 ;} #my_body { margin: 0 auto; width : 700px ; } #my_navigation { float : left ; width : 150px;} #my_contents { float : left ; width : 550px ;} #my_header { width : 100% ; height : 97px;} #my_footer { width : 100% ; clear : both;} /*リンク*/ A:HOVER{color : #006500;text-decoration : none;} A{color : #00a600;text-decoration : none;} /*指定テーブル内*/ table.a01{width:150;background-color:#cccccc;} html内には <TABLE class="a01"> のように記述しています。 試しにCSSの下一行以外の全ての記述を削除してみても反映されません。 tableでなく、tdで指定してみても反映されません。 ビルダーのページ指定画面では反映されるのですが、プレビュー画面や アップロード後のIE7やFierfoxで見ると反映されていません。 同じ記述をhtml内に<style type="text/css">で指定すると反映されます。 CSSに詳しい方いらっしゃいましたら、どうかよろしくお願い致します。
- yuzu38
- お礼率84% (11/13)
- ホームページ作成ソフト
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
body,table {font:normal 13px;} ↓ body,table { font:normal 13px "ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3",Osaka,sans-serif; } font-family は省略することができません http://www.htmq.com/style/font.shtml 蛇足： table.a01 {width:150;background-color:#cccccc;} widthは単位をつけて指定しましょう
その他の回答 (1)
- shadowdragon
- ベストアンサー率55% (20/36)
こんにちわ。 HTMLの先頭部分はどのようになっていますか？ 推測ではありますが、XMLの宣言を追加することによって反映される場合があります。 小粋空間: CSS のフォントサイズ指定が table に反映されない問題 http://www.koikikukan.com/archives/2006/07/24-021206.php あとはIDでの指定時にはCSS側は#で始まりますが、そのように指定されていますでしょうか？ 私も精通しているわけではないのでハッキリとは申し上げられませんが、 table.a01{width:150;background-color:#cccccc;} を #a01 {width:150px;background-color:#cccccc;} にして <table id="a01"> ではいかがでしょうか。
お礼
解決いたしました。 /*指定テーブル内*/ 部分を消したら何故か反映されました。 /**/はちゃんと半角なのですが、中に全角の文字を 入れると何故かバグるようです。 /*リンク*/の方はちゃんと大丈夫なんですが… ご回答頂き有難うございました。
補足
こんにちは、回答有難うございます。 一行目は <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> です。 また、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> にしても変化はありませんでした。 そして残念ながら、XMLの宣言を追加しても、idでの指定に してみても、反映されませんでした。
関連するQ&A
- MacからアップしたCSSがWinで反映されな
こんにちは。現在、Macでホームページを作っています。 その際、CSSでレイアウトやフォント等を設定したのですが、アップロードしたCSSがWindowsでは反映されません。Macではすべてしっかり反映されています。 ブラウザごとの振り分け等、色々と調べて試しましたが変わりませんでした。 どこかおかしなところがあれば指摘、アドバイスの方よろしくお願い致します。 ↓<head></head>内 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>（タイトル）</title> <link rel="stylesheet" type="text/css" href="main.css"> ↓main.css * { margin: 0; padding: 0; } body,table,tr,td { font-size: 10px; font-family: "Times" ""Osaka"; line-height: 160%; text-align: left; } a:link {color: #000000; text-decoration: none; } a:visited {color: #000000; text-decoration: underline; } a:active {color: #000000; text-decoration: underline; } a:hover {color: #000000; text-decoration: none; } #layout { width: 650px; margin-top: 10px; margin-left : auto; margin-right : auto; text-align : center; } .header { margin: 5px 0px 3px; padding: 20px 10px; border: 1px solid #c0c0c0; background-image: url("（画像URL）") } #main { float: left; width: 436px; margin: 10px 14px 0px 0px; } .entry { border: 1px solid #c0c0c0; margin: 0px 0px 14px 0px; padding: 10px 30px; overflow: auto; } .entry_navi { text-align: left; } .entry_title { font-size: 13px; font-family: "Times"; border-bottom: 1px dashed #c0c0c0; color: #000000; } #side { float: right; width: 200px; margin: 10px 0px ; } .pict { margin: 15px 0px; padding: 8px; border: 1px solid #c0c0c0; } h1 { font-size: 20px; font-weight: bolder; font-family: "Times"; margin: 0px 0px 5px 0px; padding: 0px; color: #ffffff; } h1 a, h1 a:link, h1 a:visited, h1 a:active, h1 a:hover { color: #ffffff; text-decoration: none; } .description { font-size: 10px; color: #ffffff; padding-bottom: 30px; } .list { border: 1px solid #c0c0c0; margin: 0px 0px 14px 0px; padding: 10px 20px; } .list_title { font-family: "Times"; font-size: 16PX; font-weight: bolder; color: #000000; border-bottom: 1px dashed #C0C0C0; }
- ベストアンサー
- CSS
- 外部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と HEAD内のCSSの違い
現在、macで Dreamweaver8を使用してHPを作っています。 外部のcssがうまく反映されません。 そこで、head内に同じcssを入れたところ、きちんと反映されました。 どうして違いがでるのか教えてください。 『head内に入れた時』 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <style type="text/css"> body { font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; font-weight: normal; background-position: center; padding: 0px; margin: 0px; } #page { background-color: #009900; height: 800px; width: 760px; margin-right: auto; margin-left: auto; position: relative; top: 0px; } #title { background-color: #CCFF00; height: 120px; width: 700px; position: relative; left: 0px; top: 0px; margin-right: 15px; margin-left: 15px; padding-right: 15px; padding-left: 15px; } </style> </head> <body> <div id="page"> <div id="title"> </div> </div> </body> </html> 『外部cssの時』 [styel.cssは] body { font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; font-weight: normal; background-position: center; padding: 0px; margin: 0px; } #page { background-color: #009900; height: 800px; width: 760px; margin-right: auto; margin-left: auto; position: relative; top: 0px; } #title { background-color: #CCFF00; height: 120px; width: 700px; position: relative; left: 0px; top: 0px; margin-right: 15px; margin-left: 15px; padding-right: 15px; padding-left: 15px; } [反映されるhtmlは] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="page"> <div id="title"> </div> </div> </body> </html> です。 誰かお答えくださいませ。
- ベストアンサー
- Mac
- FireFoxでCSSのボーダーが反映されません
FireFoxでのCSS表示について教えて下さい。 現在、IEでは見れるものがFireFoxで反映されておりません。 どこかに原因があるとは思うのですが、見つからないのです。。。涙 Bodyとページ全体のCSS、及び問題箇所のCSSを記述します。 #body { margin: 0px; width: 100%; padding: 0px; border: 0px; height: auto;} #page { background-color: #ffffff; width: 746px; height: auto; margin: 0px; padding: 0px; border-collapse:collapse; border: 0px; border-spacing:0px;} #page td {line-height: 120%; font-size: 12px; color: #000000;} #contents1 {width: 746px; border-collapse:collapse; border-spacing:0px; margin:0px 0px 5px 0px;} border: 1px solid #666633; #contents td {font-size: 12px; line-height: 120%; color: #000000; padding-top: 2px; padding-bottom: 2px;} #contents2 {width: 350px; height: 45px;} #contents2 td { border: 1px solid #999999; font-size: 12px;} ※contents1は外枠のみボーダーカラーをつけたいと思います。 contents2では、tdのみ枠をつけて、外枠は表示させたくありません。 (大枠の中にいくつか枠付きの行が表示される状態にしたいです) idではなくclassにする方が良いのでしょうか？ CSSについては独学なので、記述もほとんどDW頼りです。 参考サイトなどご存知でしたら教えて下さい。。。 以上、よろしくお願いいたします。
- ベストアンサー
- CSS
- 外部CSSの読み込みがうまくできない
<head>～ <link href="basic.css" rel="stylesheet" type="text/css"> ～</head> ↓basic.css body{font-size:80%;color:#4a4a4a;} a:link{color:#004a95;text-decoration:none;} a:visited{color:#950095;text-decoration:none;} a:hover{color:#ff80c0;text-decoration:none;} という感じで外部CSSを読み込んでいるのですが、 ブラウザのoperaやfirefoxだとbody{font-size:80%;color:#4a4a4a;}の所だけ反映されません。 IEだとその部分も反映されます。 cssファイルに修正箇所があるのでしょうか？ それとも外部cssを読み込むhtmlファイルの方に追加して記述しなければいけないタグがあるのでしょうか？
- ベストアンサー
- CSS
- CSSを使いたいのですが上手くいきません
テーブル型のメニューを マウスオンで背景の色を変えたいのですが… CSSの解説HPを見たのですが、どこの記述に誤りがあるのか 恥ずかしながら分かりません。 お分かりになる方いらっしゃいましたら、ご教授お願い致します。 <html> <head> <meta Http-equiv="content-type" Content="text/html; charset=Shift_JIS"> <title>テスト</title> <style type="text/css"> <!-- container{ width:100px;} container ul{ margin:0; padding:0; list-style:none; border-top:1px solid #666666; border-left:1px solid #666666; font-size:small; line-height:150%; border-right:1px solid #666666;} container ul li{ margin:0; padding:0; display:inline;} container ul li a{ margin:0; padding:5px 0; width:180px; display:block; text-align:center; color:#000000; text-decoration:none; background:#CCCCCC; border-bottom:1px solid #666666;} container a:hover{ color:#FFFFFF; text-decoration:none; background:#666666;} --> </style> </head> <body> <div id="container"> <ul> <li><A Href="01.html" Title="test">test1</A></li> <li><A Href="02.html" Title="test">test2</A></li> </ul> </div> </body> </html>
- ベストアンサー
- その他（インターネット・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
- CSS3の記述の一部が反映されない。
職業訓練のグループ課題で、ウェブサイトを造っているのですが、CSS３の記述が反映されない所がありまして、marginやpaddingでやっても無理でした。「．」と「＃」の違いかなとも思ったのですが全然反映されませんでした。 divタグも考えられる並べ方を試したのですが実行されませんでした。 不躾な質問ですがよろしくお願いします。 問題点 HTML <div id="copyright">をmarginを使い真ん中に、fontを白文字の太文字に装飾 結果 copyrightだけ反映されない。 以下ソースコード ○HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="chat noir,シャノワール,神奈川,箱根,生活雑貨,雑貨,木製、布ナプキン,タオル,かご,ほうき,道具,暮らし,ナチュラル,ハンドメイド,ネットショップ,ヘアゴム,黒猫,インテリア"> <meta name="description" content=" chat noirはフランス語で黒猫の意味です。自然素材を使った布ナプキン、ヘアゴム、ポーチなどのハンドメイド雑貨や、暮らしにちょっぴり彩りを添えるシンプルナチュラルな生活雑貨を取り扱っています。"> <title>【chat noir】生活雑貨と自然素材を使ったハンドメイド雑貨のお店</title> <style>/*CSS*/</style> <script>/*JavaScript コード*/</script> <link rel="stylesheet" href="css/cahtnoir.css" type="text/css" media="all"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"></script> <style type="text/css"></style> </head> <body id="body"> <div id="footer"> <div class="inner"> <ul> <li><a href="index.html">TOPへ戻る</a></li> </ul> <div id="copyright">Copyright Chat noir 2013 All Rights Reserved.</div> </div><!--inner--> </div><!--footer--> </body> </html> ○CSS3 @charset"utf-8"; #footer{ width:1060px; padding:0; margin:0; float:left; list-style-type: none; } #footer li{ width:20%; list-style: none; text-align:center; } #footer li a{ width:auto; color:#fff; font-size:18px; font-weight:bold; padding:35px 0 35px; text-decoration:none; display:block; background:url(../img/footer-link01.png) no-repeat; } #footer a:hover{ background:url(../img/footer-link02.png) no-repeat; .copyright{ margin-left:300px; } ※HTML、CSS３の記述はこれ以外にもあります。
- ベストアンサー
- HTML
- html { } CSS設定の解釈を教えて下さい
お世話になります。 あるサイトのCSS設定が↓のようになっていました。 +------------------------------------------------------------------ html { margin: 0; padding: 0; min-width: 700px; } body { margin: 0; padding: 0; min-width: 800px; } +------------------------------------------------------------------ bodyの指定はわかるのですが、htmlにCSSをするのは 初耳です。また、min-widthの値が、bodyの同値より 少ないのですが、これは、どういった解釈になるのか、 教えて下さい。 よろしくお願いします。
- ベストアンサー
- HTML
- CSSが反映されない！ソース公開
なぜかCSSが表示されずに困っています。 解決方法をご指導願います。 CSS↓（ファイル名screen.css） * { margin: 0; padding: 0; list-style: none; text-decoration: none; } body { margin: 25px 0 25px 0; font: normal 11px Trebuchet MS, Sans-serif; background: #000; color: #999; text-align: center; } #container { width: 320px; margin-left: auto; margin-right: auto; border: 1px solid #666; padding: 250px 25px 25px 25px; background: url("../images/top.jpg") no-repeat; text-align: left; } h1 { font: normal 20px Georgia, Sans-serif; margin-left: 45px; margin-bottom: 20px; } h1 span.highlight { color: #efefef; } h1 span.small { font-size: 11px; color: #333; } h2 { margin-top: 15px; margin-left: -25px; padding-left: 20px; border-left: 5px solid #666; font: bold 11px Trebuchet MS, Sans-serif; } INDEX.HTML↓（前半部分のみです） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="styles/screen.css" media="screen"> </head> <body> はじめてのHP作成です。凡ミス等ご指導よろしくお願いします。
- ベストアンサー
- HTML
お礼
解決いたしました。 /*指定テーブル内*/ 部分を消したら何故か反映されました。 /**/はちゃんと半角なのですが、中に全角の文字を 入れると何故かバグるようです。 /*リンク*/の方はちゃんと大丈夫なんですが… ご回答頂き有難うございました。 font-family のご指摘も助かりました。
補足
こんにちは、回答有難うございます。 font-family は省略できなかったんですね、勉強になりました。 widthの部分のミスもご指摘有難うございます。 双方修正してみましたが、やっぱりtable部分の表示は 直りませんでしたTT