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

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

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

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

CSS

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

Q&A

解決済

1回答

1654閲覧

CSSが反映されない

yukishiroma

総合スコア7

JSP

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

CSS

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

0グッド

1クリップ

投稿2020/10/19 15:01

編集2020/10/20 12:16

画像のように一覧を表示したいのですがまったく反映されません。CSSのコードの書き方に問題があるのでしょうか?
イメージ説明説明](f432119f7ce21b0cef0f5363e5fc3bd5.png)

jsp

1<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 2<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 3<c:import url="../layout/app.jsp"> 4 <c:param name="content"> 5 <c:if test="${flush != null}"> 6 <div id="flush_success"> 7 <c:out value="${flush}"></c:out> 8 </div> 9 </c:if> 10 <h2>生徒一覧</h2> 11 <table id="student_list"> 12 <tbody> 13 <tr> 14 <th>学籍番号</th> 15 <th>氏名</th> 16 <th>操作</th> 17 </tr> 18 <c:forEach var="student" items="${students}" varStatus="status"> 19 <tr class="row${status.count % 2}"> 20 <td><c:out value="${employee.code}" /></td> 21 <td><c:out value="${employee.name}" /></td> 22 <td> 23 <c:choose> 24 <c:when test="${employee.delete_flag == 1}"> 25 (削除済み) 26 </c:when> 27 <c:otherwise> 28 <a href="<c:url value='/employees/show?id=${employee.id}' />">詳細を表示</a> 29 </c:otherwise> 30 </c:choose> 31 </td> 32 </tr> 33 </c:forEach> 34 </tbody> 35 </table> 36 37 <div id="pagination"> 38 (全 ${students_count} 件)<br /> 39 <c:forEach var="i" begin="1" end="${((students_count - 1) / 15) + 1}" step="1"> 40 <c:choose> 41 <c:when test="${i == page}"> 42 <c:out value="${i}" />&nbsp; 43 </c:when> 44 <c:otherwise> 45 <a href="<c:url value='/health/index?page=${i}' />"><c:out value="${i}" /></a>&nbsp; 46 </c:otherwise> 47 </c:choose> 48 </c:forEach> 49 </div> 50 <p><a href="<c:url value='/employees/new' />">新規従業員の登録</a></p> 51 52 </c:param> 53</c:import>

css

1table, tr, th, td { 2 border: 1px solid #cccccc; 3} 4 5table { 6 width: 100%; 7 table-layout: fixed; 8} 9 10th { 11 width: 26%; 12 padding: 10px 2%; 13} 14 15td { 16 width: 66%; 17 padding: 10px 2%; 18}

app.jsp

1<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 2<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 3<!DOCTYPE html> 4<html lang="ja"> 5 <head> 6 <meta charset="UTF-8"> 7 <title>健康チェック</title> 8 9 <link rel="stylesheet" href="<c:url value='/CSS/style.css' />"> 10 </head> 11 <body> 12 <div id="wrapper"> 13 <div id="header"> 14 <h1>健康チェック</h1> 15 </div> 16 <div id="content"> 17 ${param.content} 18 </div> 19 <div id="footer"> 20 by Yuki shiroma. 21 </div> 22 </div> 23 </body> 24</html>

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

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

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

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

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

firegrape

2020/10/19 16:02

全く表示されないのはCSSの問題ではないと思います。 ここに記載されているすべての変数が機能していないと いうことですか? もうちょっと問題を絞った方がいいと思います。
m.ts10806

2020/10/19 20:44

CSSを提示してください。 また、どうなるつもりのCSSなのかを書かれないと答えようがありません。一部なのか全部なのか。自身の意図を記載してください
A-pZ

2020/10/20 01:07

JSPを拝見した限りでは、表示したい画面の項目が「学籍番号」「氏名」「操作」なのに対し画面キャプチャの項目が違うようです。画面キャプチャしている内容とJSPがあっているかを再確認してから、質問を編集されると回答が得られると思います。 また、記載されたJSPにはスタイルシートの定義を呼び出していませんから、JSPの冒頭部で<c:import url="../layout/app.jsp">を実行しているところから呼び出しているのではと予想できますから、このapp.jspも質問に追記していただけますか。
yukishiroma

2020/10/20 12:56

3つ目のコードがapp.jspです。
guest

回答1

0

ベストアンサー

app.jspにてCSSを読み込む設定をされていますが、このパス設定があまり良くないようです。
サーブレットやJSPで他のリソースパスを設定する場合は、相対パスを使うのではなく、コンテキストパスを取得して、そこから続けてパスを記載する方法が使われます。

Teratail内でも [JSP コンテキストパス]で過去類似する問題・解決がいくつかありましたので参考にしてみてください。

https://teratail.com/questions/78233

投稿2020/10/20 13:33

A-pZ

総合スコア12011

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問