質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
87.20%
JSP

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

Java

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

Eclipse

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

CSS

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

解決済

JSPにCSSを反映したい

imotart
imotart

総合スコア0

JSP

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

Java

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

Eclipse

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

CSS

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

1回答

0評価

0クリップ

543閲覧

投稿2021/03/01 03:34

編集2022/01/12 10:58

質問

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

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

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

構成

構成

ソース

login.jsp

jsp

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

base.css

css

@charset "UTF-8"; h1 { color: blue; }

追記情報

<追記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

package servlets; import java.io.IOException; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import beans.UserInfoBean; /** * Servlet implementation class LoginServlet */ @WebServlet("/LoginServlet") public class LoginServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public LoginServlet() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub response.getWriter().append("Served at: ").append(request.getContextPath()); String view = "/WEB-INF/jsp/login.jsp"; RequestDispatcher dispatcher = request.getRequestDispatcher(view); dispatcher.forward(request, response); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // ユーザログイン情報取得 UserInfoBean userInfo = new UserInfoBean(); userInfo.setUserId(request.getParameter("userId")); userInfo.setUserPw(request.getParameter("userPw")); // ユーザ認証 userInfo = Common.authUser(userInfo); // セッションにユーザ情報を格納 // 画面表示 String view = "/WEB-INF/jsp/top.jsp"; request.setAttribute("userInfo", userInfo); RequestDispatcher dispatcher = request.getRequestDispatcher(view); dispatcher.forward(request, response); } }

実行画面
イメージ説明

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806
m.ts10806

2021/03/01 03:48

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

2021/03/01 03:52

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

2021/03/01 04:14

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

2021/03/01 04:34

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

2021/03/01 04:41

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

2021/03/01 05:04

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

2021/03/01 05:04

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

2021/03/01 05:10

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

2021/03/01 05:25

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

2021/03/01 05:39

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

2021/03/01 05:57

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

2021/03/01 06:00

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

2021/03/01 06:08

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

2021/03/01 06:29

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

2021/03/01 07:04

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JSP

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

Java

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

Eclipse

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

CSS

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