PythonのWebフレームワークであるFlaskでCSSを活用する方法について解説します。
FlaskとCSS
FlaskはPythonで書かれた軽量なWebフレームワークで、小規模から中規模のWebアプリケーション開発に適しています。一方、CSSはWebページのスタイルを制御するための言語で、HTMLと組み合わせて使われます。
FlaskでCSSを使うためには、特定のディレクトリ構造とファイル配置が必要です。
/
└ app.py
└ templates
└ index.html
└ static
└ css
└ style.css
この構造では、app.py
がFlaskアプリケーションのメインファイル、templates
ディレクトリがHTMLファイルを格納する場所、そしてstatic
ディレクトリがCSSやJavaScriptなどの静的ファイルを格納する場所となります。
CSSの適用
CSSを適用するためには、HTMLファイルからCSSファイルを読み込む必要があります。以下に、index.html
からstyle.css
を読み込む例を示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>My Flask App</title>
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<h1>Welcome to My Flask App</h1>
</body>
</html>
この例では、<link>
タグを使ってstyle.css
を読み込んでいます。href
属性の値/static/css/style.css
は、style.css
へのパスを指定しています。
以上が、PythonのFlaskでCSSを活用する基本的な方法です。この知識を使って、Flaskで作成したWebアプリケーションの見た目を自由にカスタマイズしてみてください。.