FLASKでHTMLを表示させる

概要


FLASKでHTMLを表示させるには.pyファイルの中にhtml文章を書いて
returnでその内容を返せばいい。

結果(コードは後述)



URL　http://localhost:5000/

で、赤文字で

これが本文h1です！

と表示される

pythonファイル

HTMLファイル


#fTest01.py(pythonファイル)の内容
#（都合によりここにpythonファイルの内容を書く）
from flask import Flask

app = Flask(__name__)

@app.route('/html_sentence')
def html_sentence():
    html = '''
    <!DOCTYPE html>
    <html lang="ja">
      <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="/static/default.css">
        <title></title>
      </head>
      <body>
      <h1>これが本文h1です！</h1>
      </body>
    </html>
    '''
    return html

CSSファイル


#static/default.cssの内容
h1 {
  color: red;
}

説明


ただしこれでは書きにくいので、通常は別にhtmlファイルを用意し、
その中を部分的に置き換える、ということをやる。

間違えやすい問題


上のhtmlの中で、cssを呼び出すときに
<link rel="stylesheet" href="/static/default.css">

と書いてある。pythonファイルと同じ階層に「static」というフォルダを作り、
その中にdefault.cssというCSSファイルを作っている。

この時のフォルダ名は「static」と決まっており、ほかの名前ではCSSはうまく機能しない

たとえばhtmlのCSS呼び出しを
<link rel="stylesheet" href="/mycss/default.css">

などとし、CSSファイルを入れるフォルダ名を「mycss」とした場合、
このCSSファイルは機能しない。
必ず「static」というフォルダ名でないといけないのがFLASKの決まりごと。