ビジネスパーソン・ガジェット置場 empty lot for business

営業や仕事、それに伴う生活を便利に楽にするツール、ガジェットを作ります。既にあるツールも自分用にカスタマイズ。

python: Flaskアプリの作成④ 独自のCSSを使用する方法

備忘録です。

FlaskのアプリはBootstrapでサクッとCSSを使用するのがいいと思うのですが、細かいところでちょっとだけ自分色にしたい時に自分独自の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>

 

h1の文字サイズをやや大きくし、全体の背景をグレイにしてカードが見やすいようになりました。

css編集

ちょっとしたカスタマイズに使えます。