CSSが反映されない!ファイルをアップロードしても背景画像や文字色が消える問題の原因と対処法は?

このQ&Aのポイント
  • CSSが反映されない問題が発生しました。ファイルをアップロードしても背景画像や文字色が消えてしまいます。SleipnirやIEでの確認でも同様の問題が発生します。CSSファイルの中身を確認すると、設定が正しく記述されているようです。原因としては、ファイルの文字コードやパスの指定方法などが考えられます。どなたか原因と対処法をご存知の方、回答をお待ちしております。
  • FC2でHPを作っている際にCSSが反映されません。CSSを変更してFFFTPでファイルをアップロードしたところ、背景画像や文字色の設定が消えてしまいました。ファイルはWEB上に存在し、SJISで保存してアップロードしていますが、表示は変わりません。CSSファイルの内容は適切に記述されており、SleipnirやIEでの確認でも同様の問題が発生します。原因と対処法をご存知の方、ご教示ください。
  • CSSが反映されず、背景画像や文字色の設定が消えてしまいます。FC2でHPを作成し、CSSを変更した後にFFFTPでファイルをアップロードしましたが、表示が崩れてしまいます。ファイルはWEB上にあり、SJISで保存して無変換でアップロードしましたが、SleipnirやIEでの表示に違いはありません。CSSファイルの中身は正しく記述されており、原因と対処法をご存知の方、ご回答をお願いします。
回答を見る
  • ベストアンサー

CSSが反映されません。

