質問編集履歴

3

ログイン画面の画像をアップしました。

2020/07/29 23:41

投稿

WOAAbQm0Jefa5g1
WOAAbQm0Jefa5g1

スコア5

test CHANGED
File without changes
test CHANGED
@@ -326,7 +326,13 @@
326
326
 
327
327
 
328
328
 
329
+   
330
+
331
+
332
+
329
-
333
+ ![cssが適用されていないログイン画面](1f3733a141c9c65ef0bc9729b0821eb2.png)
334
+
335
+ ![cssが適用されているログイン画面](d2e462a84a123da7756c06bf4faee934.png)
330
336
 
331
337
 
332
338
 

2

コードブロックにて記載しなおしました。

2020/07/29 23:41

投稿

WOAAbQm0Jefa5g1
WOAAbQm0Jefa5g1

スコア5

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,6 @@
1
+ コード
2
+
1
- ### 前提・実現したいこと
3
+ ```### 前提・実現したいこと
2
4
 
3
5
  javaにてSmamaというコミュニティサイトを作成中ですが、バックエンドはjavaにて実装予定、Eclipseにて
4
6
 
@@ -84,11 +86,15 @@
84
86
 
85
87
 
86
88
 
87
- 以下追記です。
88
-
89
- 【login.Input.jsp(html)】
89
+ 以下追記です。【login.Input.jsp(html)】
90
+
90
-
91
+ ```html
92
+
93
+
94
+
95
+ コード
96
+
91
- <%@ page language="java" contentType="text/html; charset=UTF-8"
97
+ ```<%@ page language="java" contentType="text/html; charset=UTF-8"
92
98
 
93
99
  pageEncoding="UTF-8"%>
94
100
 
@@ -176,11 +182,19 @@
176
182
 
177
183
 
178
184
 
185
+
186
+
187
+
188
+
189
+
190
+
179
191
  【CSS追記(関係ないと思われる部分は省略しています)】
180
192
 
181
-
193
+ ```css
194
+
182
-
195
+ コード
196
+
183
- @charset "UTF-8";
197
+ ```@charset "UTF-8";
184
198
 
185
199
  .main-logo,.main-txt,a,img,.nav,h3,.terms,.site-overview {
186
200
 
@@ -314,6 +328,10 @@
314
328
 
315
329
 
316
330
 
331
+
332
+
333
+
334
+
317
335
  ### 試したこと
318
336
 
319
337
 

1

jsp(ログイン画面)のソースコードとCSSの一部を追記しました。不足点ありましたら、ご連絡お願い致します。

2020/07/29 12:01

投稿

WOAAbQm0Jefa5g1
WOAAbQm0Jefa5g1

スコア5

test CHANGED
File without changes
test CHANGED
@@ -84,6 +84,236 @@
84
84
 
85
85
 
86
86
 
87
+ 以下追記です。
88
+
89
+ 【login.Input.jsp(html)】
90
+
91
+ <%@ page language="java" contentType="text/html; charset=UTF-8"
92
+
93
+ pageEncoding="UTF-8"%>
94
+
95
+ <%@ page import="model.SmamaLogin" %>
96
+
97
+ <%@ page import="model.LoginLogic" %>
98
+
99
+
100
+
101
+
102
+
103
+ <!DOCTYPE html>
104
+
105
+ <html>
106
+
107
+ <head>
108
+
109
+ <meta charset="UTF-8">
110
+
111
+ <title>Smama1</title>
112
+
113
+ <link rel="stylesheet" href="Smama.css">
114
+
115
+ </head>
116
+
117
+ <body>
118
+
119
+ <header>
120
+
121
+ <div class="header-area">
122
+
123
+ <div class="main-logo">
124
+
125
+ <p class="main-txt">シングルマザーのコミュニティサイト</p>
126
+
127
+ <h1 class="main-img">Smama</h1>
128
+
129
+ </div>
130
+
131
+ </div>
132
+
133
+ </header>
134
+
135
+ <div class="login-screen">
136
+
137
+ <h1 class="login">ログイン</h1>
138
+
139
+ <form action="/Smama/Login" method="post">
140
+
141
+ <input class="mail-address" id="mail-address" type="email" name="address-txt" placeholder="メールアドレス"/><br>
142
+
143
+ <input class="password" id="password" type="password" name="password-txt" placeholder="パスワード"/><br>
144
+
145
+ <input class="btn-green" type="submit" value="ログイン"><br>
146
+
147
+ </form>
148
+
149
+ <p class="or">または</p>
150
+
151
+ <a href="member.jsp" class="btn-orange">新規会員登録</a>
152
+
153
+ </div>
154
+
155
+ <footer class="site-overview">
156
+
157
+ <div class="text-end">
158
+
159
+ <a href="#" class="contact-us">お問い合わせ</a>
160
+
161
+ <a href="#" class="recruit">求人・採用のお問い合わせ</a>
162
+
163
+ <a href="#" class="service">利用規約</a>
164
+
165
+ <a href="#" class="company">運営会社</a>
166
+
167
+ </div>
168
+
169
+ <p class="end">copyright(c)SMS Co.LTD All Rights Reserved</p>
170
+
171
+ </footer>
172
+
173
+ </body>
174
+
175
+ </html>
176
+
177
+
178
+
179
+ 【CSS追記(関係ないと思われる部分は省略しています)】
180
+
181
+
182
+
183
+ @charset "UTF-8";
184
+
185
+ .main-logo,.main-txt,a,img,.nav,h3,.terms,.site-overview {
186
+
187
+ display: block;
188
+
189
+ }
190
+
191
+ .btn-recruiting,.btn-login,.submit-btn,.banner,.sprout,.chicken,.cabbage,.microwave,.main-container {
192
+
193
+ display: inline-block;
194
+
195
+ }
196
+
197
+ * {
198
+
199
+ margin: 0;
200
+
201
+ padding: 0;
202
+
203
+ }
204
+
205
+ /*CSS:ログインページ*/
206
+
207
+
208
+
209
+ .login-screen {
210
+
211
+ height: 500px;
212
+
213
+ width: 100%;
214
+
215
+ background-color: #CCFFFF;
216
+
217
+ }
218
+
219
+ .login {
220
+
221
+ font-size: 30px;
222
+
223
+ color: #333300;
224
+
225
+ text-align: center;
226
+
227
+ padding-top: 40px;
228
+
229
+ }
230
+
231
+ .mail-address,.password {
232
+
233
+ width: 50%;
234
+
235
+ height: 30px;
236
+
237
+ color: #333300;
238
+
239
+ margin: 30px 400px;
240
+
241
+ }
242
+
243
+ .btn-orange {
244
+
245
+ height: 40px;
246
+
247
+ width: 200px;
248
+
249
+ padding-top: 15px;
250
+
251
+ margin: 30px auto;
252
+
253
+ background-color: #FF6633;
254
+
255
+ color: white;
256
+
257
+ text-decoration: none;
258
+
259
+ font-size: 20px;
260
+
261
+ font-weight: bold;
262
+
263
+ border-radius: 10px;
264
+
265
+ text-align: center;
266
+
267
+ }
268
+
269
+ .btn-orange:hover {
270
+
271
+ background-color: #FF6600;
272
+
273
+ }
274
+
275
+ .or {
276
+
277
+ text-align: center;
278
+
279
+ }
280
+
281
+ .btn-green {
282
+
283
+ height: 40px;
284
+
285
+ width: 200px;
286
+
287
+ padding-top: 15px;
288
+
289
+ margin: 30px auto;
290
+
291
+ background-color: #00CC99;
292
+
293
+ color: white;
294
+
295
+ text-decoration: none;
296
+
297
+ font-size: 20px;
298
+
299
+ font-weight: bold;
300
+
301
+ border-radius: 10px;
302
+
303
+ text-align: center;
304
+
305
+ }
306
+
307
+ .btn-green:hover {
308
+
309
+ background-color: #009999;
310
+
311
+ }
312
+
313
+
314
+
315
+
316
+
87
317
  ### 試したこと
88
318
 
89
319