テンプレートとスタティックファイルを分ける - Flask

  • 作成日:
  • 最終更新日:2025/06/25

ディレクトリ・ファイル構成

  • project
    • static
      • css
        • style.css
      • js
        • scripts.js
    • templates
      • myapp
        • index.html
      • share
        • layout.html
    • app.py

ファイルの内容

project/app.py

from flask import Flask, render_template

app = Flask(__name__)

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

project/templates/myapp/index.html

{%- extends "./share/layout.html" %}
{%- block content %}
    <h1>myapp/index.html</h1>
{%- endblock %}

project/templates/layout/layout.html

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title></title>
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}" />
        <script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
    </head>
    <body>
      <div class="content">
        <div id="main">
        {%- block content %} {% endblock %}
        </div>
      </div>
    </body>
</html>

project/static/css/style.css

h1 { color: red; }

project/static/js/scripts.js

window.onload = function(){
  alert("hello, world");
}