文字色が反映されない

このQ&Aのポイント
  • ホームページ作成でフォントの色を変える方法について質問があります。
  • CSSを使用して<span>タグのクラスを指定し、文字の色を変えています。
  • しかし、一部の更新作業中のサイトでは設定が反映されず、困っています。原因や解決策を教えてください。
回答を見る
  • ベストアンサー

文字色が反映されない

ホームページ作成でフォントの色を変えるのにcssで .under { color: #FE5936; border-bottom: 2px solid #e5e5e5"; font-weight: bolder; display:inline; } .green { color: #006C36; font-weight: bolder; } .red { color: #FF0000; font-weight: bolder; } .orange { color: #FF8000; font-weight: bolder; } と、設定してHTMLで<span class="○○">AAA</span>として文字の色を変えています。 いくつかHPがあって今までもそのように設定していたのですが、今更新の作業をしていて、更新作業中のサイトだけ<span>の設定が反映されているところと反映されていないところ(されていないところが大半)になってしまっていて困っています。 上記のunderは反映されるのですが、<span class="red">AAA</span>など、under以外反映されず、bodyで設定したcolorになっています。redをunderにすると反映されたりするので、redの設定がまちがってるのかと、cssの部分を打ち直したりしても変わらずです。{}で閉じてあるし、タグも</span>で閉じてあるし、display:inline;は直接関係ないと思うのですが。。。 同じCSSを使っている他のサイトでもこんなことがなかったので、どうしたらいいのか途方にくれています。 fontタグでやればできないことはないけど、cssで解決したいので、何か考えられる原因があれば教えてください。

noname#232138
noname#232138

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

  • ベストアンサー
  • junkUser
  • ベストアンサー率56% (218/384)
回答No.2

文法に誤りがあるかもしれませんので、以下のサイトで確認してみてください。 W3C CSS 検証サービス http://jigsaw.w3.org/css-validator/ Another HTML-lint gateway http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

noname#232138
質問者

お礼

回答ありがとうございます。 上記2サイトは知っていたのですが、突然の出来事にあわてていてチェックしてませんでした。 チェックしたところこの問題(インライン要素の部分のCSS)とは関係ないような場所でエラーはありましたが修正したらこの問題は解決しました。 いまいち納得できないんですが、とにかく直りましたのでお礼申し上げます。

その他の回答 (1)

  • junkUser
  • ベストアンサー率56% (218/384)
回答No.1

CSSがブラウザやプロキシにキャッシュされているのではないでしょうか。 リロードまたは別名のCSSファイルに置き換えてみてはいかがでしょうか。

noname#232138
質問者

お礼

何とか直りました。 回答ありがとうございました。

noname#232138
質問者

補足

キャッシュを削除したり、別名にもしてみましたが、うまくいきませんでした。 相変わらず一部のclassだけ有効になっています・・・。 作り直ししかないんでしょうか・・・。

関連するQ&A

  • spanを使わずに文字列の一部を赤色にする方法

    HTML/CSSについて教えてください。 文字列の一部を赤色にしたいとき、インラインで記載すると以下のようになると思います。 <span style="color:#FF0000;"> samplesamplesample </span> 上記内容を、 「span」を使わずにインラインで記載する方法を教えて欲しいです。 (HTML5用でお願いします) ※ググったところ、 <div style="display:inline;color:#FF0000;"> samplesamplesample </div> という書き方でよさそうに思うのですが、詳しくないのでよく分からず・・。 <font style="color:#FF0000;"> samplesamplesample </font> という書き方が、やりたいことに最も近い気がしますが、HTML5では禁止?されていると知りました。 恐れ入りますが、どなたかよい方法をお教えくださると嬉しいです。

    • ベストアンサー
    • 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で使う CLASSに関して

    こんにちは。CSSに関しての質問なのですが。 外部スタイルシートで登録していて <span class="c5"> 文字<br> </span> といった設定をしていて 外部スタイルシートで .c5 { color:#FF9934; font-weight: bold; } といった設定をしています。 しかしIEでは正常にカラーが変わって表示されるのですが、FireFoxでは表示されません……。 IEよりもFireFoxの方がタグ等に対して厳密な解釈をしていると思うのですが、この設定は何がおかしいのでしょうか? どなたかわかる方、回答をよろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSの正しい記述の仕方

    CSSの記述の仕方なんですが、下記のような書き方は正しいのでしょうか? .f14 {font-size: 14px;} .bold {font-weight: bold;} .red {color: #FF0000;} <p class="f14 bold red">あいうえお<div> HTMLには構成要素、CSSにはデザイン要素のみを記述と考えると正しくない気がしますが、 何度も使うような場合は、この方がCSSが短くなるので使っています。 どうなんでしょうか? 気にしすぎでしょうか。

    • ベストアンサー
    • HTML
  • DreamWeaverMXでスタイルシートを使わない方法

    DreamWeaverMXを使用しています。 文字に色をつけたり大きさを変えたりするときに、自動的にスタイルシートでタグが入力されてしまいます。 例えば赤文字にしたときに <font color="red">赤い文字</font> こうしたいのに <head> <style type="text/css"> <!-- .style1 {color: #FF0000} --> </style> </head> <body> <span class="style1">赤い文字</span> </body> こういうタグが入ってしまいます。 これをHTMLだけのタグがはいるようにしたいのですが、そういう設定方法はないでしょうか? ご存知の方がいましたらよろしくお願いします。

  • 文字の左側にチエックマークを入れる方法

    よろしくお願いします。テキストの左側にチエックワークを入れたく以下の記述をhtmlにしました。 <ul class="ulfont"> <li>ああああああああああああああああああああ</li> <li>いいいいいいいいいいいいいいいいいいいいいいいい</li> </ul> <ul class="ulfont1"> <li>うううううううううううううううううう</li> <li>おおおおおおおおおおおおおおおおおおお</li> </ul> そしてcssには以下の記述をしました。 .ulfont{ list-style-image:url(img/checkmark.gif); background-image: url(img/mark.png); color: #ff0000; font-weight:bolder; font-size:1.0em; line-height:2.0; margin-left:-1px; } .ulfont1{ list-style-image:url(img/ani059.gif); background-image:url(img/mark.png); color: #ff0000; font-weight:bolder; font-size:1.0em; line-height:2.0; margin-left: -1px; } checkmark.gifは表示されるのですが、ani059.gifが表示されません。 前回も、このようなご質問をさせていただいたのですが、解決できなく再度ご質問をさせていただきました。 なお、前回はlist-style-noneを入れると良いとご指導を頂いたのですが、なぜかうまく行かず、画像も右によってしまい、左に空白ができてしまいました。 ただし、文字の背景に設定している画像は表示されております。 何か記述方法が間違っているのだと思うのですが、わかりません。 どなた様か、ご指導のほどよろしくお願いします。

    • ベストアンサー
    • HTML
  • 文字の左側に画像を表示したい

    よろしくお願いします。 文字の左側にチエックマークを入れたく以下の記述をしました。 【html】 <ul class="ulfont"> <li>テストテストテスト</li> <li>ホゲホゲホゲ</li> </ul> 【css】 .ulfont{ list-style-image:url(img/checkmark.gif); background-image: url(img/mark.png); color: #ff0000; font-weight:bolder; font-size:1.0em; line-height:2.0; margin-left:-1px; } 上記の記述ではIEでもFire Foxでも表示されますので特別問題は 無いのですが、以下についてご質問させてください。 同じく、文字の左側にチエックマークを入れたく以下の記述をしました。 【html】 <ul class="ulfont1"> <li>パソコン、インターネット</li> <li>プリンター、インク</li> </ul> 【css】 .ulfont1{ list-style-image:url(img/ani059.gif); background-image:url(img/mark.png); color: #ff0000; font-weight:bolder; font-size:1.0em; line-height:2.0; margin-left: -1px; } 上記ではfire Foxでは表示されるのですがIEではimg/ani059.gifが・のようなマークのなってしまいます。 サーバーにはimg/ani059.gifは転送されています。 どなた様か、ご指導の程よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSを優先的に使用したほうがいいのでしょうか?

    例えば、フォントの色を変えたい時、 <font color="red">☆</font> これを使う方が良いのか、もしくは、 <span class="★">☆</span> このほうがいいのか、一概には言えないとは思うのですが・・・ 正直、CSSはまださっぱりなので、慣れてる表現方法を使いたくなってしまうですが、CSSを利用することによるメリットがわかっていない状態で勉強しています。 最近、連日のように質問攻めで申し訳ないですが、アドバイスお願いします。

    • ベストアンサー
    • HTML
  • 文字の左側にチエックマークを入れる方法

    よろしくお願いします。 文字の左側にチエックマークを入れたく以下の記述をしました。 【html】 <ul class="ulfont1"> <li>テストテスト11</li> <li>ほげほげほげ</li> </ul> 【css】 .ulfont1{ list-style-image:url(img/ani059.gif); background-image:url(img/mark.png); color: #ff0000; font-weight:bolder; font-size:1.0em; line-height:2.0; margin-left: -1px; } 上記の内容をIEやfire foxのブラウザ上で見ると、表示されるのですがサーバー上で確認をしてみると、画像が・のようなマークで表示されてしまいます。 原因が分からないのですが、どなた様かご指導の程よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSでのフォントサイズ指定におけるジレンマ

    以下の例文では、   * {font-size: 10pt;} があるゆえに、赤太字で示された   .ddd {color: #ff0000;font-weight: bold;} のフォントサイズがばらばらになってしまいます。 各所の指定フォントサイズを遵守させ、かつ赤太字を有効化するにはどのようにればよいでしょうか。   * {font-size: 10pt;}は事情あってやめられません。 「.ddd」に、font-size: middleを入れたりしてもだめでした。 !importantとか、何か簡単な「おまじない」の追記で解決できるといいのですが。 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css"> <!-- * { font-size: 10pt; } dd { font-size: x-small; } dt { margin-left: 30px; } .eee { border: 1px solid #000; font-size: small; } .ccc { font-size: xx-large; } .aaa { font-size: medium; } .bbb { font-size: small; } .ddd { color: #ff0000; font-weight: bold; } --> </style> </head> <body> <h2>&nbsp;&nbsp;<a href="./a.htm" style="font-size: large;">2014年の<span class="ddd">雪</span>景色</a></h2> <a href="./index.php" class="eee"><span class="ddd">雪</span>下くんの感想</a> &nbsp;&nbsp;1月には何度も降雪、周りは<span class="ddd">雪</span>、<span class="ddd">雪</span>、<span class="ddd">雪</span>… <dl> <dt class="Tab"><span class="ccc">首都圏では不慣れな<span class="ddd">雪</span>かきなどに追われた</span></dt> <dt><span class="aaa"><span class="ddd">雪</span>下大介</span>&nbsp;&nbsp;<span class="bbb">大阪府立降<span class="ddd">雪</span>下小学校3年</span></dt> <dd>大阪ではひさしぶりに<span class="ddd">雪</span>が降りました。この時期での降<span class="ddd">雪</span>は珍しい。</dd> </dl> </body> </html>

    • ベストアンサー
    • CSS