Djangoでポートフォリオをつくる③ TemplatesとStaticsの設定
前回の記事では、Djangoプロジェクトの作成と初期設定について解説しました。今回は、HTMLファイルを格納するTemplatesフォルダと、CSSや画像など静的ファイルを格納するStaticsの設定方法を紹介します。また、本記事ではベースとなるHTMLなどのサンプルを紹介します。
🔍 目次
-
本記事の内容
-
TemplatesおよびStaticsの設定
-
HTMLとCSSの記述
① 本記事の内容
この記事では、Djangoプロジェクトにおけるテンプレートと静的ファイルの設定方法について説明します。具体的には、以下の内容をカバーします。
-
Templatesフォルダの設定
-
Staticsフォルダの設定
-
ベースとなるHTMLファイルの作成
-
CSSファイルの作成
② TemplatesおよびStaticsの設定
ディレクトリ構造
HTMLはtemplatesディレクトリ内で、CSSや画像、JavaScriptなどの静的ファイルはstaticディレクトリ内に格納します。本記事では、templatesフォルダはプロジェクト内に、staticフォルダはアプリフォルダ内に作成します。
my_project/
manage.py
my_project/
__init__.py
asgi.py
settings.py
urls.py
wsgi.py
testapp/
migrations/
__init__.py
static/
images/
image1.png
image2.png
css/
reset.css
style.css
__init__.py
admin.py
apps.py
models.py
tests.py
views.py
urls.py
templates/
testapp_base.htmlsettings.pyの設定
Templatesの設定
templatesフォルダを認識させるために、56行目付近のTEMPLATESのDIRSを以下のように変更します。
TEMPLATES = [
{
"BACKEND": "django.template.backends.django.DjangoTemplates",
"DIRS": [BASE_DIR / "templates"],
...
},
]Staticsの設定
staticフォルダを認識させるために、120行目付近で以下の設定を行います。
STATIC_URL = "static/"
STATICFILES_DIRS = [
BASE_DIR / "testapp" / "static",
BASE_DIR / "testapp2" / "static",
]BASE_DIRの設定
補足ですが、ここでBASE_DIRという文字列が複数回登場しています。15行目でBASE_DIRは以下のように設定されています。
BASE_DIR = Path(__file__).resolve().parent.parentPath(__file__).resolve()はsettings.pyを指しており、それの親（設定フォルダ）の親＝プロジェクトフォルダが指定されていることを表しています。つまり、BASE_DIRはプロジェクトフォルダを指しています。
これで初期設定は完了しました。
③ HTMLとCSSを書いていく
HTMLの記述
Webアプリでは通常、複数のページを移動しながら機能します。そのため、1つのアプリでも複数のHTMLファイルを作成する必要があります。
💡 DjangoではベースのHTMLで共通部分を作成する
はじめにベースとなるHTMLを作成します。ヘッダー、フッターやナビゲーションバーなどすべてのページで共通する部分を作成することで、複数のページで何度も記述する必要がなくなります。
それでは、ベースのHTMLを作成していきましょう。templatesディレクトリ内にtestapp_base.htmlを作成してください。本記事では、以下のHTMLを記述しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
{% block title %}
Title
{% endblock title %}
</title>
<meta name="description" content="Your description here" />
<meta name="keywords" content="keyword1, keyword2, keyword3" />
{% load static %}
<link rel="stylesheet" href="{% static 'css/base.css' %}" />
</head>
<body>
<nav class="nav">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">News</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Access</a>
</li>
<li>
<a href="#">Blog</a>
</li>
</ul>
</nav>
<div class="main-container">
{% block content %}
{% endblock content %}
</div>
<footer class="footer">
<ul class="md-flex">
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">サイトマップ</a>
</li>
<li>
<a href="#">プライバシーポリシー</a>
</li>
</ul>
<p class="copyright">© 2023 Example Inc. All Rights Reserved.</p>
</footer>
</body>
</html>Django特有の記述について
-
{% block title %}
-
テンプレートの継承を利用するためのタグです。このタグを使うことで、子テンプレートがこのブロックを上書きして独自のタイトルを設定できます。
-
-
{% load static %}
-
Djangoのテンプレートタグをロードするためのタグです。これにより、
{% static 'path/to/file' %}のように静的ファイルへのパスを簡単に指定できます。
-
-
<link rel="stylesheet" href="{% static 'css/reset.css' %}" />-
静的ファイル（ここではCSSファイル）をテンプレートに読み込むためのものです。
-
CSSの記述
以下のCSSをstatic/cssディレクトリ内にbase.cssとして保存してください。
/* 全体の設定 */
body {
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
"Hiragino Sans", Meiryo, sans-serif;
background-color: #e5e5e5;
}
ul {
list-style: none;
}
a {
color: #999;
text-decoration: none;
}
/* navigation bar */
nav ul {
display: table;
margin: 0 auto;
padding: 10px 0;
width: 80%;
text-align: center;
}
nav li {
display: table-cell;
min-width: 50px;
}
nav a {
display: block;
width: 100%;
text-decoration: none;
color: #555;
padding-bottom: 5px;
}
nav li:hover {
color: #93e8ff;
border-bottom: 3px solid #8cfdff;
}
/* footer */
.footer {
padding: 2rem;
font-size: 15px;
color: #999;
background: #fff;
border-top: 1px solid #e5e7eb;
position: absolute;
bottom: 0;
width: 100%;
}
.footer a:hover {
color: #000;
}以上がTemplatesとStaticsの設定および基本的な記述方法です。引き続き、ポートフォリオ開発を進めていきましょう！
