{}const=>[]async()letfn</>var
Python開発

Flask + HTML / CSS:Pythonで最も単純なWebサイトを作成する

Flask、HTML、CSSを使用して最もシンプルなウェブサイトを作成する方法を学びましょう。思っているより簡単です!

К

Kodik

著者

1分で読める

私たちの Telegramコミュニティ 最近、次のような質問が出されました。 PythonをHTMLとCSSにリンクして、実際のウェブサイトを作成するにはどうすればよいですか?
答えは簡単です。 Flask、最も人気のあるマイクロフレームワークの1つ。この記事は、Pythonを使用してサイトを作成するための最初のステップです。インストールから起動まで、すべての説明と例を使用します。

🐍 Flaskを選ぶ理由

Flaskは、Webアプリケーションを作成するためのミニマリストフレームワークです。その利点は次のとおりです。

  • ✅ 簡単なスタート

  • ✅ シンプルなアーキテクチャ

  • ✅ HTMLテンプレートのサポート(Jinja2)

  • ✅ 柔軟性 — プロジェクトの構築方法を自分で決める

🔥 10万人以上の学生が参加中

理論を読むのに疲れた?
コーディングの時間だ!

Kodik — 実践でプログラミングを学ぶアプリ。AIメンター、インタラクティブなレッスン、実際のプロジェクト。

🤖 AI 24時間
🎓 修了証
💰 無料
🚀 始める
今日参加

⚙️ 何をインストールする必要がありますか?

開始する前に、Python 3.7 以降がインストールされていることを確認してください。

pip install flask

インストールの確認:

python -c "import flask; print(flask.__version__)"

📁 プロジェクトの構造

my_website/
├── app.py
├── templates/
│   └── index.html
└── static/
    └── style.css

templates — HTMLの場合、 static — CSS、JS、および画像用。

🧠 ステップ1:Flaskアプリケーション(app.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("index.html")

if __name__ == "__main__":
    app.run(debug=True)

🖼ステップ2:HTMLテンプレート(templates/index.html

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Мой сайт на Flask</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
  <h1>Привет из Flask!</h1>
  <p>Это наш первый сайт на Python с HTML и CSS 🐍</p>
</body>
</html>

🎨ステップ3:CSSスタイル(static/style.css

body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #f5f5f5;
  color: #333;
  text-align: center;
  margin-top: 80px;
}

h1 {
  color: #0077cc;
  font-size: 36px;
}

p {
  font-size: 20px;
  color: #555;
}

🚀 プロジェクトを開始するにはどうすればよいですか?

  1. ターミナルを開き、プロジェクトフォルダに移動します。

  2. cd my_website

  3. サーバーを起動します。

  4. python app.py

  5. ブラウザに移動します。 http://127.0.0.1:5000

🔍 どのように関連しているのでしょうか?

コンポーネント

何をするか

Flask

ユーザーからのリクエストを受け付ける

HTMLテンプレート

ブラウザにページを返します

CSS

スタイルを与える

Python

ロジック、ルート、データを管理します

🧱 改善できる点は何ですか?

  • ➕ さらにルートを追加

  • 🧾 テンプレートにデータを送信する

  • 📄 Bootstrap または Tailwind を接続する

  • 🗃 フォームとデータベース操作を追加する

👀ミニライフハック

@app.route("/hello/<name>")
def hello(name):
    return f"<h2>Hello, {name}!</h2>"

これで、/hello/Кодикに切り替えると、🖐の挨拶が表示されます

もっと練習したいですか? コディックアプリ Python、HTML、その他のテクノロジーのコースがあります。タスクを実行し、ミニプロジェクトを実行し、他の開発者と通信します 私たちのTelegramコミュニティ。

💬フォーム、データベース、またはホスティングのデプロイメントの続きが必要な場合は、コメントに書いてください!

🎯先延ばしをやめよう

記事は気に入った?
実践の時間だ!

Kodikでは読むだけでなく、すぐにコードを書く。理論 + 実践 = 本当のスキル。

即座に実践
🧠AIがコードを説明
🏆修了証

登録不要 • カード不要