MENU
  1. ホーム
  2. プログラミング
  3. Python
  4. Django
  5. DjangoのstaticディレクトリでCSSとJSを扱う

DjangoのstaticディレクトリでCSSとJSを扱う

プログラミング Python Django
  • URLをコピーしました！

Flaskを使っているとCSSやJava Scriptはstaticというディレクトリに格納するだけ。それだけで読み込みが簡単なのですがDjangoはいろいろと設定が多くてめんどくさい印象です。

ということで，今回はCSSやJava ScriptをDjangoのアプリケーションで読み込むための設定を行っていきます。

目次

DjangoでCSSを読み込む

staticディレクトリの作成

まずは，CSSを格納するディレクトリの作成を行います。
ファイル構成を以下のようにします。manage.pyと同じ階層にstaticディレクトリを作成します。

myproject
     ├ myapp
     ├ manage.py
     ├ myproject
     ├ templates
     │    ├ xxx.html
     │    └ xxx.html
     └ static #ここにディレクトリを作成
          └ css #CSS用ディレクトリ
             └ style.css #CSSファイルを格納

今回はstatic/css/<cssファイル>とします。

setting.pyへ記述

プロジェクト配下のsetting.pyへ記述を行っていきます。

デフォルトでSTATIC_URL = '/static/'となっているのでこれは触らず，その下に以下を追記します。

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

先程作成したstaticディレクトリの場所を教えてあげるようなイメージです。

staticディレクトリにおける細かい設定については以下の記事が非常に参考になりました。

Django staticファイル まとめ

htmlからCSSを読み込む

読み込みたいCSSファイルをhtmlから読み込みます。

CSSを読み込むときは<link rel="stylesheet" href=....的なことを記述しますが，Djangoのstaticディレクトリから読み込むには少し記述が変わります。

{% load static %}

忘れてはいけない記述です。
CSSを読み込むhtmlファイルの先頭に{% load static %}と記述します。

もう一度言います。先頭に{% load static %}を記述します。

{% load static %}
<html>
 :
</html>

あの<link rel="xx" href="xx">の記述

あの有名なCSSの読み込み記述の

<link rel="stylesheet" href="xxx/xx.css">を若干Django流に変えていきます。

Django流に書き換えると以下のようになります。

<!-- 元の記述 -->
<link rel="stylesheet" href="/static/css/style.css">
<!-- Djangoの場合-->
 <link rel="stylesheet" href="{% static 'css/style.css' %}">

以上でstaticからCSSの読み込みが可能になります。

DjangoでJavaScriptを読み込む

staticディレクトリを利用

JavaScriptもCSSと同様にstaticディレクトリを使います。

ファイル構成を以下とします。

myproject
     ├ myapp
     ├ manage.py
     ├ myproject
     ├ templates
     │    ├ xxx.html
     │    └ xxx.html
     └ static #ここのディレクトリに格納
          ├ css
          │  └ style.css 
          └ js #JS用ディレクトリ
             └ app.js #JSファイルを用意

今回はstatic/js/<jsファイル>とします。

setting.pyへ記述

JSの場合もCSSのときと同様にsetting.pyに以下を記述していきます。

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

htmlからJSを読み込む

JSを読み込むときは<script src="xxx/xx.js">...的なことを記述しますが，Djangoのstaticディレクトリから読み込むには少し記述が変わります。

{% load static %}

CSSのときと同様に先頭にこの記述は必須です。

{% load static %}
<html>
 :
</html>

あの<script src="xxx/xx.js">の記述

あの有名なJSの読み込み記述の

<script src="xxx/xx.js"></script>を若干Django流に変えていきます。

記述は以下のようになります。

<!-- 元の記述 -->
<script src="/static/js/.appjs"></script>
<!-- Djangoの場合-->
<script src="{% static 'js/.appjs' %}"></script>

以上でstaticからJSの読み込みが可能になります。

　

CSSとJSを駆使してオシャレなWebアプリケーションを開発していきましょう。

　

Djangoについて学びたい方へ

書籍で学びたいなら

DjangoのWebアプリの設計・作成はもちろん、Webサーバー・アプリ周りの知識も幅広く扱ってくれています。データベースの知識、クラウドの知識、セキュリティの知識も同時に習得でき、初心者にはぜひおすすめの書籍

動かして学ぶ! Python Django開発入門 (購入)

Djangoについて深く知りたいという方におすすめしています。
ややプログラミングの知識がないと理解が難しいかもしれません。
pythonが書ける方には非常にタメになるDjangoアプリ開発におすすめ書籍でした。

現場で使える Django の教科書《基礎編》(購入)

オンライン授業で学びたいなら

僕はオンラインスクールはUdemy をおすすめします。定番の授業からマニアックな授業まで幅広く扱っているので、学びたいことは大体あります。

今回はPython+Djangoの授業をおすすめします。Djangoの基礎から応用までこの授業で学べます。
実際にWEBアプリを作成し、公開するところまで親切に教えてくれます。

動画はここから↓↓
【徹底的に解説！】Djangoの基礎をマスターして、3つのアプリを作ろう！

　

読んでおくべきおすすめ記事

あわせて読みたい
Djangoのインストールからプロジェクトの作成まで こんにちは，ちゆりです。 個人的にはpythonのフレームワークはFlaskを使うことが多く，自分の好みなのですが，「そろそろdjangoも覚えておくのもいいな。」と思ったの...
あわせて読みたい
DjangoでHTMLで作成したページを表示させるだけ。ただそれだけ こんにちは。ちゆりです。ええ。まだやってますよ。Django.飽きもせずDjangoを触っています。Flaskから乗り換えるために一通りの実装を行い備忘録として記事でまとめて...
プログラミング Python Django
Django Python Webアプリ プログラミング

この記事が気に入ったら
フォローしてね！

よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメント一覧 （1件）

【初心者向け】Djangoがjavascript, css などのstaticファイルを認識しないときの対策まとめ - BOT WORKS へ返信する コメントをキャンセル

目次