Q&A
前提・実現したいこと
メディアクエリを使って1000px以下になったら要素の横幅を100%に変更したい。
通常時
横幅：600px
高さ：200ｐｘ；
レスポンシブ時
横幅：100%
発生している問題・エラーメッセージ
エラーは出ていません。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>要素の配置換え</title> 6 <link rel="stylesheet" type="text/css" href="base.css"> 7 <meta name="viewport" content="width=device-width,initial-scale=1"> 8</head> 9<body> 10 <div id="wrapper"> 11 <div id="box1"> 12 </div><!-- box1 --> 13 <div id="box2"> 14 </div><!-- box2 --> 15 </div><!-- wrapper --> 16</body> 17</html>
CSS
1#box1 { 2 background-color: red; 3 width: 600px; 4 height: 200px; 5} 6 7#box2 { 8 background-color: blue; 9 width: 600px; 10 height: 200px; 11} 12 13#wrapper { 14 display: flex; 15} 16 17@media screen and (max-width: 1000px){ 18 #box1 #box2 {width: 100%;} 19}
回答1件
0
ベストアンサー
#box1 #box2は、「#box1の内側にある#box2」という意味になりますが、そんなエレメントは存在しません。
#box1と#box2の両方に適用したい場合は、#box1, #box2とカンマ区切りにしてください。
投稿2021/08/22 22:41
総合スコア146018
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/08/24 01:06