◀ 6.

djangoテンプレートでcssやjavascriptの静的ファイルを読み込む方法

▶
編集
ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！

setting.py

setting.pyにて静的ファイルを読み込むURLと静的ファイルを格納するディレクトリを定義する。

以下の例ではURLはstatic始まり、ディレクトリはプロジェクト直下のstaticディレクトリを指定している。

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    [
        os.path.join(BASE_DIR, "static"),
    ]
)

 

静的ファイルの設置

以下の様にプロジェクト直下にstaticディレクトリを作成して更にその中にcssおよびjsディレクトリを作成する。

プロジェクト名/
    db.sqlite3
    manage.py

    プロジェクト名/
        __init__.py
        settings.py
        urls.py
        wsgi.py

    アプリケーション名/
        __init__.py
        __pycache__/
        admin.py
        apps.py
        migrations/
        models.py
        views.py

    static/
        css
        js
 

cssおよびjsディレクトリの中に適当なファイルを設置する。（今回はtest.css, test.jsとする）

 

テンプレートの記述

テンプレート側では以下のように記述することで静的ファイルを読み込むことが出来る。

{% load static %}

<head>
        <!-- CSS -->
        <link href="{% static 'css/test.css' %}" rel="stylesheet">

        <!-- Javascript -->
        <script type="text/javascript" src="{% static 'js/test.js' %}"></script>
</head>

 

編集
ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！
子ページ
子ページはありません
同階層のページ
  1. Templateの使用準備
  2. Templateの定義方法
  3. テンプレートの作成と共通化
  4. setting.pyにおけるテンプレートの設定
  5. テンプレートの名前の重複について
  6. 静的ファイルの読み込み
  7. if文
  8. テンプレートで定数を使用する方法
  9. aタグのhrefの記載方法

人気ページ

最近更新/作成されたページ