人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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;
}

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

●質問者: banyan
●カテゴリ:インターネット ウェブ制作
✍キーワード:background-color background-repeat COLOR CSS Dreamweaver
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● nandedarou
●25ポイント

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

<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;

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

◎質問者からの返答

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

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

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

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

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


2 ● nandedarou
●21ポイント

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両方ともブラウザで黄色を確認

することができました。


3 ● notapachi
●22ポイント

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

・(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に{}でくくられていないエラーがあって、

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

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

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


4 ● fhtakei
●30ポイント

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の設定としては単純なものなので 間違いはないと思いますが。

◎質問者からの返答

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