MENU

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

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

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

この記事を書いた人

6年間化学を専攻していたのになぜか一部上場のIT企業のエンジニアへ。
普段はWeb系のITエンジニアとしてサラリーマンをしているが、脱サラ田舎暮らしに憧れ,システム開発やブログ収益化を目指す。

コメント

コメントする

目次
目次