teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問JSPにCSSを反映したい

編集履歴

質問編集履歴

7

リファクタリング

2021/03/01 05:39

投稿

imotart
imotart

スコア17

test CHANGED
File without changes
test CHANGED
@@ -140,7 +140,7 @@
140
140
 
141
141
 
142
142
 
143
- ~~開発中につき汚く、すみません。~~
143
+ ~~勉強中につき汚く、すみません。~~
144
144
 
145
145
  `LoginServlet.java`
146
146
 

6

サーブレットコードの追記

2021/03/01 05:39

投稿

imotart
imotart

スコア17

test CHANGED
File without changes
test CHANGED
@@ -28,7 +28,7 @@
28
28
 
29
29
  ### ソース
30
30
 
31
- login.jsp
31
+ `login.jsp`
32
32
 
33
33
  ```jsp
34
34
 
@@ -70,7 +70,7 @@
70
70
 
71
71
 
72
72
 
73
- base.css
73
+ `base.css`
74
74
 
75
75
  ```css
76
76
 
@@ -127,3 +127,173 @@
127
127
  指定してみましたが、やはり反映されません。
128
128
 
129
129
  ![イメージ説明](ad251c2c57d18636b2aea15c643e900d.png)
130
+
131
+
132
+
133
+ ##### <追記3>
134
+
135
+ m.ts10806 様 - 2021/03/01 14:25
136
+
137
+ > 念の為サーブレット側のコードも提示いただけますか？
138
+
139
+ ブラウザの画面キャプチャも可能なら
140
+
141
+
142
+
143
+ ~~開発中につき汚く、すみません。~~
144
+
145
+ `LoginServlet.java`
146
+
147
+ ```java
148
+
149
+ package servlets;
150
+
151
+
152
+
153
+ import java.io.IOException;
154
+
155
+
156
+
157
+ import javax.servlet.RequestDispatcher;
158
+
159
+ import javax.servlet.ServletException;
160
+
161
+ import javax.servlet.annotation.WebServlet;
162
+
163
+ import javax.servlet.http.HttpServlet;
164
+
165
+ import javax.servlet.http.HttpServletRequest;
166
+
167
+ import javax.servlet.http.HttpServletResponse;
168
+
169
+
170
+
171
+ import beans.UserInfoBean;
172
+
173
+
174
+
175
+ /**
176
+
177
+ * Servlet implementation class LoginServlet
178
+
179
+ */
180
+
181
+ @WebServlet("/LoginServlet")
182
+
183
+ public class LoginServlet extends HttpServlet {
184
+
185
+ private static final long serialVersionUID = 1L;
186
+
187
+
188
+
189
+ /**
190
+
191
+ * @see HttpServlet#HttpServlet()
192
+
193
+ */
194
+
195
+ public LoginServlet() {
196
+
197
+ super();
198
+
199
+ // TODO Auto-generated constructor stub
200
+
201
+ }
202
+
203
+
204
+
205
+ /**
206
+
207
+ * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
208
+
209
+ */
210
+
211
+ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
212
+
213
+ // TODO Auto-generated method stub
214
+
215
+ response.getWriter().append("Served at: ").append(request.getContextPath());
216
+
217
+
218
+
219
+ String view = "/WEB-INF/jsp/login.jsp";
220
+
221
+ RequestDispatcher dispatcher = request.getRequestDispatcher(view);
222
+
223
+ dispatcher.forward(request, response);
224
+
225
+
226
+
227
+ }
228
+
229
+
230
+
231
+ /**
232
+
233
+ * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
234
+
235
+ */
236
+
237
+ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
238
+
239
+ // ユーザログイン情報取得
240
+
241
+
242
+
243
+ UserInfoBean userInfo = new UserInfoBean();
244
+
245
+ userInfo.setUserId(request.getParameter("userId"));
246
+
247
+ userInfo.setUserPw(request.getParameter("userPw"));
248
+
249
+
250
+
251
+
252
+
253
+ // ユーザ認証
254
+
255
+ userInfo = Common.authUser(userInfo);
256
+
257
+
258
+
259
+
260
+
261
+ // セッションにユーザ情報を格納
262
+
263
+
264
+
265
+
266
+
267
+
268
+
269
+ // 画面表示
270
+
271
+ String view = "/WEB-INF/jsp/top.jsp";
272
+
273
+
274
+
275
+ request.setAttribute("userInfo", userInfo);
276
+
277
+
278
+
279
+ RequestDispatcher dispatcher = request.getRequestDispatcher(view);
280
+
281
+ dispatcher.forward(request, response);
282
+
283
+
284
+
285
+
286
+
287
+ }
288
+
289
+
290
+
291
+ }
292
+
293
+
294
+
295
+ ```
296
+
297
+ `実行画面`
298
+
299
+ ![イメージ説明](b1df9a62266a2d5a60322a67b1e6712f.png)

5

リファクタリング

2021/03/01 05:38

投稿

imotart
imotart

スコア17

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,5 @@
1
+ ### 質問
2
+
1
3
  基本的な質問ですが、jspにcssが反映されず困っております。
