🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Eclipse

Eclipseは、IBM社で開発された統合開発環境のひとつです。2001年11月にオープンソース化されました。 たくさんのプラグインがあり自由に機能を追加をすることができるため、開発ツールにおける共通プラットフォームとして位置づけられています。 Eclipse自体は、Javaで実装されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1417閲覧

JSPにCSSを反映したい

imotart

総合スコア17

JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Eclipse

Eclipseは、IBM社で開発された統合開発環境のひとつです。2001年11月にオープンソース化されました。 たくさんのプラグインがあり自由に機能を追加をすることができるため、開発ツールにおける共通プラットフォームとして位置づけられています。 Eclipse自体は、Javaで実装されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/03/01 03:34

編集2021/03/01 05:39

質問

基本的な質問ですが、jspにcssが反映されず困っております。
LoginServlet実行→login.jspフォワードの初期表示でcssの反映ができておりません。

配置や書き方など、どこを修正すれば反映されるようになるでしょうか?
ご教示頂けますと幸いです。

また、不足情報があれば追記させていただきます。
よろしくお願いいたします。

構成

構成

ソース

login.jsp

jsp

1<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 2<!DOCTYPE html> 3<html> 4<head> 5<meta charset="UTF-8"> 6<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/base.css"> 7<title>ログイン画面</title> 8</head> 9<body> 10 <h1>Schedule Manager</h1> 11 <form action="LoginServlet" method="POST"> 12 ユーザID:<input type="text" name="userId"><br> 13 パスワード:<input type="password" name="userPw"><br> 14 <input type="submit" value="ログイン"> 15 </form> 16</body> 17</html>

base.css

css

1@charset "UTF-8"; 2 3h1 { 4 color: blue; 5}

追記情報

<追記1>

m.ts10806 様 - 2021/03/01 12:48

ブラウザに表示されたhtmlではどのようなパス表記になっていましたか?

以下の通りです。
/ScheduleManager/css/base.css
イメージ説明

<追記2>

m.ts10806 様 - 2021/03/01 14:04

404エラーなくURLアクセスできるのでしたらキャッシュの影響は薄そうです。

見ただけならCSSも問題はなさそう。
bodyに背景色とか書いてみてください。明らかに違いがわかる指定ですね。
確かにh1に文字色青はわかりやすいとは思うのですけど

指定してみましたが、やはり反映されません。
イメージ説明

<追記3>

m.ts10806 様 - 2021/03/01 14:25

念の為サーブレット側のコードも提示いただけますか?

ブラウザの画面キャプチャも可能なら

勉強中につき汚く、すみません。
LoginServlet.java

java

