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

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

ただいまの
回答率

88.62%

CSSが読み込まれません

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,434

Hasumi

score 7

 前提・実現したいこと

JspでCssを読み込み、ローカルで動作確認を行おうとしているのですが、
うまく読み込まれません。

過去質問にて、同様の質問もあって試したのですが、
問題点が分かりません。

知りたいことは、
・どういう状態なのか。原因はどちらなのか。(CSSがJSPで読み込まれていないのか、CSSが適用できないのか)
・原因として何が考えられるか。


事象としては以下です。

・Jspページ(HTML)をChromeにて「ページのソースを表示」から、CSSリンクが表示されている。
例:<link rel="stylesheet" type="text/css" href="/HelloSpringMVC/css/top.css">

・表示されているCSSリンクをクリックしたら、CSSが適用されていない状態のCSSURLが表示されている。
例:http://localhost:8080/HelloSpringMVC/css/top.css

・ただ、上記リンクを押下してもCSSが適用されていないHTMLファイルが表示される。

・読み込んでいるJspファイルもHTMLファイルが表示されるだけ。

 発生している問題・エラーメッセージ

Chromeの開発者ツールのconsoleには、エラーはありません。
CSSリンクを押下したときは、NotFoundにはなりませんでした。

 該当のソースコード

ーJSPー(一部抜粋)

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/top.css">
<title>Insert title here</title>
</head>
<body>
<p>名簿登録ツール</p>

ーCSS-(全文)
body {
background: #d3d3d3;
font-family: Meiryo; }
body p {
font-family: Meiryo;
font-size: 20px; }

ー階層ー
src
└main
└webapp
└WEB-INF
└css
└top.css
└view
└echo
└top.jsp

 試したこと

・そもそもCSSファイルが正しい記述かどうか検証するため、
今回使用したCSSファイルを別のHTMLファイルで外部ファイル読み込みしてみましたが、適用はされました。
・別記事にて、WEB-INF直下のファイルは参照されないと書いてあったので、
「main」直下「webapp」直下にcssフォルダを配置しましたが、参照されないままでした。
<追記>
chrome:開発者ツールのNetworkを確認したところ、呼び出したいCssファイル(top.css)は呼び出されているようでした。
気になる点としては、以下のような警告文が出ていました。
「Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8080/HelloSpringMVC/css/top.css".」

 補足情報(FW/ツールのバージョンなど)

・SassをVscodeにてcssにコンパイルしたものを表示させようとしています。
・検証環境:Chrome(68.0.3440.106)
・統合開発環境:Spring Tool Suite(STS)
・開発言語:Java

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • SurferOnWww

    2018/09/13 10:57 編集

    Fiddler を使って、ブラウザのキャッシュを消去してから、問題のページを要求し、その後のすべての要求応答をキャプチャして、問題の外部 CSS ファイルの要求・応答が期待通り行われているかチェックしてみてはいかがですか?

    キャンセル

  • taka-saan

    2018/09/13 13:13

    Chromeでしたら、デベロッパーツール(開発者ツール)を表示させNetworkタブを開いた状態でリロードすると、何を取りに行ったか、取れたのか取れなかったのか、が分かると思うのですが、そちらは試されましたか?

    キャンセル

回答 2

0

私もSTSで開発していて同じところでつまづいたので、参考になればと思いコメントさせていただきます。
mvc-config.xmlに外部ファイル読み込みの記載していますでしょうか。

私のファイル構成と外部ファイル読み込みの記述を載せておきます。

main-webapp-resource-css-cssファイル

mvc-config.xml↓
<mvc:resources location="/resources/"mapping="/resources/**" />

jspでのcss読み込みは以下の記載をしています
<link href="<c:url value="/resources/css/ファイル名.css" />"rel="stylesheet">

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/09/13 16:18

    ご回答ありがとうございます!!
    mvc-config.xml に記述がなかったので、さっそくファイル構造も
    ayaaaさんと同じようにやってみたのですが、以前と変わらない状況です。。。
    なにか他にもヒントになるようなことあったりしますでしょうか?。。。

    キャンセル

  • 2018/09/13 16:28

    あらら;;
    Hasumiさんの質問文の、
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/top.css">
    ここも変えましたでしょうか。。(後から追記しました)
    あとは、そうですねキャッシュを消してみるくらいしか思い浮かばず。。。
    思い出したらまたコメントします><

    キャンセル

0

すみません、回答に対するコメントで画像貼れなかったのでこちらで失礼します><
ちなみにデベロッパツールでみたとき、こんな感じになっているってことで合っていますか?
aaa

私の場合、
Daichoがプロジェクト名
resource/cssがcss置き場
totalがjsp置き場
です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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