html, css スマホ表示時のbodyの表示がうまくいかない

発生している問題・エラーメッセージ

google chromeの検証機能でスマホ表示にかえると背景とbodyの幅が合わない

該当のソースコード

html5
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewpoint" content="width=device-width,initial-scale=1">
6  <title>portfolio</title>
7  <link href="https://fonts.googleapis.com/css2?family=Bitter:wght@700&display=swap" rel="stylesheet">
8  <link href="https://fonts.googleapis.com/css2?family=Tangerine:wght@700&display=swap" rel="stylesheet">
9  <link href="https://fonts.googleapis.com/css2?family=Sriracha&display=swap" rel="stylesheet">
10  <link href="https://fonts.googleapis.com/css?family=Oswald:700" rel="stylesheet">
11  <link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c" rel="stylesheet">
12  <link href="css/style.css"rel="stylesheet">
13</head>
14<body id="portfolio">
15  
16  <!-- header 始まり !-->
17  <header>
18    <div class="logo">
19     <a href="my%20portfolio.html">Portfolio</a>
20    </div>
21    <nav>
22     <ul class="global-nav">
23      <li><a href="my%20portfolio.html#profile">PROFILE</a></li>
24      <li><a href="my%20portfolio.html#skill">SKILL</a></li>
25      <li><a href="my%20portfolio.html#works">WORKS</a></li>
26      <li><a href="my%20portfolio.html#contact">CONTACT</a></li>
27      </ul>
28    </nav>
29  <div class="top">
30    <svg width="410" height="100" viewBox="0 0 410 100" xmlns="http://www.w3.org/2000/svg"><g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0.25mm" fill="#000" style="stroke:#000;stroke-width:0.25mm;fill:#000"><path class="topfont" d=<!-- 省略 !-->" vector-effect="non-scaling-stroke"/></g></svg>
31  </div>
32  </header>
33  <!-- header終わり !-->
34
35  <div id="wrap">
36  <section id="profile">
37  <h1>PLOFILE</h1>
38    <div class="photo">
39  <img src="" alt="my face" class="profile-image">
40    </div>
41  <h2>〇〇</h2>
42  <div class="introduction">
43    <p>国立大学でエネルギー政策を学んでいる大学1年生です。<br>webデザイナーとしての実績はまだありませんが、期日を守り、クライアントの要望にお応えできるように努めて参ります。</p>
44  </div>
45  </section>
46  <section id="skill">
47   <h1>SKILL</h1>
48   <div class="container">
49     <div class="item"><img src="image/html.png">
50      </div>
51     <div class="item"><img src="image/css.png">
52      </div>
53     <div class="item"><img src="image/js.png">
54     </div>
55   </div>
56  </section>
57  <section id="works">
58   <h1>WORKS</h1>
59   <div class="site">
60    <img src="">
61    </div>
62  </section>
63  <section id="contact">
64      <h1>CONTACT</h1>
65    <iframe class="google" src="https://docs.google.com/forms/d/e/1FAIpQLSeMvZfCy9ZHBWzYGyXlYf3pv34eq0Mwglb8hntCvrEHPS7Nxg/viewform?embedded=true" width="640" height="800" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>
66      </section>
67    </div>
68  
69  <!-- footer始まり -->
70  <footer>
71   <small>(c) 2021 sko. ALL RIGHT RESERVED</small>
72  </footer>
73  <!-- footer終わり -->
74</body>
75</html>

