タイトル: 静的(static)ファイルの置き場所と読み込み(画像、css、js )
SEOタイトル: djangoにおける静的(static)ファイルの置き場所と読み込み(画像、css、js )
この本文には実行可能なタグ等が含まれるため、安全のため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>配置: <strong><code>アプリ名/static/アプリ名/</code></strong> 配下に CSS / JS / 画像</li>
<li>なぜ「アプリ名フォルダ」を入れる: <strong>collectstatic 時の URL 一意性</strong>のための慣例</li>
<li>プロジェクト単位の方法は <a href="/article/21170">こちら</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p>※アプリ単位で静的ディレクトリを作成するか、プロジェクト単位で作成するかの選択肢がある。</p>
<p>本稿ではアプリ単位でのディレクトリ作成方法を記述する。</p>
<p>プロジェクト単位で作る方法は<a href="https://jpn.itlibra.com/article?id=21170">こちら</a>を参照</p>
<p> </p>
<h2>静的ファイル(画像、css、js )を格納するディレクトリ作成</h2>
<p>アプリケーションフォルダ直下に <span style="color:#e74c3c"><strong>static</strong></span> フォルダを作成し、さらに <strong>static</strong> フォルダ 直下に <span style="color:#e74c3c"><strong>アプリケーション名フォルダ</strong></span>を作成する。(staticファイルへアクセスする際のURLを一意にするためのお作法)</p>
<p>以下、アプリケーション名がapp1の場合の例</p>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff">app1</span></p>
<p><span style="color:#ffffff"> -- </span><span style="color:#f1c40f">static</span></p>
<p><span style="color:#ffffff"> -- app1</span></p>
<p><span style="color:#ffffff"> -- css</span></p>
<p><span style="color:#ffffff"> -- js</span></p>
<p><span style="color:#ffffff"> -- img</span></p>
</td>
</tr>
</tbody>
</table>
<p>css, js, imgフォルダを作成してその配下にそれぞれのファイルを格納する。</p>
<p>以下のURLで静的ファイルにアクセスすることができる。</p>
<p>「localhost<span style="color:#e74c3c">/static/app1/css/sample.css</span>」</p>
<p> </p>
<h2>テンプレートからの読み込み</h2>
<p>テンプレート(htmlファイル)から静的ファイルを読み込む場合は以下のように指定する。</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"><link rel="stylesheet" href="</span><span style="color:#f1c40f">{% static 'app1/css/sample.css' %}</span><span style="color:#ffffff">" /></span></p>
</td>
</tr>
</tbody>
</table>
<p> </p>