0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

IntelliJIDEA でJSPにCSSを適用してみた

Last updated at Posted at 2016-12-18

IntelliJIDEA でjspにCSSを適用する方法についていろいろ調べて苦戦していたが、
実際のjspのファイルの配置パスによってurlを指定するといいでしょう。
適用するのに成功したので、注意する点を以下でメモする。

屏幕截图(11).png

(重要)IntelliJIDEAでのファイル構成は図の通り、cssファイルや、img素材ファイルをすべてWebコンテキストルートの下、 WEB-INFファイルの外に置く。なぜならば、/WEB-INFはWebアプリケーションの構成情報やクラスファイルなどを格納するためのディレクトリです。
外部から直接アクセスすることはできません。(出典:https://teratail.com/questions/638)

ご覧の通り、jspファイルは二つのところに置いてある。一つはweb-index.jsp,もう一つはweb-WEB-INF-jsp-....

1)webファイルの直下であるindex.jspにcssファイルを適用:urlを相対パスで指定

qiita.rb
 <link href="css/style.css" rel="stylesheet" type="text/css" media="all">

2)WEB-INFの中にあるjspファイル群にcssファイルを適用:urlをルートからの絶対パスで指定

qiita.rb
<link href="/docotsubu/css/style.css" rel="stylesheet" type="text/css" media="all">

[docotsubu]はproject名

適用後のページ↓↓↓↓↓↓↓

屏幕截图(10).png

もし適用できなかったら、次の方法で調べよう。

ブラウザでjspファイルのコードを調べる。
屏幕截图(12).png
下線が引いているcssを指定するパスをクリックし、もしエラーになったら、ブラウザのアドレス欄でcssファイルのurlを調べてみよう。

qiita.rb
localhost:8080/プロジェクト名/ルートからcssファイルまでのパス

になるはずだが、間違っているかどうかを調べよう。

次は正しく反映されたURLです。

屏幕截图(14).png

以上で、IntelliJIDEA でjspにCSSを適用してみた。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?