以前、Jinjaテンプレートで作成したWebページに、スタイルシート(CSSファイル)を用いてページを装飾したいと思います。
スタイルシートは以下のように「static」フォルダに置きます。
|
1 2 3 |
flask └── static └── style.css |
今回は、CSSファイルをstyle.cssとして作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
body { margin-top:20px; marrgin-left:50px; max-width:900px; background:aliceblue; } h1{ background:navy; color:cyan; padding-top:10px; padding-bottom:10px; padding-left:20px; } |
スタイルシートへの参照のため、base.htmlに以下の追記します。
|
1 |
<link rel="stylesheet" href="{{url_for('static', filename='style.css')}}"> |
ページを読み込み直すと以下のようになります。もし更新されない場合は「Ctrl+F5」でリロードを行います。
・スタイルシート反映前
・スタイルシート反映後
以上です。