Djangoでstaticディレクトリに配置した外部CSSファイルを読み込んでみましょう。外部CSSとはHTMLファイルに直接スタイルを記述するのではなく、別のCSSファイルにスタイルをまとめて定義したもので、HTML文書の見た目を一元管理することができ、保守性や可読性が向上します。
設定ファイルの変更
# プロジェクトルートの static ディレクトリに配置されたファイルを読み込むように設定
STATIC_URL = '/static/'
STATICFILES_DIRS = [
BASE_DIR / "static",
]
CSSファイルを配置
CSSファイル用のフォルダとファイルを static ディレクトリに配置します。
static/
└── css
└── styles.css
テンプレートファイルでCSSファイルを読み込む
CSSファイルを読み込むには、link タグを使います。
例として base.html テンプレートに styles.css を読み込んでみましょう。
{% load static %}<!-- static設定を読み込む -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Django App</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"><!-- CSSファイルを読み込む -->
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
load staticでstatic設定を読み込み、HTMLのlinkタグを使ってCSSファイルへのパスを指定します。
