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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

5回答

1877閲覧

CSS おかしい現象

NamaKori

総合スコア81

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/06/07 15:11

編集2017/06/11 08:44

lang

1 2 .sample {color: #000000;background-color: #99cc00;} 3 .selectionBarDesign {color: #000000;background-color: #99cc00;}

lang

1 2 <div class = "selectionBarDesign"> 3 たらこ 4 </div>

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

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

lang

1@charaset "utf-8"; 2 3.slectionButton{float: left;} 4 <!--セレクションバーボタンの位置--> 5 .selectionBar{float: left;} 6 <!--セレクションバーの制作--> 7 8.selectionBarDesign{ 9 color: #000000; 10background-color: #99cc00;} 11 12li {display:block;}

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/06/07 15:16

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

回答5

0

ベストアンサー

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

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

追記:
原因はわかった。

<!--ff-->の下の一行は無視されるらしい。なぜかはわからない。

cssのコメントアウトは/**/です。
リンク内容
リンク内容
エンターで行を増やしたとかそんなことじゃないだろうな。
コメントアウトをCSSのものにしてください。
間違いがあるとしたら質問の仕方がまず間違い。
最初からCSSを出せば憶測でこんなに時間をかけることはなかった。

投稿2017/06/09 11:35

編集2017/06/11 09:07
toutou

総合スコア2050

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

NamaKori

2017/06/11 09:00

二行あけても無理でした
NamaKori

2017/06/11 09:01

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

2017/06/11 09:33

私のミスでお時間をおかけしてしまいすいませんでした,,, 私が、もっと早く大切な情報を提示していれば、こんなことにならなかったのに...
guest

0

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


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

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

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

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

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

Re: NamaKori さん

投稿2017/06/07 15:18

編集2017/06/09 11:07
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shi_ue

2017/06/08 03:01

ちょっとした間違いなんでしょうけどね。再現性を確認できるコードを作っているうちに気づきそうですね。
think49

2017/06/08 04:59

素直に質問を読むと、各々独立している宣言が干渉する事はブラウザのバグでもなければ考えられないので、何がしかの勘違いがある可能性が高いと思っています。 例えば、質問する際に質問者さんが「実際のコード」から「同じコードだと思っている別のコード」に変えて投稿してしまっていて、問題が変質している可能性があります。 一つの仮定ですが、実際のCSSが .sample.selectionBarDesign { ... } だとすると、.sample を削除する事で詳細度が変わる為、しっくり来ます(グループ化と勘違いして質問文が変わった)。 その場合はHTMLも変わっていますが、sampleクラスは不要なのでHTMLから削除したと考えられます。
shi_ue

2017/06/08 05:03

わたしもそう思います。その線が強いんじゃないかなー、と思ってました。
NamaKori

2017/06/08 11:41

ブラウザーはsafariでバージョンは10.1 (11603.1.30.0.34)です。 </head> <body> <div class= "selectionButton"> <span style = "position: relative; left: 28px; top:5px"> <font size="10" color="red"> <big>あ</big> </font> </span> <span style = "position: relative; left: 0px; top:5px"> <font size="10" color="red"> い </font> </span> <span style = "position: relative; left: -5px; top:5px"> <font size="10" coler="grey"><big>う</font></big> </span> <span style = "position: relative; left: -10px; top:5px"> <font size="10" coler="grey">え </font> </span> </div> <div class = "selectionBarDesign"> <nav> <ul style="list-style:none"> <li style="float:left"> <a href = "Itigo.html">イチゴ</a></li> <li style="float:left"> <a href = "Rinngo.html">りんご</a> </li> <li style="float:left"> <a href = "Manngo.html">マンゴー</a></li> <li style="float:left"><a href = "Mikann.html">みかん</a></li> </ul> </nav> </div> <div class = "selectionBarDesign"> たらこ </div> </body> </html> 実際のhtmlファイルはこうなっています。(一部改変してあります)
think49

2017/06/09 11:08

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

2017/06/09 11:09

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

2017/06/09 11:20

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

0

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

css

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

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

投稿2017/06/07 23:21

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

NamaKori

2017/06/11 08:25

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

0

想像ですが・・・

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

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

投稿2017/06/08 02:55

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

NamaKori

2017/06/11 09:02

タブを消しても無理でした、
退会済みユーザー

退会済みユーザー

2020/01/13 01:19

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

0

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

投稿2017/06/07 15:16

shi_ue

総合スコア4437

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shi_ue

2017/06/07 15:17

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

2017/06/07 15:25

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問