Djangoでstaticディレクトリに配置した外部CSSファイルを読み込む方法

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ファイルへのパスを指定します。

このエントリーをはてなブックマークに追加

コメントを残す

頂いたコメントは一読した後表示させて頂いております。
反映まで数日かかる場合もございますがご了承下さい。