この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:2
ページ更新者:ぼうず
更新日時:2023-03-05 19:55:27

タイトル: 静的(static)ファイルの置き場所と読み込み(画像、css、js )
SEOタイトル: djangoにおける静的(static)ファイルの置き場所と読み込み(画像、css、js )

※アプリ単位で静的ディレクトリを作成するか、プロジェクト単位で作成するかの選択肢がある。

本稿ではアプリ単位でのディレクトリ作成方法を記述する。

プロジェクト単位で作る方法は以下を参照

https://jpn.itlibra.com/article?id=21170

 

静的ファイル(画像、css、js )を格納するディレクトリ作成

アプリケーションフォルダ直下に static フォルダを作成し、さらに static フォルダ 直下に アプリケーション名フォルダを作成する。(staticファイルへアクセスする際のURLを一意にするためのお作法)

以下、アプリケーション名がapp1の場合の例

app1

    -- static

        -- app1

            -- css

            -- js

            -- img

css, js, imgフォルダを作成してその配下にそれぞれのファイルを格納する。

以下のURLで静的ファイルにアクセスすることができる。

「localhost/static/app1/css/sample.css

 

テンプレートからの読み込み

テンプレート(htmlファイル)から静的ファイルを読み込む場合は以下のように指定する。

{% load static %}

<link rel="stylesheet" href="{% static 'app1/css/sample.css' %}" />