css3
1@charset "utf-8";
2  
3body {
4    margin: 0;
5    padding: 0;
6    font-size: 20px;
7    line-height: 2;
8}
9
10p,h1,h2,h3,h4,h5,h6 {
11  margin-top: 0;
12}
13
14img {
15  vertical-align: 0;
16}
17
18ul {
19  margin: 0;
20  padding: 0;
21}
22
23a {
24  color: #3583aa;
25  text-decoration: none;
26}
27
28a:visited {
29  color: #788d98;
30}
31
32a:hover {
33  text-decoration: underline;
34}
35
36header {
37  width: 100%;
38  height: 600px;
39}
40
41.logo {
42  float: left;
43  margin: 10px 0 0 10px;
44}
45
46.logo a {
47  font-family: 'Sriracha', cursive;
48  font-size: 30px;
49}
50
51.global-nav {
52  float: right;
53  margin: 10px;
54}
55
56.global-nav li {
57  float: left;
58  margin: 0 20px;
59  font-size: 30px;
60  list-style: none;
61}
62
63.global-nav li a {
64  color: #3583aa;
65  font-family: 'better', serif;
66}
67
68.global-nav li a:hover {
69  border-bottom: 2px solid #ffffff;
70  padding-bottom: 3px;
71  text-decoration: none;
72  color: #cccccc;
73}
74
75.top {
76  clear: both;
77  text-align: center;
78  padding-top: 150px;
79}
80
81.topfont{
82    stroke: #000;
83    fill: #00ffff;
84    stroke-width: 2.5;
85    stroke-dasharray:  4000;
86    stroke-dashoffset: 4000;
87    animation: DASH 8s ease-in-out alternate 0s forwards;
88    -webkit-animation: DASH 8s ease-in-out alternate 0s forwards;
89}
90
91@keyframes DASH {
92    0% {
93        stroke-dashoffset: 4000;
94        }
95    100% {
96        stroke-dashoffset: 0;
97        }
98    }
99
100@-webkit-keyframes DASH {
101    0% {
102        stroke-dashoffset: 4000;
103    }
104    100% {
105        stroke-dashoffset: 0;
106      }
107    }
108
109#portfolio {
110  background-image: url(../image/background-a.jpg);
111  background-repeat: no-repeat;
112  background-position: center top;
113  background-attachment: fixed;
114  background-size: 100% auto;
115}
116
117#wrap {
118  clear: both;
119  background-color: #ffffff;
120}
121
122#wrap p {
123  font-family: "M PLUS Rounded 1c";
124}
125
126#profile {
127  width: auto;
128  height: 800px;
129}
130
131.photo {
132  text-align: center;
133}
134
135.profile-image {
136  width: 300px;
137  height: 300px;
138  border-radius: 50%;
139  overflow: hidden;
140}
141
142.introduction {
143  width: 80%;
144  margin: 0 auto;
145}
146.introduction p {
147  font-size: 28px;
148}
149
150#skill {
151  width: auto;
152  height: 800px;
153  background-color: #eaeaea;
154}
155
156.container {
157  margin-top: 150px;
158  display: flex;
159  flex-direction: row;
160  justify-content: center;
161}
162
163.item {
164  margin:0 20px;
165}
166
167h1,h2 {
168  text-align: center;
169  font-family: 'Oswald', sans-serif;
170  font-size: 50px;
171}
172
173#works {
174  width: 100%;
175  height: 800px;
176}
177
178#contact {
179  background-color: #eaeaea;
180  height: 1000px;
181  width: 100%;
182  margin: 0 auto;
183}
184#contact .form {
185  padding: 30px 15%;
186}
187
188.google {
189  padding: 0 26%;
190}
191
192#contact .form dl dt {
193  width: 165px;
194  padding: 21px 0;
195  float: left;
196  clear: both;
197}
198
199#contact .form dl dd {
200  padding: 20px 0;
201}
202
203#contact .form .name {
204  width: 240px;
205  height: 30px;
206}
207
208#contact .form .email {
209  width: 300px;
210  height: 30px;
211}
212
213#contact .form .message {
214  width: 660px;
215  height: 150px;
216}
217
218#contact .form button {
219  background-color: #009cd3;
220  color: #ffffff;
221  font-size: 20px;
222  width: 120px;
223  display: block;
224  text-align: center;
225  line-height: 50px;
226  border-radius: 5px;
227  border: 3px solid #009cd3;
228  margin: 0 auto;
229}
230
231#contact .form button:hover {
232  background-color: #ffffff;
233  color: #009cd3;
234  cursor: pointer;
235}
236
237footer {
238  text-align: center;
239  background-color: #696969;
240}
241
242

行動規範の内容に同意します

回答1件

ベストアンサー

html
1<iframe class="google" src="https://docs.google.com/forms/d/e/1FAIpQLSeMvZfCy9ZHBWzYGyXlYf3pv34eq0Mwglb8hntCvrEHPS7Nxg/viewform?embedded=true" width="640" height="800" frameborder="0" marginheight="0" marginwidth="0">

上記で iframe の幅を640pxに固定していて、
それに対して、下記のCSSで左右パディングを26%指定しているので、画面幅の 100%-26%*2＝48% が640px以下になったら画面幅からはみ出します。

css
1.google {
2  padding: 0 26%;
3}

このパディングを外せば、画面幅640pxまでは収まります。
640px以下でもはみ出さないようにしたいなら、HTMLのwidth="640"を削除して、CSSで下記のように設定すればいいでしょう。

CSS
1.google {
2  width: 640px;
3  max-width: 100%;
4}

投稿2021/02/28 06:22

hatena19

総合スコア34073

sasaki0757

2021/02/28 06:41

回答していただきありがとうございます。wrap要素にoverflow: hidden;をかけてみたところ右側にある余白がなくなりました。解決しました。

hatena19

2021/02/28 07:14

根本的な解決法ではないと思います。画面幅がせまくなるとフォームが欠けてしまいます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

html, css スマホ表示時のbodyの表示がうまくいかない

発生している問題・エラーメッセージ

該当のソースコード

関連した質問