見出し画像

Django_staticフォルダのCSSやJSをテンプレートで使う　#298日目

ゆーき|YM202110

【一言日記】
初めて長男と二人でドライブした日でした。ドライブと言っても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を定義すれば、テンプレートで使うことができます。

ここまでお読みいただきありがとうございました！

いいなと思ったら応援しよう！