Q&A
レスポンシブ対応のCSSは何も書いてない（ある程度以上のウィンドウサイズで綺麗に表示されるような作りにしかなってない）のですよね？
対応するCSSを書いてくださいとしか言いようがない気がします。
「css レスポンシブ」とか「css スマホ対応」とかで出てくるページを少し見てみてください。
一例 https://www.site-convert.com/archives/1528
レスポンシブについてです。
Airbnbのサイトを模写しています。
ここにコードを書くには長いので、GitHubから見てくれると助かります。
PC版の模写が終わったので、レスポンシブをしようと検証ツールでサイズを小さくしたら、右側に大きな空白ができてしまいます。
これはなぜでしょうか？
勉強をはじめて1ヶ月なので、初歩的なところが分かっておりません。
よろしくお願いいたします。
メディアクエリを設定しようとしたら、画面を少し小さくするだけで、中心の軸がずれて要素が全部左になり、右側に空白ができてしまいます。width100%と指定しているところもそうなるので、なにかおかしいかな？ と思って質問しました。
.main-topや.serviceなど、width: 100%;ですがさらにpaddingの指定があります。
box-sizing: border-box;などを入れないと100%+padding分になるので横に広がったようになってしまうのでは？
全部を確認していないのでそれだけではないと思いますがある程度解消できそうです。
高さが固定になっているところもあるのでそちらの修正もしないとコンテンツが重なったりしそうですね。
ご指摘ありがとうございます。
https://teratail.com/questions/318074
こっちの質問にコメントしてるみたいだけど、削除申請でもされているのか、全く見えません。
にもかかわらず、自分の方には通知だけが来るので、勘弁して欲しいです。
どうせ mts 氏とやり合ってるんだろうけど。
通知が来るのが嫌なら、なぜわざわざ粘着するような書き方するのですか？ 嫌がらせですか？ 質問リテラシーについて文句をいうのなら、あなたこそ回答リテラシーについて考えてみてはいかがですか？ 関わってきたのはあなたなのに、勘弁してほしいとか、こっちこそ迷惑です。
以後気をつけますって書いたのであれば、今回の質問から対応しましょうよ。
回答者は与えるものあるけど、質問者から与えられるものはないんだから、そこはちゃんとしようよ。
え？
別に対応しません、納得できませんとか、一言もいってませんが？ なにを勘違いされてるのですか？
質問非表示になっているのはなぜ？
あなたは関わってきて、関わるなといってきて、その上、なぜかと聞いてくるとか、迷惑です。やめてください。勘弁してほしいのはこっちです。質問に答えないのに、なぜあなたの質問に答えないといけない？
了解、回答を投稿しようと回答作っていたけど、無駄になってしまったようですね。
質問削除されたらその労力が無駄になってしまったのが残念です。
模写コーディングなのに宣伝だといわれ、納得できないとかいってないのにケチをつけられる。純粋に質問しただけなのに、とても不快になりました。
それ、mts氏のことでしょう？勘違いしてません？
回答を用意してくれたことには感謝します。時間を無駄にさせてすみません。
回答1件
0
ベストアンサー
こんにちは。
これはなぜでしょうか？
.main-top .service, .main-textがはみ出しています。
子要素の幅が親要素より大きい場合、over-flowに何も指定しなければ、はみ出します。
内容はクリッピングされず、パディングボックスの外側に表示されることがあります。
overflow - CSS: カスケーディングスタイルシート | MDN
とりあえず、以下のスタイルを末尾に追加すると、右側の空白はなくなりました。
（別の部分で崩れが出ていますが）
css
1.main-top, 2.service, 3.main-text{ 4 box-sizing: border-box; 5} 6.main-text{ 7 width: 100%; 8}
投稿2021/01/22 02:53
総合スコア36930
あなたの回答
tips
プレビュー
