[Django] tutorial #6-css, static file


ユーザがサーバからデータを受信して自分の画面に表示する操作をレンダリングと呼びます.
画面表示のためには、画面表示を担当するhtmlcssjavascriptが必要である.
この3つは、故事ではstatic file、すなわち静的ファイルと呼ばれている.
この文書では、サーバをstaticファイルから分離する機能を提供します.
ここで静的ファイルは分離可能で、程度を知るだけでいい!staticファイルのデフォルトの場所はapp (polls)内部にstaticディレクトリを作成して管理する必要があります.
この場合、他のアプリケーションに重複する名前がある場合は、アプリケーション名でnamespaceと表記するために、アプリケーション名を持つディレクトリをもう1つ作成することをお勧めします.
polls/
    static/polls
    	style.css

静的ファイルの分離

staticフォルダには、次のようにcssファイルが作成されます.
li a {
    color: green;
}
cssファイルを作成した後、htmlファイルの上部にcssファイルを接続するコード(load)を追加します.
- polls/templates/polls/index.css
{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">
その後、サーバを再起動して、作成したcssファイルがうまく適用されていることを確認します.
次のように、問題のリンクが緑で表示されます.

背景画像を追加


画像を使用する場合は、polls/static/pollsディレクトリ内にimageサブディレクトリを作成して管理できます.
polls/
    static/polls/
    	image/
           background.gif
画像ファイルを挿入した後、polls/static/polls/style.cssに次のコードを追加します.
- polls/static/polls/style.css
body {
    background: white url("images/background.gif") no-repeat;
}
🔎 リファレンス
デジタルカメラ公式ファイル
デジタルウェアハウス公式ドキュメント講義