質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.59%

CSS おかしい現象

解決済

回答 5

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,284

NamaKori

score 69

 .sample {color: #000000;background-color: #99cc00;}
 .selectionBarDesign {color: #000000;background-color: #99cc00;}     
 <div class = "selectionBarDesign"> 
      たらこ
 </div>

. sample {color: #000000;background-color: #99cc00;}のコードを消すと、なぜか下のコードが無効になってしまいます。

.sample...のコードは必要ないので消したいのですが、消すと下のコードが無効になるというジレンマが発生します。
なぜでしょうか?

@charaset "utf-8";

.slectionButton{float: left;}
 <!--セレクションバーボタンの位置-->
 .selectionBar{float: left;}
 <!--セレクションバーの制作-->

.selectionBarDesign{
    color: #000000;
background-color: #99cc00;}

li {display:block;}


ミスがあればご指摘ください。
CSSファイルはこうなっています。

あと、.sample classを消してみても無理でした。

デザインを変えることにしたいと思います。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/06/08 00:16

    書かれている状況が再現するコード(HTML/CSS)か、再現するURLを提示されたほうが回答を得やすいと思います。

    キャンセル

回答 5

checkベストアンサー

+3

background-color-スタイルシートリファレンス

ここと一緒のスタイルシートかと思われます。
コピペしたときにp.sampleのpの存在を忘れてコピペしてしまってるのではないでしょうか。p.selectionBarDesignだと無理です。

追記:
原因はわかった。
<!--ff-->の下の一行は無視されるらしい。なぜかはわからない。
cssのコメントアウトは/**/です。
リンク内容
リンク内容
エンターで行を増やしたとかそんなことじゃないだろうな。
コメントアウトをCSSのものにしてください。
間違いがあるとしたら質問の仕方がまず間違い。
最初からCSSを出せば憶測でこんなに時間をかけることはなかった。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/06/11 18:00

    二行あけても無理でした

    キャンセル

  • 2017/06/11 18:01

    私のcss及びhtmlファイルの記載に何か間違いはありましたでしょうか?

    キャンセル

  • 2017/06/11 18:33

    私のミスでお時間をおかけしてしまいすいませんでした,,,


    私が、もっと早く大切な情報を提示していれば、こんなことにならなかったのに...




    キャンセル

+3

まず、基本的な事ですが、その現象は今あなたが出したコードだけで再現出来ますか?
再現できるとしたらあなたが使用しているブラウザ名とブラウザのバージョンはいくつですか?
問題は再現性が大切です。再現できるだけの最小限のコードを洗い出してみて下さい。


私の環境(Google Chrome 59.0.3071.86)では再現できませんでした。

(2017/06/09 20:07追記)

実際のhtmlファイルはこうなっています。(一部改変してあります)

Google Chrome 59.0.3071.86 で再現しませんでした。

上記、リンク先(jsfiddle)では質問者さんの環境で再現出来ますか。
ブラウザを変えたら、結果が変わりますか。

Re: NamaKori さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/06/09 20:08

    再現できませんでした。詳しくは親記事をご覧ください。
    (申し訳ありませんが、宗教上の理由でSafariはインストールできません。)

    キャンセル

  • 2017/06/09 20:09

    ここに書かないで、質問を編集してください。

    キャンセル

  • 2017/06/09 20:20

    何だか、奇々怪々ですね・・・Safariだってそんなボロくないでしょうに・・・

    キャンセル

+2

情報不足なので推測しかできないのですが、.sampleより上に何かしらの原因があるのではないかと思います。たとえば、

.foo
/* コメント */
 .sample {color: #000000;background-color: #99cc00;}
 .selectionBarDesign {color: #000000;background-color: #99cc00;}     

となっているような状態で.sampleだけ消すと、セレクタは.foo .selectionBarDesignということになってしまいます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/06/11 17:25

    確かに.sample以降も消したはずなのですが...


    キャンセル

0

その短いコードでは再現しません。
再現するコードを書いていただけますか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/06/08 00:17

    しまった。回答に書いてしまいました。すみません。

    キャンセル

  • 2017/06/08 00:25

    三者三様…ではなく、皆同じ指摘でしたねw
    何某かの勘違いがありそうですが、再現性確認中に自己解決しそうな気もします。

    キャンセル

0

想像ですが・・・

ブラウザのキャッシュ+何かの勘違いがありそうな気がします。

とりあえず確認する前に毎回ブラウザのキャッシュを消去してから試してみたらどうなりますか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/06/11 18:02

    タブを消しても無理でした、

    キャンセル

  • 2020/01/13 10:19

    マイナス評価をしたのは誰? 名を名乗って理由を書こう。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る