静的リソースの配置場所（HTML・CSS・画像など）を完全ガイド！Spring Boot初心者向け解説

新人と先輩の会話形式で理解しよう

新人

「Spring BootでHTMLやCSSファイルってどこに置けばいいんですか？画像も置けるんですか？」

先輩

「いいね、それはSpring Bootの開発でとても大事な知識だよ。まずは“静的リソース”って何かから説明しようか。」

新人

「静的リソースって何ですか？Javaのコードとは違うんですか？」

先輩

「そのとおり。Javaコードじゃなくて、HTMLファイルやCSS、画像ファイルなどのWebブラウザに直接表示されるファイルのことを“静的リソース”って呼ぶんだよ。」

1. 静的リソースとは何か？

HTMLやCSS、画像ファイルなどが対象

Spring Bootの開発において、静的リソースとは、HTMLファイル・CSSファイル・JavaScriptファイル・画像ファイル（JPEG、PNGなど）といった、ユーザーに直接表示されるファイルのことです。

これらは、Javaのクラスのようにプログラムとして動作するものではなく、サーバーからそのままクライアント（ブラウザ）に送られて表示されるだけのファイルです。

静的リソースが果たす役割

Webアプリケーションでは、画面に表示するための構造（HTML）、装飾（CSS）、動き（JavaScript）、そして画像やフォントなどをブラウザに届ける必要があります。

こうした静的リソースは、サーバー側の処理とは関係なく、そのまま表示されるので、ユーザーインターフェースの見た目を作るうえで欠かせない要素です。

2. Spring Bootでは静的リソースをどこに配置するのか？

基本の配置パターンは`src/main/resources/static`

Spring Bootのプロジェクトでは、静的リソースを特定のディレクトリに配置することで、自動的にWebブラウザからアクセスできるようになります。

標準の構成では、src/main/resourcesの下に以下のディレクトリがあれば、そこに配置された静的ファイルはそのまま公開されます。

static（最も一般的）
public
resources
META-INF/resources

staticフォルダを使った実際の構成例

最もよく使われるstaticフォルダにHTMLやCSS、画像ファイルなどを配置した場合のディレクトリ構成は次のようになります。


src/
└── main/
    └── resources/
        └── static/
            ├── index.html
            ├── css/
            │   └── style.css
            ├── js/
            │   └── script.js
            └── images/
                └── logo.png

配置した静的ファイルへのアクセスURL

このように配置すれば、Spring Bootのアプリケーションを起動後、以下のURLでそれぞれの静的リソースにアクセス可能です。

http://localhost:8080/index.html
http://localhost:8080/css/style.css
http://localhost:8080/js/script.js
http://localhost:8080/images/logo.png

コントローラがなくても表示できる理由

これらの静的リソースは、@Controllerで特別な処理をしなくても、Spring Bootが自動的にWebコンテンツとして公開してくれます。

たとえば、トップページに表示したいindex.htmlをstaticフォルダに配置するだけで、http://localhost:8080/にアクセスしたときに自動でそのファイルが表示されます。

補足：テンプレートとの違い

templatesディレクトリに置くHTMLは、@Controllerで処理して動的に生成する画面です。

一方、staticに置いたHTMLは、単純にそのまま表示されるファイルで、テンプレートエンジン（Thymeleafなど）を使いません。

つまり、静的に表示したいファイルはstaticに、@Controllerで生成したい画面はtemplatesに分けて使うのがポイントです。

補足：Pleiadesでの開発手順

この解説は、Pleiadesを使ってGradleで作成したSpring Bootプロジェクトを前提としています。

プロジェクト作成時には、Pleiadesの「新規Springプロジェクト」から、Gradle方式を選び、「Web」や「Spring Boot DevTools」「Thymeleaf」などをチェックで追加します。

作成されたプロジェクトで、src/main/resources/static以下にファイルを配置するだけで、すぐにブラウザからアクセスして表示確認ができます。

3. 実際にHTMLファイルやCSSファイルを配置して表示するまでの流れ

まずはHTMLファイルを用意しよう

Spring BootでHTMLを表示するには、src/main/resources/staticディレクトリの中にHTMLファイルを配置します。

たとえばindex.htmlを作成すれば、アプリケーションを起動するだけでhttp://localhost:8080/にアクセスすることで表示されます。


src/
└── main/
    └── resources/
        └── static/
            └── index.html


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>トップページ</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <h1>こんにちは、Spring Boot!</h1>
</body>
</html>

CSSファイルの配置とリンク

次にCSSファイルを作成して、HTMLにスタイルを適用してみましょう。CSSファイルは通常static/cssフォルダに配置します。


src/
└── main/
    └── resources/
        └── static/
            └── css/
                └── style.css


body {
    background-color: #f0f0f0;
    font-family: sans-serif;
}
h1 {
    color: #333;
}

このようにCSSファイルを作成し、HTMLファイルで<link>タグを使って読み込むことで、スタイルが適用されます。

4. 画像ファイルを配置するにはどうすればいいのか？

画像ファイルも`static`に配置するだけ

画像ファイル（PNG、JPG、SVGなど）も他の静的リソースと同じように、src/main/resources/staticの中に置くだけで表示できます。

たとえばlogo.pngを表示するには、以下のように画像用ディレクトリを作成します。


src/
└── main/
    └── resources/
        └── static/
            └── images/
                └── logo.png

HTMLで画像を表示したい場合は、次のように<img>タグで指定します。


<img src="/images/logo.png" alt="ロゴ画像">

これで、http://localhost:8080/images/logo.pngにアクセスすれば、直接画像を見ることもできます。

画像が表示されないときの確認ポイント

画像がうまく表示されない場合は、以下の点を確認しましょう。

