質問: width: 360px; padding: 10px 22px; margin-top: 1px; } } ----------------------------------------------------------------以下HTMLです。------------------- Airbnbでお家、アパート、お部屋をシェアしよう 予想月収 ¥137,511 はじめる Airbnbホストになって、暮らしをレベルアップ どれくらいの収入が見込めるかチェック まるまる貸切 個室 シェアルーム ゲスト1人 ゲスト2人 ゲスト3人 ゲスト4人 ゲスト5人 ゲスト6人 ゲスト7人 ゲスト8人 ゲスト9人 ゲスト10人 2スト11人 ゲスト12人 ゲスト13人 ゲスト14人 ゲスト15人 ゲスト16人 ¥ 153,672 はじめる Airbnbホストになって、暮らしをレベルアップ
回答: > > ● 下記のように@mediaを使ったのですが、480pxを下回ると cardのCSSが解除?になります。 > > ●太文字でなくなり、inputが丸角でなくなる等の問題が起こります。 > > > `@media` 規則により装飾が行われていますが、画面幅が 480px より小さくなると、これらの装飾が適用されなくなるため、そのような現象が発生しています。 > > ●480pxを下回って「消えて」くれれば良いのですが、太文字でなくなり、inputが丸角でなくなる状態で残ってしまいます。 > > > もし画面幅が 480px を下回った場合に、それらの要素を非表示にしたいのであれば、別途 `display` プロパティによる装飾をしなければなりません (動作確認用リンク)。 ``` @media screen and (min-width:480px) { .card { float: right; margin: 32px; } .card-title { font-weight: bold; font-size: 40px; margin-bottom: 15px; text-align: left; margin-top: 10px; } .card-text { font-weight: bold; font-size: 16px; } .btn { font-weight: bold; } .location { border-radius: 4px; padding: 11px; margin-bottom: 8px; width: 360px; } .occupy { border-radius: 4px; padding: 11px 40px 11px 11px; } .guest { border-radius: 4px; padding: 11px 40px 11px 11px; } #btn2 { width: 360px; padding: 10px 22px; margin-top: 1px; } } @media screen and (max-width: 479px) { /* 追記 */ .card { display: none !important; } } ```