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

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

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

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

Spring Boot

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

Q&A

解決済

2回答

848閲覧

第二階層でのCSSの読み込みがうまくいかない

退会済みユーザー

退会済みユーザー

総合スコア0

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

Spring Boot

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

0グッド

0クリップ

投稿2018/08/14 04:01

前提・実現したいこと

第二階層でもcssを適用させたい

前提
spring boot 3.9.4
htmlレスポンス thymelmeaf
css bootstrap

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

localhost:8080/loginの場合だと
cssは適用するが
localhost:8080/login/Homeだと
homeのページでは適用してくれない

該当のソースコード

java

1//mainメゾット 2package com.main; 3 4import org.springframework.boot.SpringApplication; 5import org.springframework.boot.autoconfigure.SpringBootApplication; 6 7 8/* 9 * mainメゾット 10 * 読み込み先をcontrollerパッケージへ指定する。 11 */ 12@SpringBootApplication( 13 //読み込むパッケージ 14 scanBasePackages ={"com.login.controller","com.home"}) 15 16public class Application{ 17 18 public static void main(String[] args) { 19 SpringApplication.run(Application.class, args); 20 } 21 22}

java

1/home呼び出し 2package com.home.controller; 3 4import org.springframework.stereotype.Controller; 5import org.springframework.web.bind.annotation.RequestMapping; 6import org.springframework.web.bind.annotation.RequestMethod; 7import org.springframework.web.servlet.ModelAndView; 8 9/* 10 * ThirdCore ver1.0 11 * ホーム画面 12 */ 13@Controller 14public class HomeController { 15 16 ModelAndView model = new ModelAndView(); 17 18 @RequestMapping(value = "/login/home", method = RequestMethod.GET) 19 public Object login() { 20 model.setViewName("Home.html"); 21 return model; 22 } 23}

java

1//login呼び出し 2package com.login.controller; 3 4import org.springframework.beans.factory.annotation.Autowired; 5import org.springframework.beans.propertyeditors.StringTrimmerEditor; 6import org.springframework.context.annotation.ComponentScan; 7import org.springframework.stereotype.Controller; 8import org.springframework.web.bind.WebDataBinder; 9import org.springframework.web.bind.annotation.InitBinder; 10import org.springframework.web.bind.annotation.ModelAttribute; 11import org.springframework.web.bind.annotation.RequestMapping; 12import org.springframework.web.bind.annotation.RequestMethod; 13import org.springframework.web.servlet.ModelAndView; 14import com.form.FormLogin; 15import com.login.service.LoginInterface; 16 17@Controller 18@ComponentScan("com.login.service") 19@ComponentScan("com.form") 20public class LoginController { 21 22 //ModelAndViewの統一化 23 ModelAndView model = new ModelAndView(); 24 25 /* 26 * フォームにnullの投入 27 */ 28 @InitBinder 29 public void initbinder(WebDataBinder binder) { 30 binder.registerCustomEditor(String.class, new StringTrimmerEditor(true)); 31 } 32 33 /* 34 *ログイン画面(初期) 35 *@return model 36 */ 37 @RequestMapping(value = "/login", method = RequestMethod.GET) 38 public Object login() { 39 model.setViewName("LoginOrNew.html"); 40 return model; 41 }

html

