Flask(pythonフレームワーク)で外部CSSファイルを扱う

記事公開日:2016年12月22日
最終更新日:2022年2月2日

This post is also available in: English-US (英語)

デスクトップアプリを作るのに、Electron と Flask(pythonフレームワーク) を組み合わせて開発している際に、外部CSSファイルを読み込めなくて反映されないという初歩的な所で困ったので、メモとして書いています。

Flask(pythonフレームワーク)で外部CSSファイルを扱う場合、templatesフォルダ以下に index.html 、static/cssフォルダ以下にCSSファイルを作成し呼び出します。
templates と static フォルダの名前はデフォルト設定で自動で読み込まれるように決められているようで(変更はできるらしい)、特に理由がない限りはそのまま templates と static と命名するのが良いと思います。

ちなみに、 Electron 用のUIフレームワークは Photon Kit がなかなか良い感じです。

以下、サンプルのフォルダ構成です。
static/css は場合によっては存在しないかもしれないです。

├─static
│  ├─css
│  └─fonts
└─templates

HTMLファイルの内容と、外部CSSファイルのインクルードは以下のような感じになります。
これで、無事外部CSSファイルを読み込むことができれば、CSSが反映されるかと思います。

<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/photon.min.css') }}">    
    <title>Sample</title>
</head>
<body>
</body>
</html>