【Webアプリ開発入門 #3】FlaskアプリにCSSを適用！Webサイトの見た目を整えよう

こんにちは、Tech Samuraiです！
前回の記事「【Webアプリ開発入門 #2】FlaskでWebフォーム作成！」では、ユーザーからの入力を受け取って計算結果を返す、完全に機能するWebアプリケーションを構築しましたね。

私たちのアプリは賢く動作しますが、正直に言うと、見た目は少し…寂しいですよね。デフォルトのままでは、まるで骨格標本のようです。今回の冒険の目的は、この骨格に肉付けをし、美しい服を着せるための技術、**CSS（カスケーディング・スタイル・シート）**を学ぶことです。

HTMLがウェブページの「骨格」なら、**CSSは「服やメイク」**です。CSSを適用することで、あなたのWebアプリは、単なるツールから、ユーザーが使いたくなるような魅力的でプロフェッショナルなサービスへと生まれ変わります。さあ、デザインの力で、私たちのアプリを完成させましょう！

ステップ1：FlaskとCSSの連携方法 – `static`フォルダ

まず、FlaskプロジェクトでCSSファイルをどこに置けばよいかを学びます。Flaskには、CSSや画像、JavaScriptファイルといった「静的ファイル」を配置するための、お決まりの場所があります。

プロジェクトのルートフォルダ（`app.py`があるのと同じ階層）に、`static`という名前の新しいフォルダを作成してください。
その`static`フォルダの中に、`style.css`という名前で新しいファイルを作成します。

プロジェクトのフォルダ構成：

my_flask_app/
├── app.py         (FlaskのPythonコード)
├── static/        (CSSや画像などを置く場所)
│   └── style.css  (今回作成するCSSファイル)
└── templates/     (HTMLファイルを置く場所)
    └── index.html

Flaskは、`static`という名前のフォルダを特別扱いし、この中のファイルにWebブラウザからアクセスできるようにしてくれます。

ステップ2：HTMLからCSSファイルを読み込む

次に、`index.html`ファイルに「このCSSファイルを使ってデザインを適用してください」と指示を書き加えます。`templates/index.html`の“セクションを以下のように修正してください。

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;材料重量計算ツール&lt;/title&gt;
    &lt;!-- ▼▼▼ この1行を追加 ▼▼▼ --&gt;
    &lt;link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"&gt;
&lt;/head&gt;

【重要ポイント：`url_for()`】
`{{ url_for(‘static’, filename=’style.css’) }}`という見慣れないコードが出てきました。これはFlaskのテンプレート機能（Jinja2）の特別な命令で、「**`static`フォルダにある`style.css`ファイルへの正しいURLを、ここに自動で生成してください**」という意味です。これを使うことで、将来サイトのURL構造が変わっても、自動で正しいパスに追従してくれるようになります。

ステップ3：CSSでデザインを記述する

いよいよデザインの心臓部、`static/style.css`ファイルの中身を書いていきます。以下のコードを`style.css`に貼り付けてください。各ブロックがどの部分のデザインを担当しているか、コメントを参考にしてください。

/* --- ページ全体の基本設定 --- */
body {
    font-family: sans-serif; /* 見やすいフォントを指定 */
    background-color: #f0f2f5; /* 薄いグレーの背景色 */
    color: #333; /* 基本の文字色 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

/* --- アプリ全体を囲むカード --- */
.container {
    background-color: white;
    padding: 30px 40px;
    border-radius: 10px; /* 角を丸くする */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 影をつけて立体感を出す */
    width: 400px;
    text-align: center;
}

/* --- 見出しのスタイル --- */
h1, h2 {
    color: #1a73e8; /* ブランドカラーのような青色 */
}

/* --- フォーム部品のスタイル --- */
select, input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

/* --- 計算ボタンのスタイル --- */
input[type="submit"] {
    width: 100%;
    padding: 12px;
    background-color: #1a73e8; /* 見出しと同じ青色 */
    color: white;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer; /* マウスを乗せると指マークになる */
    transition: background-color 0.3s; /* 色が変わる際のアニメーション */
}

input[type="submit"]:hover {
    background-color: #155ab3; /* マウスを乗せた時に少し暗くする */
}

/* --- 結果表示部分のスタイル --- */
.result-area {
    margin-top: 20px;
    padding: 15px;
    background-color: #e8f0fe; /* 薄い青色の背景 */
    border-left: 5px solid #1a73e8;
    text-align: left;
}

.result-text {
    font-size: 20px;
    font-weight: bold;
    color: #155ab3;
}

ステップ4：HTML構造を最終調整

CSSが正しく適用されるように、`templates/index.html`に少しだけ手直しを加えます。全体を`

`で囲み、結果表示部分にもクラス名を付けます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>材料重量計算ツール</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <div class="container">
        <h1>材料重量計算ツール</h1>
        
        <form action="/" method="post">
            <p>
                <select name="material" id="material">
                    <option value="aluminum">アルミ</option>
                    <option value="iron">鉄</option>
                    <option value="stainless">ステンレス</option>
                </select>
            </p>
            <p>
                <input type="text" name="volume" id="volume" placeholder="体積を入力 (cm³)">
            </p>
            <p>
                <input type="submit" value="計算する">
            </p>
        </form>

        {% if result %}
        <div class="result-area">
            <h2>計算結果</h2>
            <p class="result-text">
                {{ result }}
            </p>
        </div>
        {% endif %}
    </div>
</body>
</html>