1//Home.htmlとLoginOrNew.htmlは同じhtmlソースです 2 3<!DOCTYPE html> 4<html xmlns:th="http://www.thymeleaf.org"> 5<head> 6 7 8<meta charset="utf-8"> 9<title>login </title> 10 11<link href="css/bootstrap.css" rel="stylesheet"> 12<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 13<script src="js/bootstrap.min.js"></script> 14 15<link href="css/bootstrap.css" th:href="@{css/bootstrap.css}" rel="stylesheet"> 16<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" th:src="@{https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js}"></script> 17<script src="js/bootstrap.js" th:src="@{js/bootstrap.js}"></script> 18</head> 19<body> 20 21 <!-- header --> 22 <div class="row" style="background-color:black;"> 23 <div class="col-xl-3"> 24 <h3 style="font-family:'arial unicode ms'; margin:20px 0px 0px 15px;"><font color="white">Third Core Login Page</font></h3> 25 <br> 26 </div> 27 <div class="col-xl-8"> 28 <button type="button" style="margin: 17.5px 0px 0px 1250px;" class="btn btn-outline-primary">Create Account</button> 29 </div> 30 </div> 31 32<!-- content --> 33 <div class="container"> 34 35 <div class="row"> 36 37 38 <div class="col-xl-3"> 39 40 </div> 41 42 43 <div class="col-xl-6"> 44 <div class="row" style="background-color:white;"> 45 46 <div class="col-xl-3"> 47 48 </div> 49 50 <div class="col-xl-6"> 51 <center> 52 <img src="image/thirdcoremark.png" alt="thirdcore" width="150" height="300" style="margin-top:60px;"> 53 54 <form action="#" th:action="@{login}" method="POST" class="form-horizontal" style="margin-top:25px;"> 55 56 <input type="text" name="name" autocomplete="off" class="form-control" placeholder="ID" style="margin:0px 0px 15px 0px;"> 57 <input type="password" name="password" autocomplete="off" class="form-control" placeholder="Password" style="margin:15px 0px 15px 0px;"> 58 <div class="form-check mb-2 mr-sm-2"> 59 <input class="form-check-input" type="checkbox" id="inlineFormCheck"> 60 <label class="form-check-label" for="inlineFormCheck">ログイン情報を保持する</label> 61 </div> 62 <button type="submit" class="btn btn-primary" style="margin:15px 0px 0px 0px;">ログイン</button> 63 <div th:if="${isEven}"> 64 <font color="red"><p style="margin-top:20px;"th:text="${result}"></p></font> 65 </div> 66 <div th:unless="${isEven}"> 67 <p style="margin-top:20px;"> </p> 68 </div> 69 </form> 70 </center> 71 </div> 72 73 <div class="col-xl-3" > 74 </div> 75 76 </div> 77 <dir style="margin-top:20px;margin-left:95px;"> 78 パスワードを忘れちゃった?そんな方は<a href="http://www.kyutech.ac.jp/examination/gs-transfer.html"><u>こちら</u></a>79 </dir> 80 </div> 81 82 83 <div class="col-xl-3"> 84 </div> 85 86 87 </div> 88 89 </div> 90 91<!-- footer --> 92 <div class="row" style="background-color:black; margin-top:95px;"> 93 94 <div class="col-xl-3"> 95 </div> 96 97 <div class="col-xl-6" style="margin-top:17px;"> 98 <center> 99 <img src="image/twittermark.png" alt="twitter" width="30" height="30" > 100 <a href="http://www.kyutech.ac.jp/examination/gs-transfer.html">@third_core_tr</a> 101  <img src="image/facebookmark.png" alt="facebook" width="20" height="20" style="margin-top:0px;"> 102 <a style="padding-left:5px;" href="http://www.kyutech.ac.jp/examination/gs-transfer.html">@third_core_fk</a> 103 </center> 104 </div> 105 106 <div class="col-xl-3" style="margin-top:40px;padding-left:260px;"> 107 108 <h6>@Third Core.inc from 2018</h6> 109 110 111 </div> 112 113 </div> 114 115 116</body> 117</html>

ファイル構成
イメージ説明

application.properties

spring.datasource.url=jdbc:mysql://localhost:3306?autoReconnect=true&useSSL=false
spring.datasource.username=admin
spring.datasource.password=admin
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
debug=true
spring.thymeleaf.mode=HTML

試したこと

上記に記載
表示ができるhtmlソースを貼り付けてみたがうまくいかなかった
みるからにcssが適用されていない

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

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答2

0

ベストアンサー

HTML

1<link href="/css/bootstrap.css" ...略...

こういうこと?

投稿2018/08/14 06:33

efcode

総合スコア422

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

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

退会済みユーザー

退会済みユーザー

2018/08/14 08:04

なぜそうゆう結論にたどり着いたの知りたいです
efcode

2018/08/14 21:16

css/bootstrap.css はカレントディレクトリの中のcssを探します。 /css/bootstrap.css は常にルートの下のcssを探します。
guest

0

訂正
localhost:8080/loginの場合だと
cssは適用するが
localhost:8080/login/homeだと
homeのページでは適用してくれない

投稿2018/08/14 04:05

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問