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

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

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

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

Java

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

CSS

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

Q&A

解決済

2回答

1736閲覧

CSSのヘッダーの背景色が反映されません

merumeru794

総合スコア1

JSP

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

Java

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

CSS

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

0グッド

0クリップ

投稿2020/10/14 14:04

プログラミング初心者です。Java(eclipse_4.6.3を使用)で出席管理システムのWebアプリケーションを作っています。ビューはJSP,デザインにCSSを使っています。

CSSでヘッダーの背景色#333333を設定しましたが、Tomcat8を再会し、実行してもヘッダー部分の背景色が反映されません。

↓CSSの該当するコード

CSS

1#header { 2 width: 100%; 3 height: 70%; 4 background-color: #333333; 5}

このように設定しましたが、以下のようになります。
「出席管理システムへようこそ」の文字の上のヘッダー部分に、白文字で「出席管理システム」と薄ら出ています。しかし、本来そのヘッダーの背景色は#333333と設定したはずですが、反映されません。
リンク内容
調べてみたところ、JSPでcssを呼び出す(?)ためのスタイルシートのリンクを間違えている可能性があるという情報があったので、確認したところ、私のJSPでは問題ありませんでした。一度削除して改めて書き直してみましたが変わりませんでした。

↓JSPの該当するコード

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 <link rel="stylesheet" href="<c:url value='/css/reset.css' />"> 9 <link rel="stylesheet" href="<c:url value='/css/style.css' />"> 10 </head> 11 <body> 12 <div id="wrapper"> 13 <h1>出席管理システム</h1> 14 </div> 15 <div id="content"> 16 ${param.content} 17 </div> 18 <div id="footer"> 19 by ABC Company 20 </div> 21 22 </body> 23</html>

原因は何かご存知の方はいらっしゃいますか?よろしくお願いします。

*開発環境 MacOS Catalina バージョン10.15.7 、 Eclipse_4.6.3

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

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

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

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

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

guest

回答2

0

ベストアンサー

CSSで#headerと指定したのなら、HTMLではid="header"と指定しなければスタイルが適用されませんが、見たところ、それに対応する部分がないようですね。id="wrapper"id="header"の間違いなのでは?

なお、HTML5で書くのですから、ヘッダーにはheader要素、フッターにはfooter要素を使いましょう。

投稿2020/10/14 14:16

Daregada

総合スコア11990

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

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

merumeru794

2020/10/14 14:45

ご回答ありがとうございます。おっしゃる通り、HTMLで、id="wrapper"をid="header"としなければいけませんでした。これで実行したところ、きちんとヘッダーの背景色が反映されました!ありがとうございました!
guest

0

JSPで別ディレクトリに存在するCSSやJavaScript定義のパスは、そのJSPを表示したときのURLの影響を受けますので、必ずコンテキストパスから始めると良いです。

html

1href="${pageContext.request.contextPath}/css/reset.css"

なお c:urlはURLエンコードを実施してくれるタグですので、パスの修正はしてくれません。

投稿2020/10/14 14:19

A-pZ

総合スコア12011

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

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

merumeru794

2020/10/14 14:50

ご回答ありがとうございました。無事解決できました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問