質問編集履歴

3

現状のhtml のコード再度掲載しました。

2018/05/16 08:25

投稿

Tatsuo_Iriyama
Tatsuo_Iriyama

スコア50

test CHANGED
File without changes
test CHANGED
@@ -20,9 +20,45 @@
20
20
 
21
21
  jspファイル内のHTMLの記述(一部抜粋)
22
22
 
23
- ```HTML
23
+ ```
24
+
24
-
25
+ <body>
26
+
27
+
28
+
29
+
30
+
31
+ <!-- headerの始まり -->
32
+
33
+
34
+
35
+
36
+
37
+ <!-- headerの終わり -->
38
+
39
+
40
+
41
+ <div id="main">
42
+
43
+
44
+
45
+ <div class="container">
46
+
47
+ <h3>宛先登録</h3>
48
+
49
+
50
+
51
+ <s:form action="AddressRegiConfirmAction">
52
+
53
+
54
+
55
+
56
+
57
+ <!-- 氏名 -->
58
+
59
+
60
+
25
- <div class="fullName">
61
+ <div class="fullName">
26
62
 
27
63
  <span>[姓]<br>
28
64
 
@@ -42,6 +78,158 @@
42
78
 
43
79
  </div>
44
80
 
81
+
82
+
83
+
84
+
85
+ <!-- 氏名のふりがな -->
86
+
87
+
88
+
89
+ <div class="nameKana">
90
+
91
+ <span>[せい]<br>
92
+
93
+ <input type="text" placeholder="せい" name="familyNameKana" value='<s:property value="familyNameKana"/>' maxlength="16" size="16"/><br>
94
+
95
+ <span class="error"><s:property value="errorFamilyNameKanaMsg"/></span>
96
+
97
+ </span>
98
+
99
+ <span>[めい]<br><input type="text" placeholder="めい" name="firstNameKana" value='<s:property value="firstNameKana"/>' maxlength="16" size="16"/><br>
100
+
101
+ <span class="error"><s:property value="errorFirstNameKanaMsg"/></span>
102
+
103
+ </span>
104
+
105
+ </div>
106
+
107
+
108
+
109
+ <!-- 郵便番号入力(7桁) -->
110
+
111
+
112
+
113
+ <div class="form-text">
114
+
115
+ <div>
116
+
117
+ <span>郵便番号<br>
118
+
119
+ 〒<input type="text" placeholder="xxxxxxx" name="postalCode" value='<s:property value="postalCode"/>' pattern="^[0-9]{7}$" size="8" oninput="AjaxZip3.zip2addr(this,'','addr11','addr11');"/>
120
+
121
+ </span>
122
+
123
+ </div>
124
+
125
+ <div class="error">
126
+
127
+ <s:property value="errorPostalCodeMsg"/>
128
+
129
+ </div>
130
+
131
+ </div>
132
+
133
+
134
+
135
+ <!-- 住所 -->
136
+
137
+
138
+
139
+ <div class="form-text">
140
+
141
+ <div>
142
+
143
+ <span>住所<br><input type="text" placeholder="住所" name="addr11" value='<s:property value="addr11"/>' maxlength="50" size="50"/></span>
144
+
145
+ </div>
146
+
147
+ <div class="error">
148
+
149
+ <s:property value="errorAddr11Msg"/>
150
+
151
+ </div>
152
+
153
+ </div>
154
+
155
+
156
+
157
+ <!-- 電話番号 -->
158
+
159
+
160
+
161
+ <div class="form-text">
162
+
163
+ <div>
164
+
165
+ <span>電話番号<br><input type="text" placeholder="xxx-xxxx-xxxx" name="telNumber" value='<s:property value="telNumber"/>' maxlength="13" size="13"/></span>
166
+
167
+ </div>
168
+
169
+ <div class="error">
170
+
171
+ <s:property value="errorTelNumberMsg"/>
172
+
173
+ </div>
174
+
175
+ </div>
176
+
177
+
178
+
179
+ <!-- メールアドレス -->
180
+
181
+
182
+
183
+ <div class="form-text">
184
+
185
+ <div>
186
+
187
+ <span>メールアドレス<br><input type="text" placeholder="example@vague.co.jp" name="email" value='<s:property value="email"/>' maxlength="32" size="32"/></span>
188
+
189
+ </div>
190
+
191
+ <div class="error">
192
+
193
+ <s:property value="errorEmailMsg"/>
194
+
195
+ </div>
196
+
197
+ </div>
198
+
199
+
200
+
201
+
202
+
203
+ <div class="button">
204
+
205
+ <input type="submit" value="確認"/>
206
+
207
+ </div>
208
+
209
+ </s:form>
210
+
211
+ </div>
212
+
213
+ </div>
214
+
215
+
216
+
217
+ <!-- footerの始まり -->
218
+
219
+
220
+
221
+
222
+
223
+ <!-- footerの終わり -->
224
+
225
+
226
+
227
+
228
+
229
+
230
+
231
+ </body>
232
+
45
233
  ```
46
234
 
47
235
 

2

現状の画面状況を追加しました。

2018/05/16 08:25

投稿

Tatsuo_Iriyama
Tatsuo_Iriyama

スコア50

test CHANGED
File without changes
test CHANGED
@@ -78,9 +78,11 @@
78
78
 
79
79
  ```
80
80
 
81
+ ![現状の画面](078f535861f7a275ceb33b480eb93d6d.png)
81
82
 
82
83
 
84
+
83
- 現状このようなコードになってます。
85
+ 現状このような感じです。
84
86
 
85
87
  HTMLは一部抜粋していますので、入力項目は
86
88
 

1

理想となる画面を追加しました。

2018/05/16 08:01

投稿

Tatsuo_Iriyama
Tatsuo_Iriyama

スコア50

test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  某ショッピングサイト⚪︎ma⚪︎onの住所追加画面のように、全体的にセンターに持ってきて、入力欄に対しての情報名を左上に持ってくるようにしたい。
10
10
 
11
-
11
+ ![理想図](aba8b6ad208c5879a78855e3e08ad7a5.png)
12
12
 
13
13
 
14
14