![見出し画像](https://assets.st-note.com/production/uploads/images/90032075/rectangle_large_type_2_760497c5515454f351487fc64c0129ad.png?width=1200)
Django_staticフォルダのCSSやJSをテンプレートで使う #298日目
【一言日記】
初めて長男と二人でドライブした日でした。ドライブと言っても3分程度で、カーシェアの駐車場からマンションまでの間だけです。それでも長男は誇らしかったらしく、一人でシートベルトして座っている姿をママに見てもらっていました笑。
HTML, CSS, JavaScript周りをずっと後回しにしてきたので、そろそろ少しずつやってみようと思い、Djangoでの基礎設定を確認しました。本番環境ではルートの設定などが追加で必要ですが、ローカルの開発環境では以下で動作します。
まず、settings.pyでstaticファイルを確認します。
[config/settings.py]
STATIC_URL = 'static/'
staticフォルダをtemplatesフォルダと同階層に設置します。今回はyoutube-converter.cssというファイル名にしました。JavaScriptもこのフォルダに格納できます。
app -------- static ---- youtube-converter.css
`-- templates
`-- views.py
config ----- settings.py
manage.py
あとはテンプレート側で{% load static %}をした後、head部分で該当ファイルを読み込めばOKです。
{% load static %}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="{% static 'youtube-converter.css' %}">
<script src="{% static 'youtube-converter.js' %}"></script>
</head>
<body>
</body>
staticフォルダ内にさらに階層を作った場合、以下のようにパスを記述できます。cssとjsというフォルダを作り、そこにそれぞれのファイルを格納した場合です。
{% load static %}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="{% static 'css/youtube-converter.css' %}">
<script src="{% static 'js/youtube-converter.js' %}"></script>
</head>
<body>
</body>
あとはCSSやJSを定義すれば、テンプレートで使うことができます。
ここまでお読みいただきありがとうございました!
この記事が気に入ったらサポートをしてみませんか?