1package servlets; 2 3import java.io.IOException; 4 5import javax.servlet.RequestDispatcher; 6import javax.servlet.ServletException; 7import javax.servlet.annotation.WebServlet; 8import javax.servlet.http.HttpServlet; 9import javax.servlet.http.HttpServletRequest; 10import javax.servlet.http.HttpServletResponse; 11 12import beans.UserInfoBean; 13 14/** 15 * Servlet implementation class LoginServlet 16 */ 17@WebServlet("/LoginServlet") 18public class LoginServlet extends HttpServlet { 19 private static final long serialVersionUID = 1L; 20 21 /** 22 * @see HttpServlet#HttpServlet() 23 */ 24 public LoginServlet() { 25 super(); 26 // TODO Auto-generated constructor stub 27 } 28 29 /** 30 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) 31 */ 32 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 33 // TODO Auto-generated method stub 34 response.getWriter().append("Served at: ").append(request.getContextPath()); 35 36 String view = "/WEB-INF/jsp/login.jsp"; 37 RequestDispatcher dispatcher = request.getRequestDispatcher(view); 38 dispatcher.forward(request, response); 39 40 } 41 42 /** 43 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) 44 */ 45 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 46 // ユーザログイン情報取得 47 48 UserInfoBean userInfo = new UserInfoBean(); 49 userInfo.setUserId(request.getParameter("userId")); 50 userInfo.setUserPw(request.getParameter("userPw")); 51 52 53 // ユーザ認証 54 userInfo = Common.authUser(userInfo); 55 56 57 // セッションにユーザ情報を格納 58 59 60 61 // 画面表示 62 String view = "/WEB-INF/jsp/top.jsp"; 63 64 request.setAttribute("userInfo", userInfo); 65 66 RequestDispatcher dispatcher = request.getRequestDispatcher(view); 67 dispatcher.forward(request, response); 68 69 70 } 71 72} 73

実行画面
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/03/01 03:48

ブラウザに表示されたhtmlではどのようなパス表記になっていましたか?
imotart

2021/03/01 03:52

`http://localhost:8080/ScheduleManager/LoginServlet`となっております。
imotart

2021/03/01 04:14

加えてすみません。 見るべき場所が間違えておりました。 追記にありますように /ScheduleManager/css/base.css です。
m.ts10806

2021/03/01 04:34

問題なさそうにはみえます。 URL直接アクセスできますか? またデベロッパーツールにエラーは出てませんか?
imotart

2021/03/01 04:41

http://localhost:8080/ScheduleManager/css/base.css に直接アクセスできました。 デベロッパーツールにエラーはないようでした。 また、Eclipseにて開発しており、クリーンは何度も試しています。 再起動してきてみます。
imotart

2021/03/01 05:04

再起動してきましたが依然ダメなので、引き続き調査してみます。 お手間いただいてすみませんが、もし何か情報ございましたら頂けますと幸いです。 ありがとうございました。
m.ts10806

2021/03/01 05:04

404エラーなくURLアクセスできるのでしたらキャッシュの影響は薄そうです。 見ただけならCSSも問題はなさそう。 bodyに背景色とか書いてみてください。明らかに違いがわかる指定ですね。 確かにh1に文字色青はわかりやすいとは思うのですけど
imotart

2021/03/01 05:10

なるほどです。たしかに、仰る通りですね。 指定してみましたがやはりだめです><
m.ts10806

2021/03/01 05:25

念の為サーブレット側のコードも提示いただけますか? ブラウザの画面キャプチャも可能なら
imotart

2021/03/01 05:39

追記させて頂きました。勉強中にて汚くすみません。
m.ts10806

2021/03/01 05:57

いえ、汚いかどうかはあまり気になりません(インデントグチャグチャなら気になる) コードだけ見た感じ問題なさそうには見えます。 手元に環境すぐ作れないので、夜になりますが確認してみます。 もしその間に何か進捗あったらコメントください
imotart

2021/03/01 06:00

恐縮ですが、ありがとうございます。 承知しました。
m.ts10806

2021/03/01 06:08

あと、念の為… 別のページ作って同じCSSリンクさせてみてください
K_3578

2021/03/01 06:29

殆ど可能性をm.ts10806さんが探ってくれているので個人的に気になっただけですが、 ブラウザのソースとか追記して貰えたりしないですかね?
imotart

2021/03/01 07:04

m.ts10806 様 無事解決できました。 問題の切り分け方法など大変勉強になりました。 ありがとうございました。 K_3578 様 ご連絡頂きありがとうございました。 解決内容をご確認いただければと思います。
guest

回答1

0

自己解決

原因

フィルターの処理による問題。(同じような解決策がありました。すみません。)

修正前
response.setContentType("text/html; charset=UTF-8");

修正後
response.setCharacterEncoding("UTF-8");

修正後の画面
イメージ説明]

今後のために

そもそもフィルターを用いたのは、文字化け対策のためでした。
文字化けの対応方法は複数あるようでしたが、うまくいったこちらを参考にさせて頂き対応を行っていました。

これの流用が今回の問題の原因となってしまったため、ソースの鵜吞みには気を付けます。
また、フィルターを使わずに文字化けを回避する方法も再度検討する必要があると思いました。

投稿2021/03/01 06:55

imotart

総合スコア17

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

K_3578

2021/03/01 07:02

個人的に良い自己解決のまとめ方だなと思ったので+1しました。
imotart

2021/03/01 07:08

ありがとうございます!同じような初学者の方の参考になれば光栄です。
m.ts10806

2021/03/01 09:29

これは確かに、容易には気づけないですね。 今後の施策も書かれていて私も久々に良い自己解決を見ました。
imotart

2021/03/01 09:57 編集

ありがとうございます! クライアント・サーバ間のリクエスト・レスポンスがどう処理されているか、を併せて学んでみようと思います。 長々とお時間をいただき、ありがとうございました。
m.ts10806

2021/03/01 10:03

>クライアント・サーバ間のリクエスト・レスポンスがどう処理されているか 大事なところに気づけましたね。むしろ、そこが理解できればWebアプリケーションは柔軟に作れるようになるはずなくらい、根幹部分です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問