◀ 15.

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

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

ページの作成

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

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

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

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

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

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

プロジェクト単位で作る方法はこちらを参照

 

静的ファイル(画像、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' %}" />

 

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

ページの作成

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

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

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

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！
子ページ
子ページはありません
同階層のページ
  1. 環境構築とプロジェクト/アプリの作成
  2. MVC(MVT)のそれぞれの使い方と説明
  3. データベースへの接続と操作
  4. Django Administration
  5. git管理
  6. エラー一覧
  7. バージョンの確認方法
  8. ログ出力方法
  9. SQLのログ出力方法
  10. ログのローテート設定
  11. settings.pyの定数にアクセスする方法
  12. 本番環境へのインストールとアプリのデプロイ(apache編)
  13. 本番環境へのインストールとアプリのデプロイ(nginx編)
  14. djangoアプリの本番の開始URLを変更する
  15. 静的(static)ファイルの置き場所と読み込み(画像、css、js )
  16. CSRFトークンをAjaxで使用する方法
  17. ajaxの使用例(POST編)
  18. ファイルのアップロードとファイルの名前
  19. クイックスタート/チュートリアル
  20. ログイン機能
  21. テンプレート側のログイン判定
  22. ビュー側のログイン判定
  23. 管理者ユーザーの作成/判定と管理画面
  24. モデルのjson化とレスポンス
  25. runserverでポートを指定する方法
  26. cronによるバッチ実行
  27. テンプレートで利用する共通のcontextを定義する方法
  28. プログラムが本番サーバーで反映されない場合の対処法
  29. APIの作成
  30. cron用コマンド・ファイルの作成

人気ページ

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