ラズパイデスクトップでFlask入門(9)Static Files

著者：國松亜紗子

公開日：2020/02/22

最終更新日：2020/02/22

カテゴリー：技術情報

タグ：Flask／Flask tutorial／Static Files

こんばんは。國松です。
今回はflaskrの見た目を少しよくしていきます。

参考サイト
Welcome to Flask (英語版)
Flaskへようこそ (日本語版)

認証ビューとテンプレートは機能しますが見た目がシンプル過ぎるのでHITMLにCSSを追加してちょっと見た目をよくしていきます。
元のスタイルは変更されないためテンプレートではなく静的ファイルです。

base.htmlテンプレートには既にstyle.cssファイルへのリンクがあります。
{{url_for（ ‘static’、filename = ‘style.css’）}}

flaskrディレクトリにstaticディレクトリを作成しその中にstyle.cssを作成していきます。

html { font-family: sans-serif; background: #eee; padding: 1rem; }
body { max-width: 960px; margin: 0 auto; background: white; }
h1 { font-family: serif; color: #377ba8; margin: 1rem 0; }
a { color: #377ba8; }
hr { border: none; border-top: 1px solid lightgray; }
nav { background: lightgray; display: flex; align-items: center; padding: 0 0.5rem; }
nav h1 { flex: auto; margin: 0; }
nav h1 a { text-decoration: none; padding: 0.25rem 0.5rem; }
nav ul  { display: flex; list-style: none; margin: 0; padding: 0; }
nav ul li a, nav ul li span, header .action { display: block; padding: 0.5rem; }
.content { padding: 0 1rem 1rem; }
.content > header { border-bottom: 1px solid lightgray; display: flex; align-items: flex-end; }
.content > header h1 { flex: auto; margin: 1rem 0 0.25rem 0; }
.flash { margin: 1em 0; padding: 1em; background: #cae6f6; border: 1px solid #377ba8; }
.post > header { display: flex; align-items: flex-end; font-size: 0.85em; }
.post > header > div:first-of-type { flex: auto; }
.post > header h1 { font-size: 1.5em; margin-bottom: 0; }
.post .about { color: slategray; font-style: italic; }
.post .body { white-space: pre-line; }
.content:last-child { margin-bottom: 0; }
.content form { margin: 1em 0; display: flex; flex-direction: column; }
.content label { font-weight: bold; margin-bottom: 0.5em; }
.content input, .content textarea { margin-bottom: 1em; }
.content textarea { min-height: 12em; resize: vertical; }
input.danger { color: #cc2f2e; }
input[type=submit] { align-self: start; min-width: 10em; }

html { font-family: sans-serif; background: #eee; padding: 1rem; }

body { max-width: 960px; margin: 0 auto; background: white; }

h1 { font-family: serif; color: #377ba8; margin: 1rem 0; }

a { color: #377ba8; }

hr { border: none; border-top: 1px solid lightgray; }

nav { background: lightgray; display: flex; align-items: center; padding: 0 0.5rem; }

nav h1 { flex: auto; margin: 0; }

nav h1 a { text-decoration: none; padding: 0.25rem 0.5rem; }

nav ul { display: flex; list-style: none; margin: 0; padding: 0; }

nav ul li a, nav ul li span, header .action { display: block; padding: 0.5rem; }

.content { padding: 0 1rem 1rem; }

.content > header { border-bottom: 1px solid lightgray; display: flex; align-items: flex-end; }

.content > header h1 { flex: auto; margin: 1rem 0 0.25rem 0; }

.flash { margin: 1em 0; padding: 1em; background: #cae6f6; border: 1px solid #377ba8; }

.post > header { display: flex; align-items: flex-end; font-size: 0.85em; }

.post > header > div:first-of-type { flex: auto; }

.post > header h1 { font-size: 1.5em; margin-bottom: 0; }

.post .about { color: slategray; font-style: italic; }

.post .body { white-space: pre-line; }

.content:last-child { margin-bottom: 0; }

.content form { margin: 1em 0; display: flex; flex-direction: column; }

.content label { font-weight: bold; margin-bottom: 0.5em; }

.content input, .content textarea { margin-bottom: 1em; }

.content textarea { min-height: 12em; resize: vertical; }

input.danger { color: #cc2f2e; }

input[type=submit] { align-self: start; min-width: 10em; }

cssファイルを保存出来たら127.0.0.1:5000/auth/loginにアクセスしてみてください。

以下の様に表示されればOKです。うまく表示されない場合はブラウザのキャッシュを削除してみてください。

少し見た目がよくなりました。registerも同様になっています。
今回はここまでにしたいと思います。