先生と生徒の会話形式で理解しよう

生徒

「JSPでCSSファイルとかJavaScriptファイルを読み込むにはどうすればいいんですか？」

先生

「JSPでもHTMLと同じように<link>タグや<script>タグで外部ファイルを読み込めます。ただし、JSPの場合はパスの指定にちょっと注意が必要なんですよ。」

生徒

「パスってそんなに大事なんですか？どこかに置いておけば読み込まれると思ってました…」

先生

「そこが初心者がよくつまずくポイントです！今回はJSPでCSSやJSを正しく読み込む方法と、パス指定の基本をしっかり覚えていきましょう。」

1. JSPでも基本はHTMLと同じ！

まずおさえておきたいのは、JSP（JavaServer Pages）は「見た目の部分だけを見るとHTMLとほぼ同じ」ということです。画面のレイアウトや色を決めるCSSファイル、ボタンを押したときの動きをつけるJavaScriptファイルも、HTMLと同じ書き方で読み込みます。

外部CSSファイルを読み込むには<link>タグ、JavaScriptファイルを読み込むには<script>タグを使います。プログラミング未経験の方は、まず「画面のデザイン用がCSS」「動きをつけるのがJavaScript」とイメージしておくと理解しやすくなります。


<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>

<link>タグのrel="stylesheet"は「これはスタイルシートですよ」という意味で、hrefにCSSファイルの場所を書きます。<script>タグではsrcにJavaScriptファイルの場所を書きます。

このように書くと、ブラウザは画面を表示するときにcss/style.cssやjs/script.jsというファイルをサーバーから探して読み込み、「文字の色」「余白」「ボタンの動き」などを反映してくれます。

実際のJSPでも、HTMLの<head>内にCSSの読み込みを、<body>の最後のほうにJavaScriptの読み込みを書くことが多いです。基本の形はHTMLと同じなので、「まずはHTMLと同じつもりで書いてみる」ことから始めると、JSPでのCSS・JSの読み込みもスムーズに理解できます。

2. JSPではWebアプリケーションのルートを意識する

JSPでよくある失敗は、外部ファイルのパス指定がずれていて、CSSやJavaScriptが読み込まれないケースです。JSPはサーブレットとして動作するため、ファイルの置き場所やURLパスに注意が必要です。

例えば、次のようなフォルダ構成を考えてみましょう：

WebContent/

index.jsp
css/style.css
js/script.js

このとき、JSPファイルからCSSやJSを読み込むには、ルートパスを意識して指定する必要があります。


<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>

ただし、JSPファイルがサブフォルダにある場合やURLルーティングが影響する場合、相対パスではうまく読み込めないことがあります。

3. `<c:url>`タグでパスを安全に指定しよう

3. <c:url>タグでパスを安全に指定しよう

JSPではJSTL（JSP Standard Tag Library）を使うことで、パス指定をより安全に行うことができます。特に<c:url>タグは、Webアプリケーションのコンテキストパスを自動で補完してくれる便利なタグです。


<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<link rel="stylesheet" href="<c:url value='/css/style.css' />">
<script src="<c:url value='/js/script.js' />"></script>

このように記述すれば、どのJSPファイルからでも正しいパスで読み込むことができるようになります。

4. `<base>`タグでベースパスを指定する方法

4. <base>タグでベースパスを指定する方法

もう一つの方法として、HTMLの<base>タグを使ってベースパスを指定する方法もあります。これにより、全ての相対パスが指定したURLを基準に解釈されます。


<base href="${pageContext.request.contextPath}/">
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>

この方法も便利ですが、他のURLにも影響を与えるため、使う際は慎重に検討しましょう。

5. 静的ファイルはどこに置けばいい？配置場所の基本

JSPプロジェクトにおいて、CSSファイルやJavaScriptファイルは通常、以下のようなフォルダに分けて整理します。

/css：スタイルシート（CSS）を格納
/js：JavaScriptファイルを格納
/images：画像ファイルを格納

これらのフォルダはWebContent直下に配置するのが一般的です。サーバーはこの場所をルートとして扱うため、パスの指定がしやすくなります。

