似非プログラマのうんちく

「似非プログラマの覚え書き」出張版

巳年じゃないけど Python やろうぜ(その 8)

3 週間ほど空いてしまいました。この間こっそりと開発環境を Linux に移行させていたのは秘密です*1

hello ページを作る(続き)

静的ファイル(CSS, JavaScript, etc...)の配置

今回は CSS を配置してみます。django_test\hello\static\hello というフォルダを作り、その中に css\hello.css を作成します。

body {
    background-color: #f8f8f8;
    color: #0c3c26;
}

p {
    font-size: large;
}

label {
    font-weight: bold;
}

次に common.html を書き換えます。

{% load static %}
<!doctype html>
<html>
  <head>
    <title>{{ page_title | title }}</title>
    <link rel="stylesheet" href="{% static 'hello/css/hello.css' %}">
  </head>
  <body>
    {% block content %}{% endblock %}
  </body>
</html>

サーバーを起動して確認してみましょう。

わかりにくいですが、文字色と背景色を Django の公式ドキュメントに合わせています。

JavaScript や画像ファイルなど、その他の静的ファイルも同様の方法で配置して読み込むことができます。

…君らそろそろ Model 使いたいやろ ? というわけで、次回からいよいよ Model です !

*1:実はこの記事も Linux 上の Firefox で書いてる