Flask（Part.57）｜【注文画面のスマホ用の表示】｜プログラミング学習おすすめ書籍情報発信パソコン初心者エンジニア希望者新人エンジニア IT業界への就職・転職希望者サポートサイト Programming learning Recommended schools Recommended books Information dissemination Computer beginners Prospective engineers New engineers Prospective job seekers in the IT industry Support site

python｜まとめ　| 現役エンジニア&プログラミングスクール講師「python」のまとめページです。pythonに関して抑えておきたい知識や文法やにについて記事をまとめています。まとめページの下部には「おすすめの学習書籍」「おすすめのITスクール情報」「おすすめ求人サイト」について情報を掲載中...

目標
横幅414pxでの調整
- feature-ordersapp-visualブランチ
- ordersappアプリケーションのプログラミング
ブックマークのすすめ

目標

注文画面のスマホ用の表示をカスタマイズする。

横幅414pxでの調整

今回の見た目の調整はスマートフォンの横幅が414px以下の端末に対して行います。調整にはChromeのデベロッパーツールなども利用して行うのが通常で、この記事執筆時にも利用していますが、こちらの利用方法については解説としては扱っていません。機会があれば、別の記事で触れたいと思います。

feature-ordersapp-visualブランチ

ここでは、注文管理アプリケーションのスマートフォンでの見た目を調整するのでブランチの名前を「feature-ordersapp-visualブランチ」とします。次のコマンドで「feature-ordersapp-visualブランチ」を作成します。

git checkout -b feature-ordersapp-visual コマンド

ordersappアプリケーションのプログラミング

order_base.htmlの編集（ordersapp/templates内）

order_base.htmlファイルを次のように編集します。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>
        {% block title %}
        {% endblock %}
    </title>
    <link rel="stylesheet" href="{{ url_for('orders.static', filename='css/style.css') }}">
</head>

<body>

    <header>
        {% block header %}
        <!-- 個別ページのヘッダーがここに入る -->
        {% endblock %}
    </header>

    <main>
        {% block content %}
        <!-- 個別ページのコンテンツがここに入る -->
        {% endblock %}
    </main>

    <footer>
        <p>© 2025 howahowa store</p>
    </footer>
</body>

</html>

order_cart.htmlの編集（ordersapp/templates内）

order_cart.html を次のように編集します。

{% extends 'order_base.html' %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="total-amount">
    <strong>注文予定の商品合計金額<br>¥{{ total_amount | int }}（税抜）</strong>
</div>

<div class="cart-container">
    <h3>カートの内容</h3>
    <ul class="cart-items">
        {% for item in cart %}
        <li class="cart-list">
            <div class="cart-info">
                <img src="{{ url_for('products.static', filename=item.product_image) }}" alt="{{ item.product_name }}">
            </div>
            <div>
                <span>{{ item.product_name }} x {{ item.quantity }} <br> (¥{{ item.total | int }})</span>
            </div>
            <div class="button-container">
                <!-- 数量変更フォーム -->
                <form action="{{ url_for('orders.update_quantity', table_id=table.id, product_id=item.product_id) }}"
                    method="POST" class="quantity-form">
                    <input type="number" name="quantity" value="{{ item.quantity }}" min="1" max="20" required>
                    <button type="submit">変更</button>
                </form>

                <!-- 削除フォーム -->
                <form action="{{ url_for('orders.remove_item', table_id=table.id, product_id=item.product_id) }}"
                    method="POST" class="remove-form">
                    <button type="submit">削除</button>
                </form>
            </div>
        </li>
        {% endfor %}
    </ul>
</div>

<!-- 注文確定ボタン -->
<form method="POST">
    <button type="submit" class="confirm-button">注文確定</button>
</form>
<!-- 戻るボタン -->
<form action="{{ url_for('orders.order_menu', table_id=table.id) }}" method="GET">
    <button type="submit" class="cancel-button">メニューに戻る</button>
</form>
{% endblock %}