Q&A
//
↑これはCSSのコメントアウトとしては無効ですが、そこは問題ないですか？
初歩的な事だけどめっちゃcssが掛かったり掛からなかったりするのが分からない。理解出来ない。何故？
どうしたら回避できる？
例えば以下のcss内に残した二つのコメントアウト。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="outline"> <p>aaあ</p> <div class="header"> <div class="header-logo">STOC TRADE</div> <div class="header-list"> <ul> <li>trading room</li> <li>guide</li> <li>manufacturer</li> </ul> </div> </div> <div class="left"> <nav> <ul> <li>リスト01</li> <li>リスト02</li> <li>リスト03</li> </ul> </nav> <div class="right"> <p>MAIN</p> </div> </div> <div class="footer"> <ul> <li>リスト01</li> <li>リスト02</li> <li>リスト03</li> </ul> <p>アクセス情報</p> <small>Copyright</small> </div> </div> </body> </html> <script> </script> <style> .outline{ background-color:blue; } .outline p{ //color:white; } .header{ background-color:yellow; } .header li{ list-style:none; //float:left; } .left{ background-color:red; color:white; } .right{ width:100px; height:100px; background-color:green; } .footer{ background-color:yellow;} </style>
一つ目。
.outline pに掛かっているcolor:white;を有効にすると
全体のｐが白になる。何故？
outline の p を指定している事にならないのか？
理由を知りたい。
二つ目
.header liに掛かっているfloat:left;を有効にすると
基本的なところですいませんが
アドバイス頂きたく思います。
よろしくお願いします。
＞構造が狂ってしまう。
理由はともかく「どうしたいのか」を提示しないことには他者には解決策は提示不可能と思います。
大変時間がかかって申し訳ありません。なぜでしょうか？コメントアウトは有効に働いている様に感じます。反映も上手くいっていますが。。。
構造が狂ってしまうと結果だけを書いてしまって申し訳ありません。今一度コードを見直し、質問として明確にしたいと思います。ご指摘有難う御座います。
「どうしたいか」が無いまま、「何故そうなるか」が先行してしまって質問を殴り書きしてました。なので質問の意図が伝わらなく申し訳ありません。 回答によりcssの作りの理解が深まった様に感じます。有難う御座いました。
CSSのコメントアウトは//ではないです。
cssの構文として//floatというプロパティがないので無視されてるだけですね。
質問は編集できるので、指摘があったり進展があっても解決まではいってなかったり自身が納得できてない場合は何度でも調整すれば良いと思います。
回答3件
0
ベストアンサー
一つ目。
.outlineはそもそも<body>直下で</body>まで囲ってます。
つまり、.outline配下のp全てに掛かりますので現状のHTML内では「すべてのpに掛かる」は指定通りの挙動です。
二つ目
floatをclearしてないから直後の要素も影響します。
有効にしたい範囲でclearすれば良いかと。
投稿2021/11/20 20:56
編集2021/11/21 20:51総合スコア80875
大変時間がかかって申し訳ありません。理解しました！！ そもそも</div>の指定が可笑しい事から始まっていたのですね。 また、float clearの理解が有りませんでした。 有難う御座います。
0
cssは
// コメント
はコメントになりません。
/* コメント */
とするとよいです。
投稿2021/11/21 03:42
総合スコア103
大変時間がかかって申し訳ありません。コメントアウトは何故かこちらで有効に働いています。メモ帳で書き換えても反映されます。visual studio code の影響でしょうか。。しかし、他の方の指摘にもある通り、適切な書き方では無い事を知りました。ご指摘有難うございます。
0
正直
Styleタグよりもlinkで別のファイルをypみこむのがいいとおもいます。
outlineのpだけを有効にしたいなら.outline < pかな
2つ目はわかんないですすみません
投稿2021/11/21 01:53
総合スコア4
<は機能としてないと思います。
>ですね。
大変時間がかかって申し訳ありません。ご指摘の通り外部リンクで作る良さに最近気づきました。これからは外部リンクで進めて行きたいと思います。また、outline > p で一つ目の解決に至りました。有難う御座います。
あなたの回答
tips
プレビュー
