FlaskにJavaScriptとCSSを追加する方法

2024-02-15 14:15 Flask JavaScript CSS

  1. 静的フォルダの作成: Flaskでは、JavaScriptファイルとCSSファイルを保存するための静的フォルダを作成する必要があります。通常、プロジェクトのルートディレクトリに「static」という名前のフォルダを作成します。

  2. JavaScriptファイルの追加: 静的フォルダ内に、JavaScriptファイルを作成または配置します。例えば、「static/js/script.js」というパスにファイルを配置するとします。

  3. CSSファイルの追加: 同様に、静的フォルダ内にCSSファイルを作成または配置します。例えば、「static/css/styles.css」というパスにファイルを配置するとします。

  4. HTMLテンプレートの更新: ウェブページのHTMLテンプレートファイルを編集し、JavaScriptとCSSファイルを読み込むためのリンクを追加します。以下は、テンプレートファイルの一部です。

    <head>
   <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
   <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</head>

    上記のコードでは、url_for関数を使用して静的ファイルへのパスを生成しています。

これで、FlaskアプリケーションにJavaScriptとCSSが追加されました。これらのファイルを適切に編集することで、ウェブページにインタラクティブな要素やスタイルを追加することができます。