2
4
 
3
5
  `LoginServlet`実行→`login.jsp`フォワードの初期表示でcssの反映ができておりません。
@@ -16,13 +18,15 @@
16
18
 
17
19
 
18
20
 
19
- 構成
21
+ ### 構成
20
22
 
21
23
 
22
24
 
23
25
  ![構成](6605bb353d0a46fce24c865e72f3b92a.png)
24
26
 
25
27
 
28
+
29
+ ### ソース
26
30
 
27
31
  login.jsp
28
32
 
@@ -84,11 +88,15 @@
84
88
 
85
89
 
86
90
 
91
+
92
+
87
93
  ---
88
94
 
95
+ ### 追記情報
89
96
 
97
+ ##### <追記1>
90
98
 
91
- ##### <追記1> m.ts10806 様 - 2021/03/01 12:48
99
+ m.ts10806 様 - 2021/03/01 12:48
92
100
 
93
101
  > ブラウザに表示されたhtmlではどのようなパス表記になっていましたか？
94
102
 
@@ -102,7 +110,9 @@
102
110
 
103
111
 
104
112
 
113
+ ##### <追記2>
114
+
105
- ##### <追記2> m.ts10806 様 - 2021/03/01 14:04
115
+ m.ts10806 様 - 2021/03/01 14:04
106
116
 
107
117
  > 404エラーなくURLアクセスできるのでしたらキャッシュの影響は薄そうです。
108
118
 

4

css背景指定

2021/03/01 05:27

投稿

imotart
imotart

スコア17

test CHANGED
File without changes
test CHANGED
@@ -86,10 +86,34 @@
86
86
 
87
87
  ---
88
88
 
89
+
90
+
91
+ ##### <追記1> m.ts10806 様 - 2021/03/01 12:48
92
+
89
- 追記
93
+ > ブラウザに表示されたhtmlではどのようなパス表記になっていましたか？
90
94
 
91
95
 
92
96
 
93
- ブラウザに表示されたパス表記
97
+ 以下の通りです。
98
+
99
+ `/ScheduleManager/css/base.css`
94
100
 
95
101
  ![イメージ説明](c8ddaed7342f9682485b1d36abfc9f0d.png)
102
+
103
+
104
+
105
+ ##### <追記2> m.ts10806 様 - 2021/03/01 14:04
106
+
107
+ > 404エラーなくURLアクセスできるのでしたらキャッシュの影響は薄そうです。
108
+
109
+ 見ただけならCSSも問題はなさそう。
110
+
111
+ bodyに背景色とか書いてみてください。明らかに違いがわかる指定ですね。
112
+
113
+ 確かにh1に文字色青はわかりやすいとは思うのですけど
114
+
115
+
116
+
117
+ 指定してみましたが、やはり反映されません。
118
+
119
+ ![イメージ説明](ad251c2c57d18636b2aea15c643e900d.png)

3

パス表記を追加しました。

2021/03/01 05:20

投稿

imotart
imotart

スコア17

test CHANGED
File without changes
test CHANGED
@@ -90,14 +90,6 @@
90
90
 
91
91
 
92
92
 
93
- ブラウザに表示されたパス表記は以下です。
93
+ ブラウザに表示されたパス表記
94
94
 
95
- `http://localhost:8080/ScheduleManager/LoginServlet`
96
-
97
- ![ブラウザに表示されたパス表記](513b510bb520c6e3dd54f10c3f9aa123.png)
98
-
99
-
100
-
101
- `http://localhost:8080/ScheduleManager/css/base.css`
102
-
103
- ![イメージ説明](25ba43038163475a1dc9f41abd287c07.png)
95
+ ![イメージ説明](c8ddaed7342f9682485b1d36abfc9f0d.png)

2

パス表記を追加しました。

2021/03/01 04:13

投稿

imotart
imotart

スコア17

test CHANGED
File without changes
test CHANGED
@@ -95,3 +95,9 @@
95
95
  `http://localhost:8080/ScheduleManager/LoginServlet`
96
96
 
97
97
  ![ブラウザに表示されたパス表記](513b510bb520c6e3dd54f10c3f9aa123.png)
98
+
99
+
100
+
101
+ `http://localhost:8080/ScheduleManager/css/base.css`
102
+
103
+ ![イメージ説明](25ba43038163475a1dc9f41abd287c07.png)

1

パス表記を追加しました。

2021/03/01 04:07

投稿

imotart
imotart

スコア17

test CHANGED
File without changes
test CHANGED
@@ -81,3 +81,17 @@
81
81
  }
82
82
 
83
83
  ```
84
+
85
+
86
+
87
+ ---
88
+
89
+ 追記
90
+
91
+
92
+
93
+ ブラウザに表示されたパス表記は以下です。
94
+
95
+ `http://localhost:8080/ScheduleManager/LoginServlet`
96
+
97
+ ![ブラウザに表示されたパス表記](513b510bb520c6e3dd54f10c3f9aa123.png)