DreamWeaverでサイトを作っています。
よくWordであるような蛍光マーカーを
文字の後ろにつけたような効果をかけたいと思っていて、
CSSで背景色を黄色にしてDreamWeaver上ではうまく
文字に黄色の蛍光マーカーみたいな効果がついています。
しかし、ブラウザ上で確認してみるとその背景の効果が
ついていません。例えば太字とかアンダーラインとか
その他の効果はついているのですが、この黄色い色だけが
見ることができません。
.basic_y {
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size: 14px;
font-weight: bold;
background-color: #FFFF00;
color: #333333;
background-repeat: repeat;
}
このようにしているのですが、何か間違えているでしょうか？もしご存知の方がいましたらぜひ教えてください！
No.1
230
34
25pt
記述は間違っていないようです。以下で正しく表示できました。
5
5
<html>
<head>
<style type="text/css">
.basic_y {
font-family: "ＭＳ Ｐゴシック", 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;
ブラウザの設定が関係なかったら、これも試してみて下さい。
No.2
23034
21pt
important ではなく、!important ですよ。「!」 がついてます。
あとは、次の実験をしてみて結果を教えて下さい。
実験１
先ほどの回答で示したhtmlをコピーし、test1.htmなどと名前を付けて保存し、ダブルクリックして見て下さい。それでも、ダメですか？
実験２
以下のhtmlをコピーしtest2.htmなどと名前を付けて保存し、ダブルクリックして見て下さい。それでも、ダメですか？
<html>
<head>
<style type="text/css">
.basic_y {
font-family: "ＭＳ Ｐゴシック", 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>
もし、実験１か実験２でうまくいったなら、スタイルシートかHTMLなどの問題。
もし、両方うまくいかなかったなら、ブラウザー等の開発環境の問題。
と考えられるような気がします。
引き続きありがとうございます！
!importnantはごめんなさい。
「!」を書くのを忘れただけです。
ちゃんと「!」はつけています。
こちらの実験1、2両方ともブラウザで黄色を確認
することができました。
No.3
21318
22pt
●まさかと思いますが、念のため。
・（cssを外部にしている場合）cssファイルをアップロードし忘れていませんか？
・キャッシュに古いcssが残っていませんか？
外していたらごめんなさい。
色々とありがとうございました。
問題が解決いたしました。
やはり私の間違いでした。
理由は、
.txt18 {
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size: 18px;
font-weight: bold;
.basic_b {
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size: 14px;
line-height: normal;
font-weight: bold;
color: #333333;
}
他のCSSに{}でくくられていないエラーがあって、
それを削除したところ、黄色い色のものも見えるようになりました。
お手数をおかけしました。
ありがとうございました！
No.4
70
30pt
background-colorの指定の後セミコロンでつながれてcolorが続くのでブラウザ上で誤認識されているのではないでしょうか。colorの位置を変えて
.basic_y {
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size: 14px;
color: #333333;
font-weight: bold;
background-color: #FFFF00;
background-repeat: repeat;
}
こんな感じならどうでしょう。CSSの設定としては単純なものなので 間違いはないと思いますが。
無事問題が解決いたしました！
ありがとうございました。
nandedarou
2007/03/15 20:29:16
banyan
1
1
お返事頂きましてありがとうございます。
ブラウザはsleipnirを使っているのですが、
確認したところチェックは入っていませんでした。
またIE6も確認したところ同じように入っていませんでした。
ちなみにimportantも試してみたところ、ブラウザ上ではなぜか特に反映もされませんでした。。