ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！
| この記事の要点 |
|
Django テンプレートとは
Django テンプレートは、HTML と テンプレート構文を混在させて、動的な HTML を組み立てる仕組みです。プログラマでなくてもデザイナが触れるよう、Python の構文ではなく独自の DSL を採用しています。
配置と呼び出し
myapp/
├── views.py
├── models.py
└── templates/
└── myapp/
├── base.html
├── index.html
└── detail.html# myapp/views.py
from django.shortcuts import render
def index(request):
context = {
"title": "記事一覧",
"articles": Article.objects.all(),
"user_name": "taro",
}
return render(request, "myapp/index.html", context)変数・フィルタ・タグの 3 構文
{# 1. 変数 #}
<h1>{{ title }}</h1>
<p>こんにちは、{{ user_name }} さん</p>
{# 2. フィルタ #}
<p>{{ name|upper }}</p> {# 大文字 #}
<p>{{ body|truncatechars:50 }}</p> {# 50 文字で切る #}
<p>{{ price|floatformat:2 }}</p> {# 小数 2 桁 #}
<p>{{ created_at|date:"Y-m-d H:i" }}</p> {# 日付フォーマット #}
<p>{{ html|safe }}</p> {# エスケープ無効 (安全な場合のみ) #}
<p>{{ var|default:"未設定" }}</p> {# null/空のときの代替値 #}
{# 3. タグ #}
{% if articles %}
<ul>
{% for a in articles %}
<li>{{ a.title }}</li>
{% endfor %}
</ul>
{% else %}
<p>記事はありません</p>
{% endif %}主要フィルタ一覧
| フィルタ | 用途 | 例 |
|---|---|---|
upper / lower | 大文字/小文字 | {{ s|upper }} |
title | 各単語の頭文字を大文字 | {{ s|title }} |
length | 長さ | {{ list|length }} |
truncatechars:N | N 文字で切る | {{ s|truncatechars:50 }} |
date:"Y-m-d" | 日付フォーマット | {{ dt|date:"Y-m-d" }} |
floatformat:N | 小数点 N 桁 | {{ p|floatformat:2 }} |
default:"-" | null/空時の代替 | {{ v|default:"-" }} |
safe | HTML エスケープを無効化 | {{ html|safe }} |
escape | HTML エスケープ | {{ s|escape }} |
linebreaks | 改行を <br> / <p> に | {{ s|linebreaks }} |
add:N | 加算 | {{ n|add:1 }} |
join:"," | 配列を結合 | {{ list|join:"," }} |
主要タグ一覧
{# for ループ #}
{% for a in articles %}
{{ forloop.counter }}: {{ a.title }}
{% empty %}
記事なし
{% endfor %}
{# if #}
{% if user.is_authenticated %}
ようこそ {{ user.username }} さん
{% elif user.is_anonymous %}
ゲストです
{% else %}
不明
{% endif %}
{# URL 逆引き #}
<a href="{% url 'myapp:detail' article.id %}">詳細</a>
{# static ファイル #}
{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<img src="{% static 'img/logo.png' %}" alt="ロゴ">
{# パーシャル取り込み #}
{% include "myapp/_card.html" with article=a %}
{# コメント #}
{# 一行コメント #}
{% comment %}
ブロックコメント
複数行
{% endcomment %}
{# CSRF トークン (フォーム必須) #}
<form method="post">
{% csrf_token %}
...
</form>
{# 変数定義 #}
{% with total=cart.items|length %}
カート: {{ total }} 件
{% endwith %}テンプレート継承 (extends + block)
レイアウト共通化の必須テクニックです。
{# templates/base.html #}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>{% block title %}サイト名{% endblock %}</title>
{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">
{% block extra_css %}{% endblock %}
</head>
<body>
<header>{% include "_nav.html" %}</header>
<main>
{% block content %}{% endblock %}
</main>
<footer>© 2026</footer>
{% block extra_js %}{% endblock %}
</body>
</html>{# templates/myapp/index.html #}
{% extends "base.html" %}
{% load static %}
{% block title %}記事一覧 | {{ block.super }}{% endblock %}
{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/article.css' %}">
{% endblock %}
{% block content %}
<h1>記事一覧</h1>
<ul>
{% for a in articles %}
<li><a href="{% url 'myapp:detail' a.id %}">{{ a.title }}</a></li>
{% endfor %}
</ul>
{% endblock %}カスタムタグ / カスタムフィルタ
# myapp/templatetags/myfilters.py
from django import template
register = template.Library()
@register.filter
def yen(value):
"""1234 → ¥1,234"""
return f"¥{value:,}"
@register.simple_tag
def current_year():
from datetime import date
return date.today().year
@register.inclusion_tag("myapp/_card.html")
def article_card(article):
return {"article": article}{# 利用側 #}
{% load myfilters %}
<p>{{ price|yen }}</p> {# ¥1,234 #}
<p>© {% current_year %} 会社名</p>
{% article_card a %}セキュリティ — エスケープ
Django テンプレートはデフォルトで HTML エスケープします:
{# context: {"user_input": ""} #}
{{ user_input }}
{# → <script>alert(1)</script> に変換され安全 #}
{{ user_input|safe }}
{# → そのまま
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！
子ページ
同階層のページ
- ビュー(View)
- テンプレート(Template)
- モデル(Model)
- ルーティングの作成
- viewからtemplateへの遷移方法