Q&A
ソースコードは<code>の中に書かないときちんと表示されませんよー
修正お願いします。
メディアクエリを使って1000px以下になったら要素の横幅を100%に変更したいです。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>要素の配置換え</title> <link rel="stylesheet" type="text/css" href="base.css"> <meta name="viewport" content="width=device-width,initial-scale=1"> </head> <body> <div id="wrapper"> <div id="box1"> </div><!-- box1 --> <div id="box2"> </div><!-- box2 --> </div><!-- wrapper --> </body> </html>@charset "UTF-8";
/* reset */
body, h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd, img, form, table, tr, th, td {
margin: 0;
padding: 0;
border: none;
font-style: normal;
font-weight: normal;
font-size: 100%;
text-align: left;
list-style-type: none;
border-collapse: collapse;
}
textarea { font-size: 100%; vertical-align:middle;}
img { border-style: none; display: block; }
hr { display: none; }
em{font-style: normal}
input{line-height:auto;vertical-align:middle;}
strong.more{color:#c30}
a{text-decoration: none;}
html {
}
body {
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}
- {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
/* 上の部分は気にせずここから書く */
#wrapper{
display: flex;
justify-content: center;
}
#box1{
background-color:#cc0000;
width: 600px;
height: 200px;
}
#box2{
background-color:#1760a0;
width: 600px;
height: 200px;
}
#box1,#box2 {
display: flex;
}
@media screen and(max-width:1000px;){
#box1,#box2{width:100%;
}
}
今の状態だと画面を小さくしてもbox1,2がそのまま横に縮まるだけになってしまいます。どうすればよろしいかご教授いただきたいです。
あと、ここに貼り付けて投稿するとCSSで書いたものが文字が大きくなったり＃が反映されないのですがどうしてかわかりません。
回答1件
0
ベストアンサー
現状はFlexboxレイアウトで横並びになってますが、1000px以下は縦並びにして幅を100%にしたいということでしょうか。
まず、メディアクエリの記述が間違っています。
andの後に半角空白が必用。max-width:1000px;の末尾の;が不要
あと、display: flex;での横並びをdisplay: block;で打ち消す。
修正例
css
1@media screen and (max-width:1000px){ 2 #box1,#box2{ 3 width:100%; 4 } 5 #wrapper{ 6 display: block; 7 } 8}
投稿2021/11/21 21:40
総合スコア34075
あなたの回答
tips
プレビュー
