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サーバー・アプリ周りの知識も幅広く扱ってくれています。データベースの知識、クラウドの知識、セキュリティの知識も同時に習得でき、初心者にはぜひおすすめの書籍
Djangoについて深く知りたいという方におすすめしています。
ややプログラミングの知識がないと理解が難しいかもしれません。
pythonが書ける方には非常にタメになるDjangoアプリ開発におすすめ書籍でした。
オンライン授業で学びたいなら
僕はオンラインスクールはUdemy
をおすすめします。定番の授業からマニアックな授業まで幅広く扱っているので、学びたいことは大体あります。
今回はPython+Djangoの授業をおすすめします。Djangoの基礎から応用までこの授業で学べます。
実際にWEBアプリを作成し、公開するところまで親切に教えてくれます。
読んでおくべきおすすめ記事
コメント
コメント一覧 （1件）
[…] ハイパー猫背： https://creepfablic.site/2019/11/20/django-static/#index_id3 […]