teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

5

内容の修正

2020/03/15 12:57

投稿

kotouharuto
kotouharuto

スコア38

title CHANGED
File without changes
body CHANGED
@@ -1,7 +1,7 @@
1
1
  ![イメージ説明](8abd812c8c5c059150c50501f76309bf.png)### 前提・実現したいこと
2
2
  サイトのレスポンシブ対応をさせたいです
3
3
  ここに質問の内容を詳しく書い
4
- 現在、html5,css3で模写コーディングをしているのですが、スマホ対応するためにレスポンシブ対応をしたいのですが、画像のように、なぜかElementsパネルでIPHONEXで100%にしても表示されるされるサイズかなり小さくなってしまいます。
4
+ 現在、html5,css3で模写コーディングをしているのですが、スマホ対応するためにレスポンシブ対応をしたいのですが、画像のように、なぜかElementsパネルでIPHONEXで100%にしても表示されるされる位置ずれてしまいます。
5
5
 
6
6
  ドットインストールのサイトにあった物を模写したのでソースコードを確認して直そうと思ったところ、自分のコードとソースコードが全然違ったので直しようがななく困っています。
7
7
  どうしたらいいか教えてください

4

文字の修正

2020/03/15 12:57

投稿

kotouharuto
kotouharuto

スコア38

title CHANGED
File without changes
body CHANGED
@@ -26,7 +26,7 @@
26
26
  ### 該当のソースコード
27
27
  ```html5
28
28
  コード
29
- ```<!DOCTYPE html>
29
+ <!DOCTYPE html>
30
30
  <html lang="ja">
31
31
  <head>
32
32
  <meta charset="utf-8">
@@ -93,76 +93,134 @@
93
93
  </main>
94
94
  </body>
95
95
  </html>
96
+ ```
96
97
  ```css3
97
98
  ソースコード
98
- ```<!DOCTYPE html>
99
- <html lang="ja">
100
- <head>
101
- <meta charset="utf-8">
102
- <title>サイト1</title>
103
- <link rel="stylesheet" href="css/styles.css">
104
- </head>
105
- <body>
99
+ body {
106
- <header>
107
- <h1 class="hh1">すごいアプリ</h1>
108
- <p class="p1">ウルトラすごい最高なアプリです</p>
109
- <a href="" id="btn">ダウンロード</a><br>
110
- <img id="img1" src="MyAwesomeApp/img/top.png">
111
- </header>
112
- <main>
100
+ margin: 0;
113
- <section class="feature1">
114
- <h1 class="hh2">すごい特徴</h1>
115
- <section>
116
- <div class="container">
117
- <img id="img2" src="MyAwesomeApp/img/feature1.png">
118
- <h2 class="hh3">すごい</h2>
119
- <p class="p2">とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
120
- </section>
121
-
122
- <section>
123
- <img id="img2" src="MyAwesomeApp/img/feature2.png">
124
- <h2 class="hh3">すごい</h2>
125
- <p class="p2">とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
126
- </section>
127
-
128
- <section>
129
- <img id="img2" src="MyAwesomeApp/img/feature3.png">
130
- <h2 class="hh3">すごい</h2>
131
- <p class="p2">とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
132
- </section>
133
- </div>
134
- </section>
135
- <section class="members">
136
- <h1>メンバー紹介</h1>
137
- <ul>
101
+ }
138
- <li>
139
- <img id="img3" src="MyAwesomeApp/img/member1.png">
140
- <h2>山田太郎</h2>
141
- <p class="p3">がんばります。がんばります。がんばります</p>
142
- </li>
143
- <li>
144
- <img id="img3" src="MyAwesomeApp/img/member2.png">
145
- <h2>山田二郎</h2>
146
- <p class="p3">がんばります。がんばります。がんばります</p>
147
- </li>
148
- <li>
149
- <img id="img3" src="MyAwesomeApp/img/member3.png">
150
- <h2>山田花子</h2>
151
- <p class="p3">がんばります。がんばります。がんばります</p>
152
- </li>
153
- </ul>
154
- </section>
155
- <section class="info">
156
- <h1>今すぐダウンロード</h1>
157
- <div id="btn">ダウンロード</div>
158
- </section>
159
- <footer>
160
- <p class="p4">&copy;&nbsp;dotinstall.com</p>
161
- </footer>
162
- </main>
163
- </body>
164
- </html>
165
102
 
103
+ header h1,
104
+ .headre p {
105
+ margin: 0;
106
+ }
107
+
108
+ header {
109
+ background: orange;
110
+ color: white;
111
+ text-align: center;
112
+ padding-top: 40px;
113
+ }
114
+
115
+ header img {
116
+ width: 280px;
117
+ vertical-align: bottom;
118
+ }
119
+
120
+ #btn {
121
+ width: 140px;
122
+ line-height: 44px;
123
+ background: white;
124
+ text-decoration: none;
125
+ color: orange;
126
+ font-weight: bold;
127
+ font-size: 14px;
128
+ margin: 40px auto 48px;
129
+ display: block;
130
+ border-radius: 4px;
131
+ text-align: center;
132
+ }
133
+
134
+ #btn:hover {
135
+ cursor: pointer;
136
+ opacity: 0.8;
137
+ }
138
+
139
+ .hh2 {
140
+ padding: 30px;
141
+ text-align: center;
142
+ font-weight: normal;
143
+ }
144
+
145
+ #img2 {
146
+ padding: 20px 75px;
147
+ }
148
+
149
+ .p2 {
150
+ padding-left: 72px;
151
+ }
152
+
153
+ .hh3 {
154
+ font-size: 20px;
155
+ padding: 10px 72px;
156
+ margin: 0px;
157
+ }
158
+
159
+ .members ul {
160
+ list-style: none;
161
+ margin: 0;
162
+ }
163
+
164
+ .members h1 {
165
+ font-weight: normal;
166
+ font-size: 23px;
167
+ text-align: center;
168
+ padding-top: 70px;
169
+ }
170
+
171
+ .members h2 {
172
+ font-size: 20px;
173
+ }
174
+
175
+ #img3 {
176
+ border-radius: 50%;
177
+ width: 155px;
178
+ }
179
+
180
+ .members {
181
+ background: rgb(238, 238, 238);
182
+ text-align: center;
183
+ margin: 0;
184
+ padding: 0;
185
+ }
186
+
187
+ ul li {
188
+ margin: 0;
189
+ }
190
+
191
+ .members p {
192
+ padding-bottom: 70px;
193
+ margin: 0;
194
+ }
195
+
196
+ .info {
197
+ background: orange;
198
+ margin: 0;
199
+ padding: 64px 0;
200
+
201
+ }
202
+
203
+ .info h1 {
204
+ font-weight: normal;
205
+ color: white;
206
+ text-align: center;
207
+ }
208
+
209
+ footer {
210
+ background: rgb(57, 56, 56);
211
+ height: 150px;
212
+ }
213
+ .p4 {
214
+ color: rgb(199, 189, 189);
215
+ margin: 0;
216
+ text-align: center;
217
+ align-items: center;
218
+ line-height: 140px;
219
+ }
220
+
221
+ ```
222
+
223
+
166
224
  ### 試したこと