ファイル名のスペルミス
大文字・小文字の違い（Linux環境では区別される）
URLが間違っている（スラッシュの位置など）
画像ファイルがstaticフォルダの外にある

5. 静的リソースが表示されないときのよくある原因とその対処法

原因1：ファイルの配置場所が間違っている

Spring Bootでは、src/main/resources/static以下に静的リソースを置く必要があります。間違ってsrc/main/staticやsrc/resourcesに置いても、ブラウザからアクセスできません。

原因2：URLが間違っている

たとえば、/css/style.cssのように、スラッシュを忘れたり、パスを間違えるとファイルは表示されません。

HTMLのリンク指定でhref="css/style.css"のように先頭のスラッシュがないと、意図しないURLになることがあります。

原因3：Spring Securityの影響でブロックされている

Spring Securityを導入している場合、静的リソースへのアクセスがブロックされることがあります。

この場合は、セキュリティ設定で以下のように静的リソースを許可する設定を追加します。


@Override
protected void configure(HttpSecurity http) throws Exception {
    http
        .authorizeRequests()
        .antMatchers("/css/**", "/js/**", "/images/**").permitAll()
        .anyRequest().authenticated();
}

原因4：ブラウザのキャッシュが影響している

HTMLやCSSを変更しても、ブラウザに古いキャッシュが残っていると表示が変わらないことがあります。

その場合は、ブラウザのキャッシュをクリアするか、?v=1などのクエリパラメータをつけて強制的に再読み込みしましょう。

原因5：ファイルがビルド対象に含まれていない

Gradleでビルドしたときに、リソースが正しく反映されていない場合があります。Pleiadesでプロジェクトを再ビルドする、あるいは「プロジェクトのクリーン」を実行すると解決することがあります。

6. src/main/resources/static以外の配置場所との違い

`public`や`resources`との違いとは？

Spring Bootでは、static以外にもpublic、resources、META-INF/resourcesといった複数のディレクトリが静的リソースの配置先としてサポートされています。ただし、それぞれに特徴と違いがあります。

static：最も標準的なディレクトリ。初心者はこの場所を使うのが推奨。
public：古いSpringプロジェクトとの互換性で存在。staticとほぼ同じ扱いだがあまり使用されない。
resources：実体はsrc/main/resources直下のresourcesフォルダで、ビルド時に扱いが曖昧になりやすいため注意が必要。
META-INF/resources：Java EE仕様の一部であり、Webサーバー仕様によりサポートされる特殊なパス。

初心者の場合、Spring Bootのガイドや書籍でも使用されているstaticを利用するのが安全で分かりやすい選択です。

複数の配置場所がある理由

これらのディレクトリは、spring-boot-autoconfigureによって設定された内部のリソースハンドラが自動で解釈しているため、ユーザー側で特別な設定は不要です。

ただし、複数の場所に同じ名前のファイルがあると、優先順位は static → public → resources → META-INF/resourcesの順になります。

配置場所の比較表


src/
└── main/
    └── resources/
        ├── static/
        ├── public/
        ├── resources/
        └── META-INF/
            └── resources/

それぞれのディレクトリにsample.htmlを配置した場合、最初にstatic/sample.htmlが優先されます。

7. テンプレート（Thymeleaf）との違いと使い分け

`static`と`templates`の根本的な違い

静的リソースを配置するstaticフォルダと、テンプレートファイルを配置するtemplatesフォルダは、目的がまったく異なります。

static：そのまま表示されるHTMLやCSS、画像など（クライアントに直接配信）
templates：Spring MVCの@Controllerからreturnで返すHTMLテンプレート（Thymeleafなどで動的に出力）

静的HTMLとテンプレートHTMLの使い分け

ログインページやヘルプページなど、動的なデータが不要なページはstaticに置くと簡単です。

一方で、ユーザー情報を表示するマイページなど、Javaコードと連携する必要があるページはtemplatesに置いて@Controllerからデータを渡してレンダリングします。

具体的な使用例の違い


src/
└── main/
    └── resources/
        ├── static/
        │   └── help.html
        └── templates/
            └── user.html


@Controller
public class UserController {
    @GetMapping("/user")
    public String userPage(Model model) {
        model.addAttribute("username", "山田太郎");
        return "user"; // templates/user.html が表示される
    }
}

templatesにあるファイルは、URL直接アクセスでは表示されません。@Controller経由で返す必要があります。

8. 開発のベストプラクティスと初心者へのアドバイス

静的リソースは`static`に統一しよう

初心者のうちは、publicやresourcesなど複数の配置場所を使うと混乱しやすいため、基本はすべてstaticにまとめて配置するのがベストです。

HTML・CSS・画像・JSなどは、次のような構成にしておくと保守しやすくなります。


src/
└── main/
    └── resources/
        └── static/
            ├── index.html
            ├── css/
            ├── js/
            └── images/

Spring Bootの構成を覚えることが重要

Spring Bootでは、設定なしで静的リソースを簡単に扱えるようになっています。そのため、まずは「どこに置けばいいか」「どのURLで見れるか」を覚えることが重要です。

また、テンプレートとの違いを理解すれば、動的なHTMLと静的なHTMLの役割分担も明確になり、プロジェクトの整理がしやすくなります。

初心者がつまずきやすいポイントを意識しよう

HTMLやCSSが表示されないときは、ファイルパスと配置場所を真っ先に確認する
templatesにあるHTMLはURL直叩きでは見えないことを理解する
画像やスタイルがうまく適用されないときは、ブラウザキャッシュの影響を疑う

こうした基礎的な知識をしっかり身につけておくことで、Spring BootでのWebアプリ開発が格段にスムーズになります。