6. JSPでの読み込み確認とブラウザのキャッシュ対策

CSSやJSを更新しても変更が反映されない場合、ブラウザのキャッシュが原因になっていることがあります。その対策として、読み込みURLにパラメータを付けてキャッシュを無効化する方法があります。


<link rel="stylesheet" href="css/style.css?v=20250828">
<script src="js/script.js?v=20250828"></script>

バージョン番号や日付をパラメータとして付けることで、毎回新しいファイルとして読み込まれるようになります。

7. JavaScriptの実行タイミングにも注意

JSPでJavaScriptを使う場合、DOMの読み込みが完了してから処理を行うようにしましょう。window.onloadやDOMContentLoadedイベントを使うのが一般的です。


<script>
    window.onload = function() {
        alert("ページが読み込まれました！");
    };
</script>

特にJSPでは、Javaのコードが実行された後にHTMLとして出力されるため、<script>タグの位置や処理のタイミングに注意が必要です。

まとめ

JSPでCSSやJavaScriptを読み込む方法は、一見すると単純なようでいて、実際にはパス指定の仕組みやフォルダ構成、Webアプリケーション特有の動作を理解していないとつまずきやすい部分です。とくに、JSPはただのHTMLではなく、サーブレットとして処理される仕組みがあるため、外部ファイルを正しく読み込むには「どの場所からどのファイルを参照するのか」を丁寧に把握することが大切です。

今回の記事では、初心者が特につまずきやすいCSSやJSの読み込み方法を基礎から見直し、JSPでよく使われるフォルダ構成や、相対パスと絶対パスの違い、プロジェクトのコンテキストパスを意識した<c:url>タグの使い方などを詳しく紹介しました。これらはWebアプリケーションを開発する上で欠かせない基礎知識となり、今後より複雑な画面を作るときにも役立ちます。

また、ブラウザのキャッシュによってCSSやJSが更新されない問題もよくある悩みのひとつです。読み込みURLにバージョン情報や日付を付与することで、確実に最新ファイルを読み込む方法も覚えておくとトラブルを避けやすくなります。その他にも、JavaScriptの実行タイミングを意識することによって、思った通りの動作を実現しやすくなります。

以下では、今回学んだ内容を振り返るために簡単なサンプルプログラムも載せています。実際に手を動かしながら、CSSやJSが意図どおりに読み込まれるか確認してみると理解がより深まります。

JSPでの外部CSS・JS読み込みサンプル


<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <base href="${pageContext.request.contextPath}/">
    <link rel="stylesheet" href="<c:url value='/css/sample.css' />">
    <script src="<c:url value='/js/sample.js' />"></script>
</head>
<body>
    <h1>外部ファイル読み込み確認ページ</h1>
    <p>このページではCSSとJSが正しく読み込まれているか確認できます。</p>
</body>
</html>

実際に上記のコードを配置して動作させると、フォルダ構成やファイルパスの扱いがどれほど大切かがよく分かるはずです。初心者のうちは「読み込めないのはファイルのせいだろう」と考えがちですが、実際にはパス指定の tiny なズレが原因ということがよくあります。逆に言えば、このパス指定さえ丁寧に理解しておけば、JSPでのCSSやJSの取り扱いはぐっと楽になるでしょう。

先生と生徒の振り返り会話

生徒

「先生、今日の内容でCSSやJSが読み込まれない原因のほとんどが“パスの指定”ってことがわかりました…！思っていたより奥が深いんですね。」

先生

「その通りです。JSPはサーブレットとして動く以上、パスの考え方をしっかり押さえておくと、画面作りがスムーズになりますよ。特に<c:url>の扱いは今後も役に立ちます。」

生徒

「あと、キャッシュで更新が反映されないのも、今日初めて知りました。毎回何で変わらないのか不思議でした。」

先生

「Web開発では、見た目が変わらない原因がキャッシュのことはよくあります。バージョンを付けてあげれば解決することも多いですね。」

生徒

「なるほど…！今日の内容を自分のプロジェクトでも使ってみます！」

先生