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が反映できたことになります。