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

生徒

「FlaskでWebサイトを作ってみたいんですが、背景の色を変えたり、画像を表示したり、ボタンを押したときに動きをつけたりしたいです！」

先生

「それには、CSS（シーエスエス）やJavaScript（ジャバスクリプト）、画像などの“静的ファイル”を使いますよ。」

生徒

「静的ファイルって何ですか？どうやって使うんですか？」

先生

「とても良い質問ですね。これからFlask（フラスク）で静的ファイルを使う方法を、初心者向けにゆっくり解説していきます！」

1. Flaskとは？簡単におさらい

Flask（フラスク）は、Pythonで作られたとても軽量なWebアプリケーションフレームワークです。HTML（エイチティーエムエル）やCSS、JavaScriptなどを組み合わせて、WebサイトやWebアプリを作るときに使います。

今回のテーマは「静的ファイル」。これはWebページの見た目や動き、画像などを制御するための重要なパーツです。

2. 静的ファイルってなに？

静的ファイル（せいてきファイル）とは、次のようなファイルのことを言います。

CSSファイル：文字の色や背景色、レイアウトなど見た目を整えるファイル
JavaScriptファイル：ボタンを押したら動く、画面が変わるなどの動きをつけるファイル
画像ファイル：JPEG、PNG、GIFなどの画像

「静的」と言われるのは、これらのファイルがFlaskのプログラムとは別に、あらかじめ準備された状態で使われるからです。

3. Flaskで静的ファイルを使うには？

Flaskには、静的ファイル専用のフォルダ（フォルダ＝パソコンの中の「入れ物」）を作って、そこにCSSやJavaScript、画像を保存するルールがあります。

そのフォルダの名前は「static」といいます。


project/
├── app.py
├── static/
│   ├── style.css
│   ├── script.js
│   └── image.png
└── templates/
    └── index.html

```

上のように「static」フォルダの中に必要なファイルを入れておきます。

```

4. HTMLで静的ファイルを読み込む方法

FlaskでHTMLを書くときは、「templates」フォルダを使います。そこで、<link>タグや<script>タグを使ってCSSやJavaScriptを読み込みます。

読み込むときは、url_for（ユアールエル・フォー）というFlaskの特別な命令を使います。


<!DOCTYPE html>
<html>
<head>
    <title>Flaskで静的ファイル</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <script src="{{ url_for('static', filename='script.js') }}"></script>

</head>
<body>
    <h1>ようこそ！</h1>
    <img src="{{ url_for('static', filename='image.png') }}" alt="サンプル画像">
</body>
</html>

5. PythonコードでFlaskを起動しよう

Flaskアプリを作るには、Pythonのプログラムを書いて動かす必要があります。とても簡単な例を見てみましょう。


from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")

if __name__ == "__main__":
    app.run(debug=True)

6. CSSファイルの書き方（style.css）

CSSファイルには、見た目を整えるためのルールを書きます。たとえば、背景の色を変えたり、文字を大きくしたりします。


body {
    background-color: #f0f8ff;
    font-family: sans-serif;
}
h1 {
    color: #3333cc;
}

7. JavaScriptファイルの書き方（script.js）

JavaScriptは、Webページに「動き」を加えるスクリプトです。例えば、ボタンをクリックしたらアラートを出すようなコードです。


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

8. 画像を表示する方法

画像を表示するときも、url_forを使います。Flaskでは、staticフォルダの中に画像を置いて、それをHTMLから呼び出します。


<img src="{{ url_for('static', filename='image.png') }}" alt="サンプル画像">

9. よくあるエラーと対処法

ファイルが表示されない：staticフォルダの名前を間違えていないか確認しましょう。
CSSが適用されない：url_forで指定するファイル名にスペルミスがないかチェックしましょう。
画像が表示されない：画像のファイル名や拡張子（.png、.jpgなど）を確認しましょう。

10. 実行結果のイメージ

実行すると、背景が水色になり、「ようこそ！」の文字が濃い青色で表示され、画像が画面に表示されます。ページを開いたときにアラートも表示されます。


（ようこそ！の見出しが表示され、背景色が淡い水色、画像が表示されます）

まとめ

Flask（フラスク）でCSSやJavaScriptや画像といった静的ファイルを扱うためには、staticフォルダの構成やtemplatesフォルダでのHTML記述、そしてurl_forを正しく使うことがとても重要になります。とくに、初心者がつまずきやすいポイントとして、フォルダ名の間違いや、ファイル名の表記ゆれ、読み込みタグの指定ミスなどがあります。この記事で学んだように、Flaskの基本フォルダ構造を守り、HTML側では<link>タグや<script>タグ、そして画像用の<img>タグを組み合わせていくことで、見た目も動きも思い通りにデザインできます。 Flaskはとてもシンプルでありながら、CSSファイルで背景色やレイアウトを調整したり、JavaScriptファイルで動きを加えたり、画像を鮮やかに表示したりと、多くの工夫ができるのが魅力です。初心者でも扱いやすく、Webページを自分の思い通りに表現する第一歩として最適なフレームワークと言えます。特に、初心者にとって学びやすい理由は、ファイルの配置ルールが明確で、どのファイルをどこに置くべきかが明快であることにあります。また、render_templateを使ってテンプレートを呼び出し、スタイルシートやスクリプトの読み込みを確実に行うことで、FlaskでのWeb制作がよりスムーズになります。画像のパス指定も同じurl_forで統一されているため、一度覚えてしまえば応用がしやすく、複雑なページでも扱いやすくなります。実際のプロジェクトに挑戦するときは、今回紹介した基本構造を守るだけで、CSSで細かい配色をデザインしたり、JavaScriptでイベント操作を加えたり、テンプレートエンジンで動的ページを生成したりすることが可能です。Flaskを使った開発の基礎として、ファイルの配置・構造、HTMLでの読み込み方法をしっかり覚えておくと、後の学習がとても楽になります。

サンプルプログラム（まとめ用）

今回学んだ内容をふまえて、静的ファイルを扱う最小構成のFlaskプロジェクト例をまとめとして記載します。


from flask import Flask, render_template, url_for

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("index.html")

if __name__ == "__main__":
    app.run(debug=True)


<!DOCTYPE html>
<html>
<head>
    <title>まとめページ</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='summary.css') }}">
    <script src="{{ url_for('static', filename='summary.js') }}"></script>
</head>
<body>
    <h1 class="mark fw-bold">静的ファイルのまとめサンプル</h1>
    <img src="{{ url_for('static', filename='sample.png') }}" alt="サンプル画像">
</body>
</html>


body {
    background-color: #eef7ff;
    font-family: "Hiragino Sans", sans-serif;
}
h1 {
    color: #2244aa;
    padding: 10px;
}


window.onload = function() {
    console.log("まとめページの静的ファイルが正しく読み込まれました");
};

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

生徒「FlaskでCSSやJavaScriptを使えるようになって、ページの見た目や動きが一気によくなりました！」

先生「そうですね。staticフォルダの使い方とurl_forの指定を覚えれば、かなり自由に表現できますよ。」

生徒「画像のパスも同じ方法で呼び出せるのが便利ですね！」

先生「ええ、統一されているので覚えやすいでしょう。今回の学びを活かせば、もっと複雑なページも作れますよ。」

この記事を読んだ人からの質問

FlaskでCSS・JavaScript・画像を使う方法を完全ガイド！初心者向け静的ファイルの管理方法