167
225
 
168
226
  ここに問題に対して試したことを記載してください。

3

文字の修正

2020/03/15 02:56

投稿

kotouharuto
kotouharuto

スコア38

title CHANGED
File without changes
body CHANGED
@@ -1,8 +1,7 @@
1
- ### 前提・実現したいこと
1
+ ![イメージ説明](8abd812c8c5c059150c50501f76309bf.png)### 前提・実現したいこと
2
2
  サイトのレスポンシブ対応をさせたいです
3
3
  ここに質問の内容を詳しく書い
4
- 現在、html5,css3で模写コーディングをしているのですが、スマホ対応するためにレスポンシブ対応をしたいのですが、
4
+ 現在、html5,css3で模写コーディングをしているのですが、スマホ対応するためにレスポンシブ対応をしたいのですが、画像のように、なぜかElementsパネルでIPHONEXで100%にしても表示されるされるサイズがかなり小さくなってしまいます。
5
- なぜかElementsパネルでIPHONEXで100%にしても表示されるされるサイズがかなり小さくなってしまいます。
6
5
 
7
6
  ドットインストールのサイトにあった物を模写したのでソースコードを確認して直そうと思ったところ、自分のコードとソースコードが全然違ったので直しようがななく困っています。
8
7
  どうしたらいいか教えてください

2

文法の修正

2020/03/15 02:51

投稿

kotouharuto
kotouharuto

スコア38

title CHANGED
File without changes
body CHANGED
@@ -9,6 +9,24 @@
9
9
  ここに言語を入力
10
10
  ```html5,css3
11
11
  コード
12
+ ```
13
+
14
+
15
+
16
+
17
+
18
+
19
+ ■■な機能を実装中に以下のエラーメッセージが発生しました。
20
+
21
+ ### 発生している問題・エラーメッセージ
22
+ ```pc版サイトは平気だが、スマホ版で表示すると、サイズが小さくなってしまう。
23
+
24
+ エラーメッセージ
25
+ ```無し
26
+
27
+ ### 該当のソースコード
28
+ ```html5
29
+ コード
12
30
  ```<!DOCTYPE html>