コチラのカテゴリで良いのか解らないのですが… 私は現在FC2でHPを作っていまして、 CSSを変更したのでFFFTPでファイルをアップロードしました。 そして確認の為に、ブラウザでサイトを表示してみたら 背景画像や、文字色の設定など、全て消えていました。 因みに、ファイルはWEB上に存在しています。 ファイルはSJISで保存し、無変換でアップロードしました。 SleipnirとIEどちらで見ても表示が変わりません。 ファイルの中身はこんな感じです。 ---------------------------------------- body { background-color:#000000; color:#cccccc; font-size:12; font-family: "MS ゴシック", "MS Pゴシック",     "ヒラギノ角ゴ Pro W3", Osaka"等幅, Osaka,     平成角ゴシック; background-image:url(bg_img/moon001.jpg); background-repeat:repeat-y; position:relative:top:100px;left:100px; line-heignt:5pt; scrollbar-base-color:#333333; scrollbar-face-color:#111111; scrollbar-track-color:#000000; scrollbar-arrow-color:#222222; } td.A { color:#cccccc; font-size:12pt; } td.b { color:"#cccccc"; font-size:12pt; background-color:#222222; } a:link { color:#9999ff; text-decoration:none; font-size:10pt; } a:hover { color:#ffddff; text-decoration:none; } a:visited { color:#40e0d0; text-decoration:none; } a:active { color:#ffccff; } ----------------------------------------- 原因と対処法を知っている方、 回答よろしくお願いします。

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

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

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

>Osaka"等幅, Osaka,     平成角ゴシック; これ " の閉じるのがないようですが。

nak_1987
質問者

お礼

早速の回答有り難うございます。 ご指摘いただいた所を直して、 再度アップロードしてみたら、ちゃんと直りました。 まさかそんな所で出なかったとは… 何だか凄く恥ずかしいです。 本当に有り難うございました。

関連するQ&A

  • CSSで文字サイズを指定するとWINでは固定なのに…

    CSSで文字サイズを指定するとWINでは固定なのに MACではブラウザで文字サイズを変えると サイズが変わってしまうのです。 MACでも固定する方法がわかりません。 教えてください。 ドリームウエヴァ-で作って 外部ファイルにしていて a { font-family: "MS Pゴシック", "Osaka"; font-size: 11px; text-decoration: none; } p { font-family: "MS Pゴシック", "Osaka"; font-size: 14px; line-height: 18px; text-decoration: none; color: #666666; letter-spacing: 1px; } です。 どこがおかしいのでしょうか?

    • ベストアンサー
    • HTML
  • CSS外部呼び出し

    今ジオシティーズでスタイルシートの外部呼出しをやってみたんですが、 いくつか繁栄されないものがあるんですが、記述で間違っている所がありましたら直していただきたいのです。 A { text-decoration: none; } A:visited {text-decoration:none} A:link {text-decoration:none} A:hover {color:red; text-decoration:underline} P { font-size: 12pt; } Body,Td {line-height:15pt;} Body {scrollbar-arrow-color: #000000; scrollbar-face-color: #ffffff;scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #000000; scrollbar-track-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-darkshadow-color: #000000} これに更に A:link { color: blue; } A:visited { color: #8080FF; } A:hover { color: #FFFF00; } A:active { color: red; } を足したいのですが、可能でしょうか?

    • ベストアンサー
    • CSS
  • CSSで表示が異なってしまう

    下記のようなCSSを使っているのですが、リンクが入ると表示が異なってしまいます。 画像の下のようにしたいのですが、どうすればよろしいでしょうか? よろしくお願いします。 ■ CSS A:link{ color:#0095ff; text-decoration: none;} A:visited{ color:#0095ff; text-decoration: none;} A:hover{ color:#00efff; text-decoration: underline;} A:active{ color:#00efff; text-decoration: underline;} .style02{ padding:3px 0 0 6px; margin-bottom: 5px; font-size:16px; font-weight:bold; background-image:url(../_images/h_02.gif); background-repeat:repeat-x; border: 1px solid #000000; color: #000000; } ■ ソース <a class="style02" href="http://www.hogehoge.com">トップページ</a> <div class="style02">トップページ</div>

    • ベストアンサー
    • HTML
  • CSS:スタイルシートでテキストリンク

    教えてください!! 外部ファイルのスタイルシート(CSS)を使って、各ページへジャンプするテキストリンクをマウスオーバー時に太字になるように設定しています。 IE6.0では問題なく起動していますが、NS7.1,Firefox1.0では、機能していません。何か対処方法はないでしょうか? ↓私の記述は以下の通りです↓ 【外部ファイルへのリンクの記述】 <link rel="stylesheet" type="text/css" href="../menu.css" title="menu" /> 【外部ファイル内のCSSの記述】 .menu { font-family: "MS Pゴシック", Osaka; font-size: 12px; font-style: normal; line-height: 14px; color: #FFFFFF; text-decoration: none; } .menu a:link { color: #FFFFFF; text-decoration: none; } .menu a:visited { color: #FFFFFF; text-decoration: none; } .menu a:hover { color: #FFFFFF; font-weight: bold; text-decoration: none; } .menu a:active { color: #FFFFFF; font-weight: bold; text-decoration: none; }

  • 外部CSSをかくには。

    HPのページひとつひとつにいちいちスタイルシートをかいていくのが 面倒になったので外部CSSでまとめてしまおうと 思ったのですが、上手くいきません。 ちなみにこうかいております↓ <STYLE TYPE="text/css"> <!-- BODY {  letter-spacing:7px;  line-height:15pt; } --> </STYLE> <style type="text/css"> <!-- body { scrollbar-face-color: #FF9900; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #000000; scrollbar-track-color: #ff9900; scrollbar-darkshadow-color: #ffffff; } --> </STYLE> <STYLE TYPE="text/css"><!--A{text-decoration:none;}A:hover{text-decoration:underline overline;}--></STYLE> <style type=text/css><!--a{text-decoration:none;}--></style> <style><!--BODY{font-size:8pt;}--></STYLE> どこか悪い点がありましたら教えてください。

    • ベストアンサー
    • HTML
  • 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)について

    「Dreamwever独習ナビCS3/8対応」でホームページの勉強をしているものです。 質問内容はプレビューで見ると、リンクの表示が想定しているものと、 違うのです。具体的にはにじんで見える感じです。文字は読めません。 CSSの設定をしたところ、この現象となりました。 プレビューのリンクの箇所を反転させると、読むことができます。 環境はWindowsXP、IE6です。firefoxでも同様の症状です。 お忙しいところお手数ですが、ご教授願います。 CSSの内容は以下のとおりです。 ------------------------------- body{ font-family: sans-serif; font-size: 75%; line-height: 1.6; color:#333333; background-color: #999999; background-image; url(image/bg.gif); background-repeat: repeat; } hr{ display: none; } aimg{ border-style: none; } a:link{ color: #333333; text-decoration: underline; } a:visited{ color: #999999; text-decoration: underline; } a:hover{ color: #000000; text-decoration: underline; } a:active{ text-decoration: none; position: relative; left: +1px; top: +1px; } ------------------------------- ※テキストP60の「リンクをCSSで設定しよう」という箇所です。

    • ベストアンサー
    • HTML
  • スタイルシートのリンクについて

    スタイルシートを下記の様に記述しました。 そこでリンクの部分なのですが ポインタが上にのった時にff6666になるようにしているのですが、 ff9900のままなのです。 通常はffcc00 既読はff9900 ポインタ上にのった時にff6666 クリックした時にff0000としたいのです。 どなたかお教え下さい。 <style type="text/css"> <!-- BODY { SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #ffcc00; SCROLLBAR-ARROW-COLOR: #ffcc00; SCROLLBAR-BASE-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR : #ffffff; SCROLLBAR-3DLIGHT-COLOR : #ffcc00} body,tr,td {font-size: 9pt;} body,tr,td {color: #ffcc00;} a {text-decoration: none;} a:link {color: #ffcc00;} a:hover {text-decoration: underline;} a:hover {color: #ff6666;} a:active {color: #ff0000;} a:visited {color: #ff9900;} body { background-repeat: no-repeat; background-position: 100% 100%; background-attachment: fixed;} --> </style>

    • ベストアンサー
    • CSS
  • cssがhtmlに反映しません

    .style01 { font-size: 120%; color: red; font-weight: bold; } .style02 { color: blue; font-weight: bold; } .style03 { background-color:yellow; text-decoration: underline; } .style01.style02は反映しますが、 .style03 の{ background-color:yellow; text-decoration: underline; } background-color:yellow;の部分が全く反映しません。 なぜでしょう。

  • サイドメニューとメインの左右入れ替え(CSSファイル)

    あるテンプレートを利用しようと思っていますが、左メニューの配置を右メニューの配置にしたいと思っています。 メニューボックスとメインボックスの入れ替えは出来たのですが、フレームの入れ替えが出来ません。 以下のスタイルシートですが、どのようにすればよろしいのでしょうか。 ================= /*ページ全体の指定*/ *{ margin:0; padding:0; font:100% "MS ゴシック","Osaka",sans-serif; } body{ background:url("img/bg.gif") repeat-y center; color:#333333; font-size:84%; } /*ページの輪郭*/ #flame{ width: 780px; margin:0 auto; } /*ヘッダ*/ #head{ background:url("img/headbg.gif") top repeat-x; } /*サイト名前:ロゴを入れたりしてください*/ #logo{ font-size:30px; padding:20px; font-family:Arial Black; } /*ヘッダメニュー*/ #headmenu{ width:780px; background:#133D76 url("img/headbg.gif") bottom repeat-x; color:#ffffff; padding-bottom:7px; margin-bottom:5x; } #headmenu ul{ width:780px; list-style:none; } #headmenu li{ width:100px; float:left; background:url("img/headmenubg.gif") no-repeat right; text-align:center; padding:5px; } #headmenu li a{ text-decoration:none; color:#ffffff; } #headmenu li a:hover{ } /*サイドとメインのブロックを囲む*/ #center{ width:780px; background:url("img/centerbg.gif") repeat-y; } /*サイドのブロック*/ #box_side{ width: 200px; float: right; } .menu{ width:178px; margin:20px 10px 0px 10px; } h3{ height:20px; font-weight:bold; background:url("img/menut.gif"); color:#ffffff; padding:6px 0 0 20px; } #box_side ul{ background:#ffffff; border-bottom:1px solid #cccccc; border-right:1px solid #cccccc; padding-top:3px; padding-bottom:3px; list-style:none; } #box_side li{ background:url("img/listbg.gif") no-repeat 0 50%; padding:0 0 0 15px; margin:3px 0 3px 15px; } #box_side li a{ text-decoration:none; color:#092853; } #box_side li a:hover{ color:#E72137; } /*メインのブロック*/ #box_main{ width: 580px; float: left; } /*右のタイトル部分*/ h1,h2{ font-size:120%; font-weight:bold; background:#ffffff url("img/maintbg.gif") repeat-x bottom; padding:10px; } /*メインの記事の部分*/ .main{ background:#F7F5F5; border:1px solid #cccccc; margin:20px; } /*本文をくる*/ p{ margin:10px; line-height:150%; } /*引用文*/ blockquote{ line-height:150%; border:1px solid #cccccc; background:#eeeeee; margin:10px; padding:5px; } /*著作権表示の部分つまりフッタ*/ #foot{ border-top:1px solid #666666; padding:10px; } #foot a{ color:#333333; text-decoration:none; } #foot a:hover{ text-decoration:underline; } .both{ clear:both; }

    • ベストアンサー
    • HTML