python: Flaskアプリの作成④　独自のCSSを使用する方法 - ビジネスパーソン・ガジェット置場　empty lot for business

備忘録です。

FlaskのアプリはBootstrapでサクッとCSSを使用するのがいいと思うのですが、細かいところでちょっとだけ自分色にしたい時に自分独自のCSSを作って使用する方法を記載しておきます。

独自のstyle.cssファイルを作成

その1　staticフォルダの作成

作業フォルダにstaticフォルダを作成します。

フォルダ
|_ static
　  |_ css
　  |_ js
　  |_ images
|_ templates
|_ virt 　#仮想環境フォルダ
|_ app.py

こんな感じの構成に。このstaticフォルダは中にcss、js、imagesフォルダを作成してそれぞれ利用できます。

その2　CSSフォルダの中にファイルを作成

cssフォルダの中にstyle.cssを作成します。例としてそのファイル内に下記のコードを追記します。

#style.css

h1 {
  color: darkblue;
  font-size: 45px;
}

body {
  background: #f4f4f4;
}

その3　base.html内にファイルへのリンクを作成

# base.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    # Bootstrap CSS 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    # 独自のCSS
　　　　　　　　<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css')}}">
    <title>やりたいこと管理</title>
  </head>