classを複数選択したら、要素の範囲が変わってしまいました。

前提・実現したいこと

HTML/CSSでコーディングしていましたが、
divタグ内にclassを2つ追加した要素だけが、囲われている範囲が変更されてしまいました。
そのため、プレビューするとpタグ部分が他の要素とはちがい埋もれてしまっています。
（画像で選択しているdiv要素のように範囲選択されてほしいが、上の要素はimgのみ選択になっている。そのため、pタグの余白がほかのように空いていない様子です）

CSSグリッドでレイアウトしており、教本の模写を行っていましたが、このような状態になってしまいました。

初めての質問で、至らない点もあるかと思いますが、ご回答いただけると幸いです。

発生している問題

yambejp

2021/02/06 15:38

質問は再現性のあるテキストベースのソースを例示してください

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

以下の、"WCB Cafe"の教材だと思いますが、それで合っていますか？
【ダウンロード】1冊ですべて身につくHTML & CSSとWebデザイン入門講座｜SBクリエイティブ

ダウンロードして試してみたところ、6-06-1のmenu.htmlサンプルでも同様に現象が見られました。
つまり、おそらくは教材のミスでしょう。

ちなみに、解決方法は、以下の部分を消すことです。
（他のレイアウトへの影響までは確認していません）

css
1/* モバイル版
2------------------------------- */
3@media (max-width: 600px) {
4
5/* （省略） */
6
7    /* MENU */
8    .menu-content {
9        margin-top: 20%;
10    }
11    .big-box {
12        grid-column: auto;
13        grid-row: auto;
14    }
15    .big-box img {
16        /* height: 100%; これがいらない */ 
17    }
18}
19