ここからは、ListViewの見た目を整えていきましょう。
Djangoでは、ブロックという機能があります。
これは、htmlに表示されるパーツ毎に情報を保存し、パーツを組み合わせることによって、htmlがまとめられたコード簡単に使えるようにすることができる機能です。
ブログをイメージするとわかりやすいかもしれません。
ブログの場合、以下の図のように、4つのブロックでサイトができていることが多いです。
base.htmlファイル
この時、一つ一つのページに対してヘッダーの情報やフッターの情報を書くのは手間がかかります。
さらに、100個の記事を書いていた場合においてヘッダーの情報が変わったら（titleタグの名前を変更した場合などは）、すべてのファイルの中身を書きかえなければいけません。
そのような手間をさけるために使われるのがブロックです。
これは、ブロックでサイトのレイアウトをあらかじめ決めたhtmlファイルを作り、そのファイルをひな型として、変更したい部分だけをそれぞれのhtmlファイルで編集していく、というイメージです。
Todoのブロック構成
今回は、このような構成にしていきます。
ヘッダーとコンテンツの2つのブロックに分け、リストや詳細ページなど、それぞれのページに対して表示する内容を変えるような設定をしていきます。
まずはブロックのベースを作る
個別のページの作りこみの前に、まずはベースのファイルを作っていきましょう。
ベースのファイルは、個別のページ（todolist.htmlなど）と同じ場所に作ります。
コマンドライン-BASE/templates
$ touch base.html
さっそく編集をしていきましょう。
コード<html>
<head>
<title>ToDoリスト</title>
<body>
<header>
<div class='header'>
{% block header %}
{% endblock header %}
</div>
</header>
<div class='main'>
{% block content %}
{% endblock content %}
</div>
</bocy>
</html>
htmlファイルの中で、blockとendblockで囲まれた部分が二か所あります。
このように書くことで、ベースのファイルを作ることができます。
これから個別のファイルを作っていきますが、個別のファイルでも同じようにblockとendblockを作り、その間にコードを書いていくことで、ベースファイルを生かしつつ、それぞれのブロックの中に個別のコードを書いていくことができるようになります。
list.htmlファイルの作成
実際に個別のファイルを作っていきましょう。
コード-BASE/templates/list.html
1 {% extends 'base.html' %}
2 {% block header %}
3 <h1>Todoリスト一覧<h1>
4 {% endblock header %}
5 {% block content %}
6 {% for list in object_list %}
7 <p>{list.title}</p>
8 {% endfor %}
9 {%endblock content %}
コードの解説(1) 1行目で、extendsを使っています。extendsには「拡大する、解釈を広げる」といった意味があります。
つまり、base.htmlの内容をもとにしながら、さらにその内容を広げていく、というイメージを持つとわかりやすいかもしれません。
具体的には、base.htmlで書いた「headerブロック」の中にlist.htmlで書いたheaderブロックの中身が入り、base.htmlで書いた「contentブロック」の中にlist.htmlで書いたブロックの中身が入ります。
(2) 2～4行目でheaderブロックと具体的な中身が書かれています。ですので、base.htmlの「block header」「endblodck」で囲まれた部分の中には、3行目で書かれたコードが入ります。
(3) ListViewでは、object_listでリストのデータを扱うことができます。そして、for文を使って個別のデータをlistに格納していきます。
migrationをして、サーバーを立ち上げてみましょう。
（サーバーを立ち上げる前に、管理画面でいくつかtodoの投稿をしてみましょう。）
コマンドラインBASE
$ python manage.py makemigrations
$ python manage.py migrate
$ python manage.py runserver
つぎに、localhost:8000/listにアクセスしてみましょう。
上部にタイトル（ToDoリスト）が表示されていること、Todoリスト一覧が表示されていること、そして、個別のTodoのタイトルがしっかりと表示されていることを確認しましょう。
これでブロックを使ってhtmlの表示を整えることができました。
ここから見た目を美しくしていくにはCSSファイルを編集していく必要がありますが、djangoでのCSSファイルの扱いについては、cssファイルの扱い方（staticの使い方）という記事を参考にしてください。
次からは、Todoの詳細画面や編集画面などの作りこみをしていきましょう。
