FlaskでCSSファイルを読み込もう

/
└ app.py
└ templates
   └ index.html
└ static
   └ css
      └ style.css

次に、FlaskにCSSファイルを追加してみましょう。

今回は、Bootstrapを利用して、スタイリングしていきます。

まず最初に、Bootstrapのテンプレートをindex.htmlに反映します。

<!DOCTYPE html><html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrapの基本テンプレート</title>

<! -- ここがBootstrapのCDN -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css";; rel="stylesheet">
<!--[if lt IE 9]>
       <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>;;
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>;;
<![endif]-->
</head>
<body>
　　　<h1>Bootstrapの基本テンプレート</h1>
     
     <! -- ここがBootstrapのCDN -->
　　　<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js";></script>;
　　　<! -- ここがBootstrapのCDN -->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js";></script>;
</body>
</html>

次に、Bootstrap以外でスタイリングできるよう、CSSファイルを別に追加します。

Flaskを利用する際には、以下のファイル構成でCSSを設定します。

/
└ app.py
└ templates
   └ index.html
└ static
   └ css
      └ style.css

新しく、staticというフォルダを作成し、さらにその中にcssというフォルダを作成します。

その後、cssというフォルダの中に、style.cssという空のファイルを作成します。

今回は, index.htmlで作成したh1タグを赤色にすることで、cssファイルが反映されるかどうか見ていきましょう。

h1{
   color:red;
]

次に、CSSファイルをindex.htmlに読み込みます。

<!DOCTYPE html><html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrapの基本テンプレート</title>

<!-- ここがBootstrapのCDN -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css";; rel="stylesheet">
<!-- ここにstylesheetを追加 -->
<link rel="stylesheet" href="/static/css/style.css">
<!--[if lt IE 9]>
       <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>;;
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>;;
<![endif]-->
</head>
<body>
　　　<h1>Bootstrapの基本テンプレート</h1>
     
     <! -- ここがBootstrapのCDN -->
　　　<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js";></script>;
　　　<! -- ここがBootstrapのCDN -->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js";></script>;
</body>
</html>

最後に、再度サーバーをリスタートして、反映されるか確認します。

以下のように、h1タグの部分が赤色になっていれば、CSSが反映できたことになります。

次のレッスン：Flaskでフォーム送信部分を実装しよう
ノートをとる

メモが保存されました
メモ一覧を見る