13
31
  <html lang="ja">
14
32
  <head>
@@ -76,145 +94,75 @@
76
94
  </main>
77
95
  </body>
78
96
  </html>
79
-
80
-
81
-
82
- body {
83
- margin: 0;
84
- }
85
-
86
- header h1,
87
- .headre p {
88
- margin: 0;
89
- }
90
-
91
- header {
92
- background: orange;
93
- color: white;
94
- text-align: center;
95
- padding-top: 40px;
96
- }
97
-
98
- header img {
99
- width: 280px;
100
- vertical-align: bottom;
101
- }
102
-
103
- #btn {
104
- width: 140px;
105
- line-height: 44px;
106
- background: white;
107
- text-decoration: none;
108
- color: orange;
109
- font-weight: bold;
110
- font-size: 14px;
111
- margin: 40px auto 48px;
112
- display: block;
113
- border-radius: 4px;
114
- text-align: center;
115
- }
116
-
117
- #btn:hover {
118
- cursor: pointer;
119
- opacity: 0.8;
120
- }
121
-
122
- .hh2 {
123
- padding: 30px;
124
- text-align: center;
125
- font-weight: normal;
126
- }
127
-
128
- #img2 {
129
- padding: 20px 75px;
130
- }
131
-
132
- .p2 {
133
- padding-left: 72px;
134
- }
135
-
136
- .hh3 {
137
- font-size: 20px;
138
- padding: 10px 72px;
139
- margin: 0px;
140
- }
141
-
142
- .members ul {
143
- list-style: none;
144
- margin: 0;
145
- }
146
-
147
- .members h1 {
148
- font-weight: normal;
149
- font-size: 23px;
150
- text-align: center;
151
- padding-top: 70px;
152
- }
153
-
154
- .members h2 {
155
- font-size: 20px;
156
- }
157
-
158
- #img3 {
159
- border-radius: 50%;
160
- width: 155px;
161
- }
162
-
163
- .members {
164
- background: rgb(238, 238, 238);
165
- text-align: center;
166
- margin: 0;
167
- padding: 0;
168
- }
169
-
170
- ul li {
171
- margin: 0;
172
- }
173
-
174
- .members p {
175
- padding-bottom: 70px;
176
- margin: 0;
177
- }
178
-
179
- .info {
180
- background: orange;
181
- margin: 0;
182
- padding: 64px 0;
183
-
184
- }
185
-
186
- .info h1 {
187
- font-weight: normal;
188
- color: white;
189
- text-align: center;
190
- }
191
-
192
- footer {
193
- background: rgb(57, 56, 56);
194
- height: 150px;
195
- }
196
- .p4 {
197
- color: rgb(199, 189, 189);
198
- margin: 0;
199
- text-align: center;
200
- align-items: center;
201
- line-height: 140px;
202
- }
203
-
204
-
205
- ■■な機能を実装中に以下のエラーメッセージが発生しました。
206
-
207
- ### 発生している問題・エラーメッセージ
208
- ```pc版サイトは平気だが、スマホ版で表示すると、サイズが小さくなってしまう。
209
-
210
- エラーメッセージ
211
- ```無し
97
+ ```css3
212
-
213
- ### 該当のソースコード
214
-
215
- ```ここに言語名を入力
216
98
  ソースコード
