投稿2020/05/30 11:31
編集2020/05/31 04:51レスポンシブデザインをつかいたい
1段で2つの文章を横並びで表示しているのですが480pxから2段にしたいと思いコードを書きましたがうまく反応してくれません。
------HTML------
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <link rel="stylesheet" type="text/css" href="style3.css"> </head> <body> <!--Navi--> <!--header--> <div id="container"> <div class="top1 div1"> <h3>なぜAirbnbでホスト?</h3> <p> どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアして、世界中の旅好きな仲間とつながれます。 予約可能日から料金、ハウスルール、ゲストとの交流頻度まで、すべて自分で決めることができます。 </p> </div> <div class="top1 div1"> <h3>困ったときも安心</h3> <p> 万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。 </p> </div> </div></body> </html> ------CSS-------- ``` #container{ width: 100%; height:400px; background-color: gray; display: flex; justify-content: center;<div id="container2"> <h1>3ステップで簡単ホスティング</h1> </div> <div id="container3"> <div class="div2"> <h3> 無料でお部屋を掲載 </h3> <p> 共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。 </p> </div> <div class="div2"> <h3> ホスティング方法を設定 </h3> <p> ご希望のスケジュール、料金、ゲストの要件を選びます。設定の際にはヒントも表示されます。 </p> </div> <div class="div2"> <h3> はじめてのゲストをもてなそう </h3> <p> リスティングが掲載され次第、条件にかなったゲストから連絡を受けとることができます。ゲストの宿泊前にご質問があればメッセージを送信できます。 </p> <a href="#">ホスティングの始め方を学ぶ</a> </div> </div> <!--body-->
}
#container2{
width: 100%;
height: 100px;
background-color: gray;
font-size: 2em;
text-align: center;
margin-bottom: 30px:
}
#container3{
width: 100%
height:400px;
background-color: gray;
display: flex;
justify-content: center;
}
.top1{
width: 32%;
height:50%;
line-height: 1.75em;
margin-top:30px;
padding: 20px
}
```CSS @media screen and (max-width:480px){ .top1{ width:90%; margin:5%; } }
.div1{
background-color: red;
}
.div2{
width: 19%;
height: 50%;
line-height: 1.75em;
padding: 10px;
background-color: blue;
}
囲んでるようにコードを書いたのですが何も反応がないため書いているコードが反映していないみたいです。
お力を貸してください！
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
いくつか、CSSの初歩的なミスがあります。以下を対応してみてください。
[1]
container、container2、container3
など、idのCSSセレクタにおいて、頭に「#」がない問題があります。以下のようにしてください。
#container、#container2、#container3
[2]
#container3 (現状「container3」ですが) のwidth: 100%について末尾に「;」がないです。
[3]
#container2 (現状「container2」ですが) のmargin-bottom: 30px:の末尾を「;」にしてください。
[4] 追記: 以下を追加してみてください。
CSS
1@media screen and (max-width:480px) { 2 #container { 3 display: block; 4 } 5}
[5] 追記: 以下を追加してみてください。
CSS
1.top1 { 2 box-sizing: border-box; 3}
そのほか、widthとpaddingを同時に指定している要素すべてにbox-sizing: border-box;を指定してください
480pxから2段にしたいと思いコードを書きましたが
「480pxより大きなサイズのときは横並び、480px以下のサイズのときは縦並びにしたい」という意味だと認識しました。認識違いがあればご指摘ください。
投稿2020/05/30 12:33
編集2020/05/31 05:14
総合スコア4528
あなたの回答
tips
プレビュー
Q&A
