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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JSP

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

Java

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

2回答

1376閲覧

CSSが読み込まれません

Hasumi

総合スコア7

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JSP

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

Java

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2018/09/13 01:49

編集2022/01/12 10:55

前提・実現したいこと

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

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2018/09/13 01:59 編集

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

2018/09/13 04:13

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

回答2

0

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

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

投稿2018/09/13 07:33

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

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 06:47

編集2018/09/13 06:50
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

Hasumi

2018/09/13 07:18

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

退会済みユーザー

2018/09/13 07:28

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問