Flask

【Python】【Flask】外部CSSファイルやJavaScriptを読み込む

MAX

html内でcss、JavaScriptを外部ファイルとして読み込む際、cssとJavaScriptは基本的にはstatic配下に配置するが、複数のcssやJavaScriptがある場合、static/css、static/jsのようなディレクトリ構成で整理したくなる。

url_forを使用することで、htmlファイルの配置場所を気にせずにcssとJavaScriptを参照できるようになる。

簡単なことだが、意外とハマってしまいがち。

スポンサーリンク

ディレクトリ構成

ディレクトリ構成は以下の通り。

1appRoot
2┣static
3┃ ┣css
4┃ ┃┣sample1.css
5┃ ┃┗sample2.css
6┃ ┗js
7┃   ┣sample1.js
8┃   ┗sample2.js
9┣templates
10┃ ┣auth
11┃ ┃┗auth.html
12┃ ┗sample
13┃  ┣sample1.html
14┃  ┗sample2.html
15┣auth.py
16┣sample1.py
17┗sample2.py

authとsampleで機能的に分けて整理したい場合を例とする。

cssとJavaScriptの読込方法は以下の通り。

CSSとJavaScriptの読込

1<!-- sample1.html -->
2
3<!-- JavaScript読込 -->
4<script type="text/javascript" src="{{ url_for('static', filename='js/sample1.js') }}">
5
6<!-- #css読込 -->
7<link rel="stylesheet" href="{{ url_for('static', filename='css/sample1.css') }}">

url_forの第一引数はstaticにすることに注意。

相対パスで直接コーディングすると、htmlファイルの場所を容易に変えられないが、url_forを使うとhtmlファイルの場所を気にする必要がなくなる。

スポンサーリンク
ABOUT ME
MAX
MAX
ITエンジニア、データサイエンティスト
新卒でSIerに入社し、フリーランスになってWEB系へ転向。
その後AIの世界へ足を踏み入れ、正社員に戻る。 テーブルデータの分析がメイン。
スポンサーリンク
記事URLをコピーしました