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

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

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

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

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

Q&A

解決済

2回答

2470閲覧

テンプレートファイルに指定したCSSの適用について

aae_11

総合スコア178

Java

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

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

2グッド

0クリップ

投稿2020/04/22 10:10

編集2020/04/23 00:35

SpringBootにて、作成したプロジェクトのテンプレートファイルのCSS部分を変更した際、
Eclipseより、赤の実行停止ボタンを押し、再度緑の実行ボタンを押さなければCSSが適用されて、表示されません。
アクセスはブラウザに「http://localhost:8080/signUp」と打ち込み行いました。
こちら、毎回この手順を踏まずに、簡単にデザインの適用を確認する方法はあるでしょうか?
Eclipse内のファイルを選択し、「次で開く」→「webブラウザー」を指定すればEclipse内で開けますが、CSSが適用されず、ブラウザで開いた状態とは違う形となってしまいます。
こちら、解決方法がありましたら、教えて下さい。

実行環境:
Eclipseのバージョン: Version: 2019-12 (4.14.0)
OS: MacOSMojave
プロジェクトの作成は、「Springスタータープロジェクト」にて、作成しました。

追記
HTMLファイルは、「src/main/resources/templates」内に、CSSファイルは、「src/main/resources/static/css」内に作成しました。
プロジェクトの作成は、「Springスタータープロジェクト」より行いました。
以下は、「http://localhost:8080/signUp」と打ち込まれた際に呼び出されるコントローラークラス内のメソッドです。

@GetMapping("/signUp") public String input(Model model){ return "signUp"; }

以下は、テンプレートファイル「signUp.html」です。

<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>Spring Boot de Bootstrap</title> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" media="all" th:href="@{/css/signUp.css}"/> <link rel="stylesheet" media="all" th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.min.css}"/> </head> <body> <div class="container"> <div class="row"> <div class="col-md-5 col-sm-8 top_element"> <div class="bg-primary"> <p class="text-white text-center">SIGN UP</p> </div> <div class="form_content"> <form> <input type="text" name="name" placeholder="Name"> <input type="text" name="email" placeholder="Email"> <input type="text" name="password" placeholder="Password"> <input type="text" name="confirm_password" placeholder="ConfirmPassword"> </form> </div> </div> </div> </div> <script type="text/javascript" th:src="@{/webjars/jquery/3.4.1/jquery.min.js}"></script> <script type="text/javascript" th:src="@{/webjars/bootstrap/4.3.1/js/bootstrap.min.js}"></script> </body> </html>

追記②
Eclipse内で、開いた際に、CSSが適用されていない理由は分かりましたが、最終的に、解決したい問題としましては、毎回、Eclipseより、実行を停止し再度緑の実行ボタンを押さなくともファイルを保存するだけのように簡易な方法で、ブラウザから「http://localhost:8080/signUp」とアクセスした際に、CSSが適用され表示出来ている状態に持っていきたいと考えています。

追記➂
signUp.html内の、<div class="bg-primary">ここの部分の「bg-primary」を取り外し、保存し再度、ブラウザ(GoogleChrome)にて、更新→スーパーリロード(command + R)→ 更新マーク長押しから、「キャッシュの削除とハード再読み込み」を行なったのですが、変化はありませんでした。しかし、Eclipseで実行停止し再度実行ボタンより実行しブラウザを更新したら、スタイルが外れていました。

※CSSフレームワークはBootStrapを導入しています。
以下はsignUp.cssです

@charset "UTF-8"; .top_element{ margin:0 auto; }
toll_tree, newyee👍を押しています

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

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

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

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

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

m.ts10806

2020/04/22 10:16 編集

再現できる情報なしに何を答えろと言うのでしょうか。この文章では今一つ状況が分かりませんし。誰もが同じ状況を通るわけではないですよ。 質問初めての人がするような質問の仕方をいつまでするつもりなのか考えてみてください。 初めから手を抜かず全て記載しておけば指摘されることなくスムーズにアドバイスを得られるわけですが、書いてないから指摘があり何回も書き直す必要が出てくるわけです。 とても解決したいと思ってるようには感じません。丸投げです。
m.ts10806

2020/04/22 10:16

高評価理由よろしく。(自身の別アカウントが疑われるだけなのに)
m.ts10806

2020/04/22 10:31

まだ手を抜きますか。 全ての人が同じ内容のプログラム打つんですか? 自分だけ持ってる情報が多すぎて答えようがないんですよ。 いつも本来必要な情報を2割程度しか出してません。10質問してたら9はそんな状態なんです。 それに、本当に「src/main/resources/tenplates」ならそもそもHTMLテンプレート読めなくてエラー出ますよ。CSSが反映されないとかそういう以前の問題です。
m.ts10806

