質問編集履歴
2
質問してから再度試したことの項目をＰＨＰのコードに新たに、「フリガナ」「電話番号」のＨＴＭＬと、ＣＳＳのコードにそのデザインのコードを追加しました。追加しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -8,12 +8,24 @@
|
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
|
+
入力フォームの名前のフォーム１つだけならきちんとレスポンシブ対応きちんと適応されます。しかし、**名前のフォーム以外に「フリガナ」「電話番号」のＨＴＭＬとＣＳＳをコードに追加すると、付属画像のようにレスポンスがおかしくなってしまいます。**
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
11
15
|
**試したこと**
|
|
12
16
|
|
|
13
17
|
レスポンシブ対応のＣＳＳコードにwitdh１００％と記載した入力フォームと記載していない入力フォームをクロームのレスポンシブ確認画面で比べてみたのですが、witdh１００％と書いたフォームは確かに真ん中の配置に近くなっています。witdh１００％と書いていないフォームは全然はみ出ていましたので、適応されていないはずはないと思うのですけども。途方に暮れています。
|
|
14
18
|
|
|
15
19
|
|
|
16
20
|
|
|
21
|
+
**質問してから再度試したこと**
|
|
22
|
+
|
|
23
|
+
確かに回答に下さった通り、提示したコードでレスポンシブ対応はきちんとされていました。しかし、複数入力フォームがあるのですが、名前を入力するフォームのみなら、ｐｈｐコード内にあるＨＴＭＬとＣＳＳでレスポンシブ対応はきちんとなりました。しかし、名前のフォーム以外にも「フリガナ」「電話番号」のＨＴＭＬとＣＳＳをコードに追加すると、付属画像のようにレスポンスがおかしくなってしまいます。
|
|
24
|
+
|
|
25
|
+
**ＰＨＰのコードに新たに、「フリガナ」「電話番号」のＨＴＭＬと、ＣＳＳのコードにそのデザインのコードを追加しました。**
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
17
29
|
**付属画像**
|
|
18
30
|
|
|
19
31
|
４１１ｐｘの画像 ＯＫ
|
|
@@ -164,6 +176,26 @@
|
|
|
164
176
|
|
|
165
177
|
|
|
166
178
|
|
|
179
|
+
<p class="px-num">
|
|
180
|
+
|
|
181
|
+
フリガナ：※
|
|
182
|
+
|
|
183
|
+
</p>
|
|
184
|
+
|
|
185
|
+
<input type="text" class="furigana" name="furigana" id="furigana" value="<?php if(isset($furigana)){ echo $furigana; } ?>"/>
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
<p class="px-num">
|
|
190
|
+
|
|
191
|
+
電話番号：※
|
|
192
|
+
|
|
193
|
+
</p>
|
|
194
|
+
|
|
195
|
+
|
|
196
|
+
|
|
197
|
+
<input type="text" class="tel" name="tel" id="tel" value="<?php if(isset($tel)){ echo $tel; } ?>"/>
|
|
198
|
+
|
|
167
199
|
</div>
|
|
168
200
|
|
|
169
201
|
|
|
@@ -216,6 +248,50 @@
|
|
|
216
248
|
|
|
217
249
|
}
|
|
218
250
|
|
|
251
|
+
#furigana {
|
|
252
|
+
|
|
253
|
+
|
|
254
|
+
|
|
255
|
+
border: 3px solid #63e02d; /* 枠線 */
|
|
256
|
+
|
|
257
|
+
padding: 0.5em; /* 内側の余白量 */
|
|
258
|
+
|
|
259
|
+
background-color: snow; /* 背景色 */
|
|
260
|
+
|
|
261
|
+
width: 27.8em; /* 横幅 */
|
|
262
|
+
|
|
263
|
+
height: 36px; /* 高さ */
|
|
264
|
+
|
|
265
|
+
font-size: 1em; /* テキスト内の表示文字サイズ */
|
|
266
|
+
|
|
267
|
+
line-height: 1.2; /* 行の高さ */
|
|
268
|
+
|
|
269
|
+
box-sizing: border-box;
|
|
270
|
+
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
|
|
274
|
+
|
|
275
|
+
#tel {
|
|
276
|
+
|
|
277
|
+
|
|
278
|
+
|
|
279
|
+
border: 3px solid #63e02d; /* 枠線 */
|
|
280
|
+
|
|
281
|
+
padding: 0.5em; /* 内側の余白量 */
|
|
282
|
+
|
|
283
|
+
background-color: snow; /* 背景色 */
|
|
284
|
+
|
|
285
|
+
width: 27.8em; /* 横幅 */
|
|
286
|
+
|
|
287
|
+
height: 36px; /* 高さ */
|
|
288
|
+
|
|
289
|
+
font-size: 1em; /* テキスト内の表示文字サイズ */
|
|
290
|
+
|
|
291
|
+
line-height: 1.2; /* 行の高さ */
|
|
292
|
+
|
|
293
|
+
}
|
|
294
|
+
|
|
219
295
|
```
|
|
220
296
|
|
|
221
297
|
ｃｓｓのレスポンシブ対応コード(responsive.css)
|
1
スペルすミスでコード修正しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -218,7 +218,7 @@
|
|
|
218
218
|
|
|
219
219
|
```
|
|
220
220
|
|
|
221
|
-
ｃｓｓのレスポンシブ対応コード(responsiv.css)
|
|
221
|
+
ｃｓｓのレスポンシブ対応コード(responsive.css)
|
|
222
222
|
|
|
223
223
|
```css
|
|
224
224
|
|