99
+ ```<!DOCTYPE html>
100
+ <html lang="ja">
101
+ <head>
102
+ <meta charset="utf-8">
103
+ <title>サイト1</title>
104
+ <link rel="stylesheet" href="css/styles.css">
105
+ </head>
106
+ <body>
107
+ <header>
108
+ <h1 class="hh1">すごいアプリ</h1>
109
+ <p class="p1">ウルトラすごい最高なアプリです</p>
110
+ <a href="" id="btn">ダウンロード</a><br>
111
+ <img id="img1" src="MyAwesomeApp/img/top.png">
112
+ </header>
113
+ <main>
114
+ <section class="feature1">
115
+ <h1 class="hh2">すごい特徴</h1>
116
+ <section>
117
+ <div class="container">
118
+ <img id="img2" src="MyAwesomeApp/img/feature1.png">
119
+ <h2 class="hh3">すごい</h2>
120
+ <p class="p2">とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
121
+ </section>
122
+
123
+ <section>
124
+ <img id="img2" src="MyAwesomeApp/img/feature2.png">
125
+ <h2 class="hh3">すごい</h2>
126
+ <p class="p2">とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
127
+ </section>
128
+
129
+ <section>
130
+ <img id="img2" src="MyAwesomeApp/img/feature3.png">
131
+ <h2 class="hh3">すごい</h2>
132
+ <p class="p2">とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
133
+ </section>
134
+ </div>
135
+ </section>
136
+ <section class="members">
137
+ <h1>メンバー紹介</h1>
217
- ```
138
+ <ul>
139
+ <li>
140
+ <img id="img3" src="MyAwesomeApp/img/member1.png">
141
+ <h2>山田太郎</h2>
142
+ <p class="p3">がんばります。がんばります。がんばります</p>
143
+ </li>
144
+ <li>
145
+ <img id="img3" src="MyAwesomeApp/img/member2.png">
146
+ <h2>山田二郎</h2>
147
+ <p class="p3">がんばります。がんばります。がんばります</p>
148
+ </li>
149
+ <li>
150
+ <img id="img3" src="MyAwesomeApp/img/member3.png">
151
+ <h2>山田花子</h2>
152
+ <p class="p3">がんばります。がんばります。がんばります</p>
153
+ </li>
154
+ </ul>
155
+ </section>
156
+ <section class="info">
157
+ <h1>今すぐダウンロード</h1>
158
+ <div id="btn">ダウンロード</div>
159
+ </section>
160
+ <footer>
161
+ <p class="p4">&copy;&nbsp;dotinstall.com</p>
162
+ </footer>
163
+ </main>
164
+ </body>
165
+ </html>
218
166
 
219
167
  ### 試したこと
220
168
 

1

書き途中で誤って投稿してしまったため。

2020/03/15 02:47

投稿

kotouharuto
kotouharuto

スコア38

title CHANGED
File without changes
body CHANGED
@@ -1,18 +1,214 @@
1
1
  ### 前提・実現したいこと
2
2
  サイトのレスポンシブ対応をさせたいです
3
3
  ここに質問の内容を詳しく書い
4
+ 現在、html5,css3で模写コーディングをしているのですが、スマホ対応するためにレスポンシブ対応をしたいのですが、
5
+ なぜかElementsパネルでIPHONEXで100%にしても表示されるされるサイズがかなり小さくなってしまいます。
4
6
 
7
+ ドットインストールのサイトにあった物を模写したのでソースコードを確認して直そうと思ったところ、自分のコードとソースコードが全然違ったので直しようがななく困っています。
8
+ どうしたらいいか教えてください
5
9
  ここに言語を入力
6
- ```
10
+ ```html5,css3
7
11
  コード
