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

記事公開日:
最終更新日:

Sponsored Links

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

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

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

以下、サンプルのフォルダ構成です。

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

HTMLファイルと、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>

About
Amelt.net,LLCの創業者で、費用対効果の高い統合webマーケティングによりビジネスパートナーとして継続的にサポート。詳しいより。ブログの更新情報facebookページGoogle+そしてTwitter、またRSSfeedlyLINE@にてお知らせしていますのでフォローよろしくお願い致します。


Sponsored Links