HP、CSSに関する質問です。


DreamWeaverでサイトを作っています。
よくWordであるような蛍光マーカーを
文字の後ろにつけたような効果をかけたいと思っていて、
CSSで背景色を黄色にしてDreamWeaver上ではうまく
文字に黄色の蛍光マーカーみたいな効果がついています。

しかし、ブラウザ上で確認してみるとその背景の効果が
ついていません。例えば太字とかアンダーラインとか
その他の効果はついているのですが、この黄色い色だけが
見ることができません。

.basic_y {
font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size: 14px;
font-weight: bold;
background-color: #FFFF00;
color: #333333;
background-repeat: repeat;
}

このようにしているのですが、何か間違えているでしょうか?もしご存知の方がいましたらぜひ教えてください!

回答の条件
  • 1人3回まで
  • 登録:
  • 終了:2007/03/15 18:28:48
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答4件)

id:nandedarou No.1

回答回数230ベストアンサー獲得回数34

ポイント25pt

記述は間違っていないようです。以下で正しく表示できました。

<html>
<head>
<style type="text/css">
  .basic_y {
  font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
    font-size: 14px;
    font-weight: bold;
    background-color: #FFFF00;
    color: #333333;
    background-repeat: repeat;
  }
</style>
</head>
<body>
  <div class="basic_y">実験</div>
</body>
</html>

スタイルが競合している可能性があります。

DreamWeaver上では問題ないということは、スタイルシート内での競合ではないようですね。

ということは、ブラウザで指定するスタイルと競合しているのではないでしょうか?


例えば、IE6では、「ツール」メニュー→「インターネットオプション」→「全般」タブ→「ユーザー補助」ボタン→書式設定の「Webページで指定された色を適用しない」にチェックが入っていると黄色が表示されなくなりました。また、「ユーザースタイルシート」も指定できるようになっています。こちらが優先適用されます。


あとは、今回の現象を見た限りでは関係ありませんが、スタイルシート内でスタイルが競合した場合、優先したいスタイルの;の前に!importantを入れるといい場合があります。つまり、background-color: #FFFF00 !important;

ブラウザの設定が関係なかったら、これも試してみて下さい。

id:banyan

お返事頂きましてありがとうございます。

ブラウザはsleipnirを使っているのですが、

確認したところチェックは入っていませんでした。

またIE6も確認したところ同じように入っていませんでした。

ちなみにimportantも試してみたところ、ブラウザ上ではなぜか特に反映もされませんでした。。

2007/03/15 03:04:27
id:nandedarou No.2

回答回数230ベストアンサー獲得回数34

ポイント21pt

important ではなく、!important ですよ。「!」 がついてます。


あとは、次の実験をしてみて結果を教えて下さい。


実験1

先ほどの回答で示したhtmlをコピーし、test1.htmなどと名前を付けて保存し、ダブルクリックして見て下さい。それでも、ダメですか?


実験2

以下のhtmlをコピーしtest2.htmなどと名前を付けて保存し、ダブルクリックして見て下さい。それでも、ダメですか?

<html>
<head>
<style type="text/css">
  .basic_y {
    font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
    font-size: 14px;
    font-weight: bold;
    background-color: #FFFF00;
    color: #333333;
    background-repeat: repeat;
  }
</style>
</head>
<body>
  <div class="basic_y" style="background-color: #FFFF00 !important;">実験</div>
</body>
</html>

もし、実験1か実験2でうまくいったなら、スタイルシートかHTMLなどの問題。

もし、両方うまくいかなかったなら、ブラウザー等の開発環境の問題。

と考えられるような気がします。

id:banyan

引き続きありがとうございます!

!importnantはごめんなさい。

「!」を書くのを忘れただけです。

ちゃんと「!」はつけています。

こちらの実験1、2両方ともブラウザで黄色を確認

することができました。

2007/03/15 03:28:10
id:notapachi No.3

回答回数213ベストアンサー獲得回数18

ポイント22pt

●まさかと思いますが、念のため。

 

・(cssを外部にしている場合)cssファイルをアップロードし忘れていませんか?

・キャッシュに古いcssが残っていませんか?

 

 外していたらごめんなさい。

id:banyan

色々とありがとうございました。

問題が解決いたしました。

やはり私の間違いでした。

理由は、

.txt18 {

font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";

font-size: 18px;

font-weight: bold;

.basic_b {

font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";

font-size: 14px;

line-height: normal;

font-weight: bold;

color: #333333;

}

他のCSSに{}でくくられていないエラーがあって、

それを削除したところ、黄色い色のものも見えるようになりました。

お手数をおかけしました。

ありがとうございました!

2007/03/15 18:26:37
id:fhtakei No.4

回答回数7ベストアンサー獲得回数0

ポイント30pt

 background-colorの指定の後セミコロンでつながれてcolorが続くのでブラウザ上で誤認識されているのではないでしょうか。colorの位置を変えて

.basic_y {

font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";

font-size: 14px;

color: #333333;

font-weight: bold;

background-color: #FFFF00;

background-repeat: repeat;

}

こんな感じならどうでしょう。CSSの設定としては単純なものなので 間違いはないと思いますが。

id:banyan

無事問題が解決いたしました!

ありがとうございました。

2007/03/15 18:27:16
  • id:nandedarou
    よかったですね。

    調べる過程で、有用なページを見つけました。本当はもっと早くこれを教えたかったんだけど、5回の内3回も回答して解決しなかったら悪いのでやめました。
    http://openlab.ring.gr.jp/k16/htmllint/htmllintl.html
    http://jigsaw.w3.org/css-validator/#validate-by-input

    ※「この質問・回答へコメント」を質問終了前から書けるようにする設定にできますよ。質問者にとってはその方が有利だと思います。ご参考までに。
  • id:banyan
    ありがとうございます!
    3番目の方はnandedarouさんかと勝手に思い込んでいました(笑)
    なるほど、「カスケーディングスタイルシート(CSS)を検証」
    というのがあるんですね。今後はこちらも使ってみたいと思います。
    色々と勉強になりました。ありがとうございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません