html.ProductInfo <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc...

ファイルの場所もあってると思うんですよね... ProductInfo.jsp <!DOCTYPE html> <html lang="en"> <head&...

@hayatedondaposted at 2020-10-21

【JSP】CSSが反応しません

Q&A

html.ProductInfo

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>

    <div class="FormList">
        <dl>
            <dd>
                <p>商品ID</p>
                <div>
                    <input type="text" name="" value="">
                </div>
            </dd>
            <dd>
                <p>ジャンル</p>
                <div>
                    <select name="genre" id="">
                        <option value="時計">時計</option>
                        <option value="電子機器">電子機器</option>
                        <option value="携帯">携帯</option>
                    </select>
                </div>
            </dd>
        </dl>
        <dl>
            <dd>
                <p>商品名</p>
                <div>
                    <input type="text" name="" value="">
                </div>
            </dd>
            <dd>
                <p>メーカー名</p>
                <div>
                    <select name="maker" id="">
                        <option value="パナソニック">パナソニック</option>
                        <option value="ソニー">ソニー</option>
                        <option value="シャープ">シャープ</option>
                    </select>
                </div>
            </dd>
        </dl>
        <dl>
            <dd>
                <p>金額</p>
                <div>
                    <input type="text" name="" value="">
                </div>
            </dd>
            <dd>
                <p>在校数</p>
                <div>
                    <input type="text" name="" value="">
                </div>
            </dd>
        </dl>
        <dl>
            <dd>
                <p>販売個数</p>
                <div>
                    <input type="text" value="">
                </div>
            </dd>
        </dl>
    </div>
</body>
</html>

css.ProductInfo

@charset "UTF-8";

.flex {
    display: flex;
}

.flex>div {
    width: 50%;
}

.flex>div input {
    width: 100%;
}

.flex>div select {
    width: 100%;
}

この内容で、実行してもCSSが反応してくれないので助けてください！
inputやselectだけでやるんですかね？

classを分けたりしないとですかね？

5Answer

@anonymous posted at 2020-10-21

cssファイルをincludeディレクティブでjspファイルから読み込む必要があると思います。
https://code-examples-ja.hateblo.jp/entry/2015/01/07/JSP%E3%81%A7WEB-INF%E4%BB%A5%E4%B8%8B%E3%81%AEcss%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%84JavaScript%E3%82%92%E5%8F%96%E3%82%8A%E8%BE%BC%E3%82%80

1Like

Comments

@hayatedonda
Questioner
一度行って実行してみます！
@anonymous
ProductInfo.jspは
<%@include file="../jsp/ProductInfo.jsp" %>
から
<%@include file="../../css/ProductInfo.css" %>
に変更してみてください。

ProductInfo.cssは変更する必要ないと思いますので、元に戻してください。
@anonymous
ProductInfo.jspで
<%@include file="../../css/ProductInfo.css" %>
を<head>タグの中に移動してみてください。

↓こんな感じで
<head>
<%@include file="../../css/ProductInfo.css" %>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
@hayatedonda
Questioner
直らなかったです…
@anonymous
うーん…じゃあProductInfo.jspで
<%@include file="../../css/ProductInfo.css" %>
を
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/ProductInfo.css">
に置き換えてみてください。

↓こんな感じで
<head>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/ProductInfo.css">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
@hayatedonda
Questioner
直らないですね…もしかして他がダメなんですかね？
@anonymous
マジっすか。プロジェクトをクリーンしてみてもダメですかね？
@anonymous
ProductInfo.jspの先頭行に
<%@ page contentType="text/html; charset=UTF-8" %>
を追加してみてください。
@anonymous
↓こんな感じで
<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html lang="en">
@anonymous
> ですが、まだ縦にずらっと並んでる状態なので直したいですね...

ProductInfo.cssに下記を追加したら、いけると思います。

.FormList {
display: inline-block;
}

.FormList dl {
display: flex;
}

.FormList dd {
width: 100%;
}

.FormList select {
width: 100%;
}
@hayatedonda
Questioner
できました！ありがとうございます！
あと、備考の欄を幅を整えてるにはどうすれば良いんですか？

@hayatedonda posted at 2020-10-21

ProductInfo.jsp


<%@include file="../jsp/ProductInfo.jsp" %>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>

	<div class="FormList">
		<dl>
			<dd>
				<p>商品ID</p>
				<div>
					<input type="text" name="" value="">
				</div>
			</dd>
			<dd>
				<p>ジャンル</p>
				<div>
					<select name="genre" id="">
						<option value="時計">時計</option>
						<option value="電子機器">電子機器</option>
						<option value="携帯">携帯</option>
					</select>
				</div>
			</dd>
		</dl>
		<dl>
			<dd>
				<p>商品名</p>
				<div>
					<input type="text" name="" value="">
				</div>
			</dd>
			<dd>
				<p>メーカー名</p>
				<div>
					<select name="maker" id="">
						<option value="パナソニック">パナソニック</option>
						<option value="ソニー">ソニー</option>
						<option value="シャープ">シャープ</option>
					</select>
				</div>
			</dd>
		</dl>
		<dl>
			<dd>
				<p>金額</p>
				<div>
					<input type="text" name="" value="">
				</div>
			</dd>
			<dd>
				<p>在校数</p>
				<div>
					<input type="text" name="" value="">
				</div>
			</dd>
		</dl>
		<dl>
			<dd>
				<p>販売個数</p>
				<div>
					<input type="text" value="">
				</div>
			</dd>
		</dl>
	</div>
</body>
</html>

ProductInfo.css


<%@include file="../css/ProductInfo..css" %>

	.flex {
    display: flex;
}

.flex>div {
    width: 50%;
}

.flex>div input {
    width: 100%;
}

.flex>div select {
    width: 100%;
}

と初めにやってみましたがエラーが出てしまいました。!

http___localhost_8081_ProductList_HelloList - C__pleiades_workspace - Eclipse IDE 2020_10_21 11_57_35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/800730/57f9bb7c-8f40-dbc9-52be-94a09cb48a64.png)

0Like

@hayatedonda posted at 2020-10-21

こうなってしまいました！

0Like

@hayatedonda posted at 2020-10-21

ファイルの場所もあってると思うんですよね...

ProductInfo.jsp


<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/ProductInfo.css">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>

    <div class="FormList">
        <dl>
            <dd>
                <p>商品ID</p>
                <div>
                    <input type="text" name="" value="">
                </div>
            </dd>
            <dd>
                <p>ジャンル</p>
                <div>
                    <select name="genre" id="">
                        <option value="時計">時計</option>
                        <option value="電子機器">電子機器</option>
                        <option value="携帯">携帯</option>
                    </select>
                </div>
            </dd>
        </dl>
        <dl>
            <dd>
                <p>商品名</p>
                <div>
                    <input type="text" name="" value="">
                </div>
            </dd>
            <dd>
                <p>メーカー名</p>
                <div>
                    <select name="maker" id="">
                        <option value="パナソニック">パナソニック</option>
                        <option value="ソニー">ソニー</option>
                        <option value="シャープ">シャープ</option>
                    </select>
                </div>
            </dd>
        </dl>
        <dl>
            <dd>
                <p>金額</p>
                <div>
                    <input type="text" name="" value="">
                </div>
            </dd>
            <dd>
                <p>在校数</p>
                <div>
                    <input type="text" name="" value="">
                </div>
            </dd>
        </dl>
        <dl>
            <dd>
                <p>販売個数</p>
                <div>
                    <input type="text" value="">
                </div>
            </dd>
        </dl>
    </div>
</body>
</html>

ProductInfo.css


@charset "UTF-8";

.flex {
    display: flex;
}

.flex>div {
    width: 50%;
}

.flex>div input {
    width: 100%;
}

.flex>div select {
    width: 100%;
}

HelloList.java


package sample;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class HelloList
 */
@WebServlet("/HelloList")
public class HelloList extends HttpServlet {
	private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public HelloList() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/html; charset=UTF-8");
		RequestDispatcher dispatch = request.getRequestDispatcher("WEB-INF/jsp/ProductInfo.jsp");
		dispatch.forward(request, response);

	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

0Like

@hayatedonda posted at 2020-10-21

直りました！ありがとうございます！
ですが、まだ縦にずらっと並んでる状態なので直したいですね...

0Like

Are you sure you want to delete the question?

【JSP】CSSが反応しません

5Answer

Comments

Your answer might help someone💌