Zenn
🌏

Python、Django チュートリアル

に公開
Django
Python
チュートリアル
tech

今回は、Python の Django のチュートリアルを書こうと思います！
YouTube や Instagram などが使っているみたいで、拡張性や安定性がありそうなので、Django を使ってアプリを作ることにしました。
Django は、かなりややこしーので、なるたけシンプルにこだわりました。
ではでは、チュートリアルいきまっす！

ドキュメント: https://docs.djangoproject.com/ja/5.2/

今回やること

  1. 環境
  2. インストール
  3. プロジェクト作成
  4. アプリ作成
  5. テンプレート使用
  6. ブートストラップ適用（base.html 作成）
  7. CSS 適用、画像表示
  8. 管理画面使用
  9. 今回のプロジェクト

1. 環境

Windows10、VSCode、Django5.1.7

2. インストール

コマンド・プロンプト
pip install django

3. プロジェクト作成

django フォルダ作成。
そこでプロジェクトを作成します。

コマンド・プロンプト
django-admin startproject tutorial
cd tutorial
python manage.py runserver 8080

http://127.0.0.1:8080にアクセス（コマンド・プロンプトで Ctrl+C で停止）

4. アプリ作成

tutorial フォルダ内

コマンド・プロンプト
python manage.py startapp app

app フォルダが作成されます。

app/settings.py

  • INSTALLED_APPS のリストの末尾にアプリを追加
  • 言語とタイムゾーンを変更
settings.py
INSTALLED_APPS = [
    ...
    'app',
]
...
LANGUAGE_CODE = 'ja'

TIME_ZONE = 'Asia/Tokyo'
...

5. テンプレート使用

ビューを作成します（2025/7/2修正、ごめんなさい、忘れてました）

app/views.py
from django.shortcuts import render

def temp_test(request):
    return render(request, 'temp_test.html', context={})

パス指定します（2025/7/2修正、ごめんなさい、忘れてました）

tutorial/urls.py
from django.contrib import admin
from django.urls import path
from app import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('temp_test/', views.temp_test),
]

app/templates フォルダ作成
templates/temp_test.html 作成

temp_test.html
<h1>Temp Test!</h1>

http//localhost:8080/temp_testにアクセス。

6. ブートストラップ適用（base.html 作成）

スターター・テンプレート: https://getbootstrap.com/docs/5.0/getting-started/introduction/#starter-template
Django テンプレート言語: https://docs.djangoproject.com/ja/5.2/ref/templates/language/
templates/base.html 作成（ブートストラップのスターター・テンプレートを使用しています）

base.html
<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container">
      <h1>Hello, world!</h1>
      {% block content %}
      {% endblock %}
    </div>
    <!-- Optional JavaScript; choose one of the two! -->
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

templates/temp_test.html 変更

temp_test.html
{% extends 'base.html' %}
{% block content %}
<h1>Temp Test!</h1>
<img src="{% static 'fuji.jpg' %}" alt="fuji" width="30%">
{% endblock %}

{% extends 'base.html' %} で、base.html をベースにしたページになるイメージです。
で、base.html の {% block content %} と {% endblock %} の間に、temp_test.html の {% block content %} と {% endblock %} の間の内容が表示されます。
http://localhost:8080/temp_test/にアクセス。

7. CSS 適用、画像表示

STATIC_URL が 'static/' の場合は、最初にスラッシュ / を追加します。（2025/6/16追記）

tutorial/settings.py
...
STATIC_URL = '/static/'
...

app/static フォルダ作成
static/style.css 作成
static/fuji.jpg 設置

style.css
body {
  background-color:#333;
}
h1 {
  color: lime;
}
base.html
...
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">

    <title>Hello, world!</title>
...
temp_test.html
{% extends 'base.html' %}
{% load static %}
{% block content %}
<h1>Temp Test!</h1>
<img src="{% static 'fuji.jpg' %}" alt="fuji" width="30%">
{% endblock %}

http://localhost:8080/temp_test/にアクセス。

8. 管理画面使用

コマンド・プロンプト
python manage.py migrate
python manage.py createsuperuser
python manage.py runserver 8080

http://localhost:8080/adminにアクセス。（ダークモードの影響あるかもです）

ユーザー名とパスワードを入力してログイン。（ダークモードの影響あるかもです）

9. 今回のプロジェクト

GitHub: https://github.com/Animalyzm/mikoto_project
今回のプロジェクトは、django/tutorial です。

以上になります、ありがとうございましたー♪

Discussion