Q&A
web.xmlの設定と「現在アクセスしているURL」
あとrequest.getContextPath()を利用したときにブラウザの「ソースを表示」で確認したHTMLの出力内容を提示してください。
###ディレクトリ構成
###やりたいこと
サーブレットクラスでフォワードされた先のJSPで、上記の「css/style_01.css」と「images」ディレクトリ内に入っている画像を出力させたい。
###現状
・Javascriptは動いていそうです（ページ内リンクの遷移が出来ているため）
・imagesディレクトリに格納されているファビコンはちゃんと出力されます。
・その他エラー等は出ていません。（jspの警告マークは、svgの関数(?)に出ています）
###CSS適用のためにJSPで試したコード
１つめ
jsp
1<link rel="stylesheet" type="text/css" href= "<%=request.getContextPath()%>/css/style_01.css">
２つめ
jsp
1<link rel="stylesheet" type="text/css" href= "css/style_01.css">
３つめ
jsp
1<link rel="stylesheet" type="text/css" href= "/css/style_01.css">
４つめ
jsp
1<link rel="stylesheet" type="text/css" href= "./css/style_01.css">
５つめ
jsp
1<link rel="stylesheet" type="text/css" href= "../css/style_01.css">
６つめ
jsp
1<link rel="stylesheet" type="text/css" href= "../../css/style_01.css">
７つめ
jsp
1<link rel="stylesheet" type="text/css" href= "main/src/main/webapp/css/style_01.css">
８つめ
jsp
1<link rel="stylesheet" type="text/css" href= "/main/src/main/webapp/css/style_01.css">
どれもだめでした。
web.xmlとかの指定が必要なのでしょうか？
また、原因は分かりませんがWebブラウザの開発者ツールを確認すると、「CSS/style_01.css」の存在は確認できるのですが、中身が何故かHTMLのようにDOMツリーが記載された状態になっています。。。
上記解決をしたく思っています。どうぞよろしくお願い致します。
コメント頂きありがとうございます。
「request.getContextPath()」を使用した場合の、頂いたご質問に対する返答です。
アクセスしているURL：「http://localhost:8080/main/Main」
開発者ツールでのHTML出力内容：「<link rel="stylesheet" type="text/css" href= "/main/css/style_01.css">」
また、web.xmlについては以下の通りとなります。
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
<display-name>Archetype Created Web Application</display-name>
<servlet>
<servlet-name>Main</servlet-name>
<display-name>Main</display-name>
<description></description>
<servlet-class>servlet.Main</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Main</servlet-name>
<url-pattern>/Main</url-pattern>
</servlet-mapping>
</web-app>
どうぞ、よろしくお願い致します。
回答1件
0
確認していただきたいことが2点ほどあります。
作成されているプロジェクトを拝見したところmavenプロジェクトですので、Eclipseのサーバから実行している（WTPを利用したプロジェクト）であれば、Webデプロイメント・アセンブリーの設定を確認してください。作成された環境や、mavenプロジェクトに変換したタイミングによっては、特定のパスが追加されていない可能性がありますので、適宜デプロイ・パスを編集してください。
※EclipseのWTPプロジェクトの構成では WebContent が標準の公開ディレクトリですが、maven標準のプロジェクト構成がsrc/main/webappになっているため、「mavenプロジェクトに変換」したときに、この変換がうまくいかない場合があるようです。
また、pom.xmlにてWebリソースの設定がある場合、これがあっているかも確認してください。
具体的には maven-war-pluginの設定です。以下は正しい例です（通常は設定しなくてもsrc/main/webappになりますが、Eclipseの動的Webプロジェクトを作成→mavenプロジェクトへ変換した時に warSourceDirectoryの設定が追加されます。
xml
1 <plugin> 2 <artifactId>maven-war-plugin</artifactId> 3 <version>3.2.3</version> 4 <configuration> 5 <warSourceDirectory>src/main/webapp</warSourceDirectory> 6 </configuration> 7 </plugin>
もし解決できなかったときはご容赦ください。
投稿2021/01/30 05:14
総合スコア12011
明確なご指摘を頂きありがとうございます。
確認したところ、デプロイメントアセンブリについてはA-pZ様がアップしてくださった画像と同様の状態でした。
また、POMについては<configuration>の記述が抜けておりましたので追記しましたが、やはりCSSと画像は読み取られない様です。
立てたサーバーにGoogleChromeでアクセスし、CSSの中身を開発者ツールで確認すると「<!DOCTYPE html><html>」から始まってしまっているのですが、そもそものプロジェクトの作り方が誤っていたのでしょうか。。。
今回はMavenプロジェクトから作成したのですが、動的WebサイトをMaven化させた場合とでは根本的な構成が何かしら異なるのでしょうか？
Java自体が初心者で大変恐縮ではありますが、もしご存知でしたらご教示頂けますと幸いです。
よろしくお願い致します。
EclipseのWTPで作成してからmavenプロジェクトに変換したときと、あらかじめmavenのwebappのひな形（アーキタイプ）から生成したものをWTP経由でTomcatなどに乗せる設定をした場合、それぞれ手順が異なりますが、ゴールは私の回答で記載した内容になります。
CSSの中身を出力したところ、<HTML>で記載されているのが何かおかしいように思います。ブラウザ側で何か設定が挟まっているか、またはJSPのディレクティブに記載謝りがあるかもしれません。
CSSへの参照方法は1.の方法で相違ありません。
念のため、JSPを記載ください。特に開始からlink relでCSSファイルを指定することろまでお願いします。
A-pZ様
ご返信いただきありがとうございます。
以下がJSPファイルの冒頭部となります。
=========＜topPage.jsp＞=========
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプルです</title>
<link rel="stylesheet" type="text/css" href= "<%=request.getContextPath()%>/css/style_01.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" rel="stylesheet">
<link rel="icon" sizes="180x180" href="images/favicon.ico">
</head>
<body>
・・・・・
============以上です============
また、何故かファビコンだけは正しく表示されています。
ファイルサイズの大きさとかで制限がかかったりしているのでしょうか・・・？？
GoogleChromeおよびInternetExplorerで同様の現象が確認できるので、ブラウザ側での設定が問題ではないんじゃないかな？とは思っています。
ちなみにですが、作成したCSSの冒頭で「@charset "UTF-8";」と宣言している部分が影響しているのかな？と思って一度消してみたのですが、特に変化なしでした。。。
あなたの回答
tips
プレビュー