2020/04/22 11:28

CSSの問題と認識されながらCSSを提示しないのはどこまで手を抜くつもりですか。「持ってる情報は全部出して」という依頼をしています。「他者が再現できる情報を提示して」という依頼をしています。 どんな熟練者でも全部出されないと同じ状況再現は無理です。
guest

回答2

0

ベストアンサー

方法1. spring boot devtools を有効化する。
方法2.z消される href/src タグに静的ファイルの配置先を書く(file://でもOK)

一般的な方法は上記二つ

方法1 はホットデプロイモード
方法2 はファイルアクセスでもみれるようにする(本来デザイナーから渡ってきたものを改変しないため残しておくもの)

投稿2020/04/22 11:52

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

m.ts10806

2020/04/22 12:01 編集

devtoolsは必須ですね。 追記:というかCSSだけの問題じゃないですね。あくまでビルドの問題だった。CSSだけに拘った質問内容に騙されてしまった。
m.ts10806

2020/04/22 11:56

あれでもCSSとかjsって影響受けましたっけ?
退会済みユーザー

退会済みユーザー

2020/04/22 12:00

方法1はCSSが適用されたかは微妙・・(むしろデザインすんでからやれよだから) 方法2はデザイナー志向
退会済みユーザー

退会済みユーザー

2020/04/22 12:03

本来 thymeleaf / mayaa の根本は 分業(デザイナーの作ったものを極力いじらずに)だから
m.ts10806

2020/04/22 12:08

>方法1はCSSが適用されたかは微妙 簡易プロジェクト作って確認してみました。 html,cssの更新ではビルド動かないですね。 src/main/java内はパッケージ作っただけでも動きました。
m.ts10806

2020/04/22 12:09

>本来 thymeleaf / mayaa の根本は 分業(デザイナーの作ったものを極力いじらずに)だから おそらくテンプレートエンジン系はほぼ全てそんな感じですね。 ただ、動的なところはどうしても組み替えないといけない。
退会済みユーザー

退会済みユーザー

2020/04/22 12:12

うちがあげたやつの二つは 取り込んだ後もファイルプロトコルでデザイナーが作ったものが表示可能な点
m.ts10806

2020/04/22 12:29

質問者が採用しているバージョンが明記されてないので確実なことは言えないですが、特別に指定しない限りは最新が入るからほぼ間違いなく外れてそうですね。
aae_11

2020/04/23 00:59

spring boot devtools を調べていた過程で、「application.properties ファイルでプロパティー spring.thymeleaf.cache = false 」を設定することで解決できることが判明しました。 devtoolsはこれを自動で設定してくれているようです。取り敢えずは、devtoolsを導入し開発を進めたいと思います。
guest

0

まあ、おおよそよくあるキャッシュでしょうね。
静的HTMLでもあるし、Webアプリケーションには絶対ついてまわるので、
それなりにやっていればどこかしらで出くわしていたはずの問題です。
「○○は別」とするほうが難しい。
ご自身でもその手の情報を見たり自身で質問して回答を得たりその可能性に気づいて「試したこと」に記載しているような質問があったりしませんか?

ので、「ブラウザ キャッシュ 削除」とかで調べてください。
「自動で削除したい」ならそれもキーワードに入れて調べてください。
そこまできてようやく「Spring(またはサーバーサイド)のキャッシュ」を疑います。

ブラウザに出力されているのはあくまでHTML、CSSですからね。
最もユーザーから近い方から疑うのが基本です。

Eclipse内のファイルを選択し、「次で開く」→「webブラウザー」を指定すればEclipse内で開けますが、CSSが適用されず、ブラウザで開いた状態とは違う形となってしまいます。

何の「ファイル」を選択したのか提示されてないので質問者と全く同じ状況をどう再現できるのか分からす、単なる個人的な推測でしかないので外れたら大変申し訳ないのですが、「/プロジェクト/src/main/resources/templates内に作ったSignUp.html」のことなのであれば、当然の結果です。
HTMLファイルをブラウザに直にドロップしたのと同じです。

URL見てみてください。「file:///」から始まっているでしょう?(WindowsとMacで違う可能性はあるが、ローカルフルパスなのは間違いないはず)

PHP初心者がよくやってしまいがちなやつです。
画面内で右クリックで「ソースの表示」をしてみてください。
「以下は、テンプレートファイル「SignUp.html」です。 」で提示されたコードがそのまま表示されているでしょう?
これはサーバーの処理を介してないということになります。ローカルのファイルを直接開いているので当然ですね。

Springやフレームワーク以前に「Webの仕組み」をきちんとおさえる必要があります。それこそ「httpとは何か」「サーバーとは何か」というところから。
それを全く知らずにWebアプリケーションは作れませんよ。特にサーバーサイドの仕組みが関係するものは。

蛇足:
CSSフレームワーク(およびライブラリなど、自身でほぼ変更が発生しないコード)の前に自身が組んだCSSを入れるのは悪手です。
CSSは基本は後勝ち。これもWebの基本です。

追記②へ

、毎回、Eclipseより、実行を停止し再度緑の実行ボタンを押さなくともファイルを保存するだけのように簡易な方法で、ブラウザから「http://localhost:8080/signUp」とアクセスした際に

静的HTMLのときってどうしてました?毎回ブラウザ閉じてまた開きなおしてました?
PHPのときにPHP以外、外部CSS更新したときにどうしてました?
また、「ブラウザ キャッシュ 削除」で調べた中に「スーパーリロード」ってありませんでした?
何も書いてないということはそもそもブラウザ更新すら試してないということでよろしいでしょうか。。。

フロント側を確認したいなら下記を上から1つずつ試すのが定石です。
0. 画面更新(ブラウザの更新マークでもいいしキーボード(WindowsならF5)でもいいし)
0. スーパーリロード
0. クエリストリングによる自動キャッシュ無効
0. 各構文の確認

こういうときはCSSフレームワークのような仕組みを入れずに、
どう見ても変化が分かる背景色とか文字色程度で確認すべきです。
「最小構成のコード」を作った上で。

問題切り分けには余計なコードは一切不要です。
凝ったデザインとか要りません。

ちなみに私は下記のようなコードで動作確認しましたが、1つ目「画面更新」で事足りました。
自身のローカルであればこれで事足りるケースがほとんどなのでは。

Sf.java@Controller

java

1package xxxxx;//パッケージ名は動作に影響ないので省略 2 3import org.springframework.stereotype.Controller; 4import org.springframework.web.bind.annotation.GetMapping; 5 6@Controller 7public class Sf { 8 @GetMapping("s") 9 private String s() { 10 11 return "NewFile"; 12 } 13}

/プロジェクト/src/main/resources/templates/NewFile.html@Thymeleaf

html

1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org"> 3<head> 4<meta charset="UTF-8"> 5<title>Insert title here</title> 6<link th:href="@{/css/test.css}" rel="stylesheet"> 7</head> 8<body> 9<h1>s</h1> 10</body> 11</html>

/プロジェクト/src/main/resources/static/css/test.css

css

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

やったことは「実行」→「Springアプリケーション」でサーバー起動した後、
ブラウザのアドレスバーにhttp://localhost:8080/sを打ってにアクセスし、
文字が黄色になっていることを確認し、cssをcolor:red;に変更しファイルを上書き、
ブラウザの更新マークをクリック のみ。

Java側のコードが変更されるわけではないので、再ビルド(をしてサーバー再起動)する必要はありません。静的コンテンツ(だから「static」フォルダに入っている)なので。

Java側のコードをファイル上書き保存時に自動ビルドさせたいならdevtoolsが必要。

もちろん、そこでボケっとしてても画面に勝手に変化が起きることはないので、
ブラウザ更新なりなんなりする必要はある(これはWebアプリケーションでは当然の手続き)

下記のような記事は読んでおいた方が良いです。
お前は絶望的にプログラミングに向いてないから諦めて刺身にタンポポ乗せる仕事でもやってろ
タイトルだけ読むと「諦めろ」と見下してるように見えますが、そういう意図で書かれた記事ではないです。
初心者程、ためになる内容であるはず。雑にコードで遊んでいるよりずっと勉強になりますし、プログラミングをやっていく大変さとか、方向性とか諸々見えてくるはず。

投稿2020/04/22 11:11

編集2020/04/22 13:38
m.ts10806

総合スコア80765

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

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

退会済みユーザー

退会済みユーザー

2020/04/22 11:27

たしかに spring boot あるあるだな、ログイン設定で CSS/JS すべてがログイン必須になる
m.ts10806

2020/04/22 11:31 編集

asahina1979さん 単に静的に画面表示してるだけだからログイン関係ないのでは?
m.ts10806

2020/04/22 11:33

認証通しててインターセプターとかでチェックしてるならまだしも、全然その段階ではないと思います。
退会済みユーザー

退会済みユーザー

2020/04/22 11:37

ああみのがした、 bnootRun せずにか
m.ts10806

2020/04/22 11:39

Eclipseからのようなので「実行」→「Springアプリケーション」からの起動が一番分かりやすいですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問