DjangoテンプレートでCSSをリンクする方法

2024-02-15 02:20 Django テンプレート CSS

  1. CSSファイルを作成する: まず、CSSファイルを作成します。このファイルにスタイルのルールを記述します。例えば、"styles.css"という名前のファイルを作成しましょう。

  2. 静的ファイルの設定: Djangoでは、静的ファイル（CSS、JavaScript、画像など）を提供するために、STATICFILES_DIRSとSTATIC_URLの設定が必要です。settings.pyファイルでこれらの設定を行います。

# settings.py
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]
STATIC_URL = '/static/'

上記の例では、プロジェクトのルートディレクトリに "static" という名前のディレクトリを作成し、その中にCSSファイルを配置します。

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="{% static 'styles.css' %}">
</head>
<body>
    <!-- ページの内容 -->
</body>
</html>

{% static 'styles.css' %} の部分は、CSSファイルのパスを指定しています。この例では、"styles.css" ファイルが static ディレクトリにあることを前提としています。

以上が、DjangoテンプレートでCSSをリンクするための基本的な手順です。この方法を使用することで、ウェブページにスタイルを適用することができます。