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;
}
このようにしているのですが、何か間違えているでしょうか?もしご存知の方がいましたらぜひ教えてください!
記述は間違っていないようです。以下で正しく表示できました。
<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;
ブラウザの設定が関係なかったら、これも試してみて下さい。
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などの問題。
もし、両方うまくいかなかったなら、ブラウザー等の開発環境の問題。
と考えられるような気がします。
引き続きありがとうございます!
!importnantはごめんなさい。
「!」を書くのを忘れただけです。
ちゃんと「!」はつけています。
こちらの実験1、2両方ともブラウザで黄色を確認
することができました。
●まさかと思いますが、念のため。
・(cssを外部にしている場合)cssファイルをアップロードし忘れていませんか?
・キャッシュに古いcssが残っていませんか?
外していたらごめんなさい。
色々とありがとうございました。
問題が解決いたしました。
やはり私の間違いでした。
理由は、
.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に{}でくくられていないエラーがあって、
それを削除したところ、黄色い色のものも見えるようになりました。
お手数をおかけしました。
ありがとうございました!
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の設定としては単純なものなので 間違いはないと思いますが。
無事問題が解決いたしました!
ありがとうございました。
お返事頂きましてありがとうございます。
ブラウザはsleipnirを使っているのですが、
確認したところチェックは入っていませんでした。
またIE6も確認したところ同じように入っていませんでした。
ちなみにimportantも試してみたところ、ブラウザ上ではなぜか特に反映もされませんでした。。