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

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

ということで,今回はCSSJava 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サーバー・アプリ周りの知識も幅広く扱ってくれています。データベースの知識、クラウドの知識、セキュリティの知識も同時に習得でき、初心者にはぜひおすすめの書籍

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

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

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

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

 

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


ここでいきなりですが、ちゆりの

今週の買って良かった!!おすすめアイテム

夏になるから軽装で出かけれるようにとトートバックを探していたところ、
可愛くてシンプルおしゃれなトートバックを見つけちゃいました。
女子ウケも男子ウケも素晴らしいぞこれ絶対。

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

コメント

コメントする

目次
閉じる