タイトル: 静的ファイルの読み込み
SEOタイトル: djangoテンプレートでcssやjavascriptの静的ファイルを読み込む方法
この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<thead>
<tr><th style="background-color:#f39c12;color:#ffffff;text-align:left">この記事の要点</th></tr>
</thead>
<tbody>
<tr>
<td style="background-color:#fef9e7">
<ul>
<li>Django の<strong>静的ファイル (static)</strong> をプロジェクト単位で読み込む設定</li>
<li><code>settings.py</code>: <strong><code>STATIC_URL = '/static/'</code> + <code>STATICFILES_DIRS = [BASE_DIR / "static"]</code></strong></li>
<li>テンプレートで <code>{% load static %}</code> → <code>{% static 'css/app.css' %}</code> で参照</li>
<li>本番は <code>collectstatic</code> で <code>STATIC_ROOT</code> に集約</li>
</ul>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h2>setting.py</h2>
<p>setting.pyにて静的ファイルを読み込むURLと静的ファイルを格納するディレクトリを定義する。</p>
<p>以下の例ではURLはstatic始まり、ディレクトリはプロジェクト直下のstaticディレクトリを指定している。</p>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#f1c40f">STATIC_URL</span><span style="color:#ffffff"> = '/static/'</span></p>
<p><span style="color:#f1c40f">STATICFILES_DIRS</span><span style="color:#ffffff"> = (<br />
[<br />
os.path.join(BASE_DIR, "static"),<br />
]<br />
)</span></p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h2>静的ファイルの設置</h2>
<p>以下の様にプロジェクト直下にstaticディレクトリを作成して更にその中にcssおよびjsディレクトリを作成する。</p>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff">プロジェクト名/<br />
db.sqlite3<br />
manage.py</span></p>
<p><span style="color:#ffffff"> </span><span style="color:#2ecc71">プロジェクト名</span><span style="color:#ffffff">/<br />
__init__.py<br />
settings.py<br />
urls.py</span><br />
<span style="color:#ffffff"> wsgi.py</span></p>
<p><span style="color:#ffffff"> </span><span style="color:#2ecc71">アプリケーション名</span><span style="color:#ffffff">/<br />
__init__.py<br />
__pycache__/<br />
admin.py<br />
apps.py<br />
migrations/<br />
models.py</span><br />
<span style="color:#ffffff"> views.py</span></p>
<p><span style="color:#ffffff"> </span><span style="color:#f1c40f">static</span><span style="color:#ffffff">/<br />
css<br />
js</span><br />
</p>
</td>
</tr>
</tbody>
</table>
<p>cssおよびjsディレクトリの中に適当なファイルを設置する。（今回はtest.css, test.jsとする）</p>
<p> </p>
<h2>テンプレートの記述</h2>
<p>テンプレート側では以下のように記述することで静的ファイルを読み込むことが出来る。</p>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#f1c40f">{% load static %}</span></p>
<p><span style="color:#ffffff"><head><br />
<!-- CSS --><br />
</span><span style="color:#f1c40f"><link href="{% static 'css/test.css' %}" rel="stylesheet"></span></p>
<p><span style="color:#ffffff"> <!-- Javascript --><br />
</span><span style="color:#f1c40f"><script type="text/javascript" src="{% static 'js/test.js' %}"></script></span><br />
<span style="color:#ffffff"></head></span></p>
</td>
</tr>
</tbody>
</table>
<p> </p>