【Django】CSSを使ってWebページの見栄えを良くする【初心者の備忘録2】

こんにちは、コウキです。

今回は、DjangoでCSSファイルを使えるようにしていきます。
DjangoでCSSを使うのが初めての人や、設定方法が良くわからない人はぜひ参考にしてみてください。

前回の続きからやるので、まだの人は前回の記事をどうぞ!
【Django】Djangoのインストールから”Hello world”まで【初心者の備忘録1】

静的ファイルの設定をする

静的ファイルとは、CSSファイルやJavascriptファイル、画像ファイルのことです。

セキュリティの観点から、静的ファイルの配信元と、バージョン管理する際のプロジェクト内の置き場所は別々にするのが良いみたいです。

静的ファイルに関する設定は、settings.pyで行います。

変数	説明
STATIC_URL	静的ファイルのディレクトリを表しています。デフォルトで"/static/"となっています。これはそのままで問題ないです。
STATICFILES_DIRS	アプリケーションに紐付かない静的ファイルの場所です。これは最初は書かれていません。
STATIC_URL	静的ファイルの配信元のURLです。collectstaticコマンドで静的ファイルを集約するときのコピー先にもなります。本番環境で動かすときに必要になります。

静的ファイルの設定例です。

PROJECT_NAME = os.path.basename(BASE_DIR)
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
STATIC_ROOT = '/var/www/{}/static'.format(PROJECT_NAME)

今回は"STATICFILES_DIRS"を追加するだけで良いです。
ここでは、プロジェクト名を"PROJECT_NAME"として定義しています。
"BASE_DIR"は最初から定義されているので、その下に書いておくと良いと思います。

CSSファイルを追加する

ベースディレクトリ直下に"static"ディレクトリを作成します。
ここに静的ファイルを入れていきます。
この中に"style.css"を作ります。

最終的にはこんな感じの構成になります。

.
├── app1
├── config
├── templates
├── static
│   └── css
│       └── style.css
└── manage.py

"style.css"の中身はこのようにしておきます。

.hello {
    color: #e66a1b;
    font-size: 40px;
}

templateファイルを編集する

CSSファイルの準備ができたので、templateファイルにCSSを適用してみましょう。

staticファイルを読み込む場合はtemplateファイルに以下の文を追加します。

{% load static %}

追加する場所は、<!DOCTYPE html>の下で良いと思います。

更に<head>の中でcssを読み込みます。

<link rel="stylesheet" href="{% static 'style.css' %}">

Djangoでは、このようにstaticファイルを読み込みます。

{% static 'ファイル名' %}

あとは普通にCSSを適用して、最終的にtemplateはこのようになります。

<!DOCTYPE html>
{% load static %}
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{% static 'style.css' %}">
    <title>{{ title }}</title>
</head>
<body>
    <p class="hello">{{ message }}</p>
</body>
</html>

これでCSSが適用されました。
実際にサーバーを起動して、確認してみましょう。

runserverを実行してブラウザで、
"http://127.0.0.1:8000/app1/hello_world/"
にアクセスし、オレンジ色の大きな文字で"Hello_world"と表示されれば成功です。