12
+ ```<!DOCTYPE html>
13
+ <html lang="ja">
14
+ <head>
15
+ <meta charset="utf-8">
16
+ <title>サイト1</title>
17
+ <link rel="stylesheet" href="css/styles.css">
18
+ </head>
19
+ <body>
20
+ <header>
21
+ <h1 class="hh1">すごいアプリ</h1>
22
+ <p class="p1">ウルトラすごい最高なアプリです</p>
23
+ <a href="" id="btn">ダウンロード</a><br>
24
+ <img id="img1" src="MyAwesomeApp/img/top.png">
25
+ </header>
26
+ <main>
27
+ <section class="feature1">
28
+ <h1 class="hh2">すごい特徴</h1>
29
+ <section>
30
+ <div class="container">
31
+ <img id="img2" src="MyAwesomeApp/img/feature1.png">
32
+ <h2 class="hh3">すごい</h2>
33
+ <p class="p2">とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
34
+ </section>
35
+
36
+ <section>
37
+ <img id="img2" src="MyAwesomeApp/img/feature2.png">
38
+ <h2 class="hh3">すごい</h2>
39
+ <p class="p2">とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
40
+ </section>
41
+
42
+ <section>
43
+ <img id="img2" src="MyAwesomeApp/img/feature3.png">
44
+ <h2 class="hh3">すごい</h2>
45
+ <p class="p2">とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
46
+ </section>
47
+ </div>
48
+ </section>
49
+ <section class="members">
50
+ <h1>メンバー紹介</h1>
51
+ <ul>
52
+ <li>
53
+ <img id="img3" src="MyAwesomeApp/img/member1.png">
54
+ <h2>山田太郎</h2>
55
+ <p class="p3">がんばります。がんばります。がんばります</p>
56
+ </li>
57
+ <li>
58
+ <img id="img3" src="MyAwesomeApp/img/member2.png">
59
+ <h2>山田二郎</h2>
60
+ <p class="p3">がんばります。がんばります。がんばります</p>
61
+ </li>
62
+ <li>
63
+ <img id="img3" src="MyAwesomeApp/img/member3.png">
64
+ <h2>山田花子</h2>
65
+ <p class="p3">がんばります。がんばります。がんばります</p>
66
+ </li>
67
+ </ul>
68
+ </section>
69
+ <section class="info">
70
+ <h1>今すぐダウンロード</h1>
71
+ <div id="btn">ダウンロード</div>
72
+ </section>
73
+ <footer>
74
+ <p class="p4">&copy;&nbsp;dotinstall.com</p>
75
+ </footer>
76
+ </main>
77
+ </body>
78
+ </html>
79
+
80
+
81
+
82
+ body {
83
+ margin: 0;
84
+ }
85
+
86
+ header h1,
87
+ .headre p {
88
+ margin: 0;
89
+ }
90
+
91
+ header {
92
+ background: orange;
93
+ color: white;
94
+ text-align: center;
95
+ padding-top: 40px;
96
+ }
97
+
98
+ header img {
99
+ width: 280px;
100
+ vertical-align: bottom;
101
+ }
102
+
103
+ #btn {
104
+ width: 140px;
105
+ line-height: 44px;
106
+ background: white;
107
+ text-decoration: none;
108
+ color: orange;
109
+ font-weight: bold;
110
+ font-size: 14px;
111
+ margin: 40px auto 48px;
112
+ display: block;
113
+ border-radius: 4px;
114
+ text-align: center;
115
+ }
116
+
117
+ #btn:hover {
118
+ cursor: pointer;
119
+ opacity: 0.8;
120
+ }
121
+
122
+ .hh2 {
123
+ padding: 30px;
124
+ text-align: center;
125
+ font-weight: normal;
126
+ }
127
+
128
+ #img2 {
129
+ padding: 20px 75px;
130
+ }
131
+
8
- ```
132
+ .p2 {
133
+ padding-left: 72px;
134
+ }
135
+
136
+ .hh3 {
137
+ font-size: 20px;
138
+ padding: 10px 72px;
139
+ margin: 0px;
140
+ }
141
+
142
+ .members ul {
143
+ list-style: none;
144
+ margin: 0;
145
+ }
146
+
147
+ .members h1 {
148
+ font-weight: normal;
149
+ font-size: 23px;
150
+ text-align: center;
151
+ padding-top: 70px;
152
+ }
153
+
154
+ .members h2 {
155
+ font-size: 20px;
156
+ }
157
+
158
+ #img3 {
159
+ border-radius: 50%;
160
+ width: 155px;
161
+ }
162
+
163
+ .members {
164
+ background: rgb(238, 238, 238);
165
+ text-align: center;
166
+ margin: 0;
167
+ padding: 0;
168
+ }
169
+
170
+ ul li {
171
+ margin: 0;
172
+ }
173
+
174
+ .members p {
175
+ padding-bottom: 70px;
176
+ margin: 0;
177
+ }
178
+
179
+ .info {
180
+ background: orange;
181
+ margin: 0;
182
+ padding: 64px 0;
183
+
184
+ }
185
+
186
+ .info h1 {
187
+ font-weight: normal;
188
+ color: white;
189
+ text-align: center;
190
+ }
191
+
192
+ footer {
193
+ background: rgb(57, 56, 56);
194
+ height: 150px;
195
+ }
196
+ .p4 {
197
+ color: rgb(199, 189, 189);
198
+ margin: 0;
199
+ text-align: center;
200
+ align-items: center;
201
+ line-height: 140px;
202
+ }
203
+
204
+
9
205
  ■■な機能を実装中に以下のエラーメッセージが発生しました。
10
206
 
11
207
  ### 発生している問題・エラーメッセージ
12
-
13
- ```
208
+ ```pc版サイトは平気だが、スマホ版で表示すると、サイズが小さくなってしまう。
209
+
14
210
  エラーメッセージ
15
- ```
211
+ ```無し
16
212
 
17
213
  ### 該当のソースコード
18
214
 
@@ -23,7 +219,11 @@
23
219
  ### 試したこと
24
220
 
25
221
  ここに問題に対して試したことを記載してください。
26
-
222
+ ・各要素のwidthの変更
223
+ ・googleでレスポンシブ対応について調べる
224
+ ・googleで、「レスポンシブ対応 要素が小さくなる」と調べたが、いまいちわからない
27
225
  ### 補足情報(FW/ツールのバージョンなど)
28
-
226
+ ・pc -> macbook air 13インチ
227
+ ・ブラウザ -> 最新のchroomeブラウザ
228
+ ・テキストエディタ -> 最新のvscode
29
229
  ここにより詳細な情報を記載してください。