back
テンプレートを利用しよう (5/6)
■index.htmlを修正する
では、用意したスタイルシートを使うようにテンプレートファイルを修正しましょう。先ほどのindex.htmlを下のリスト欄のように書き換えて下さい。そして再度 /hello にアクセスしてみましょう。スタイルが適用された形でページが表示されますよ。
ここでは、テンプレートの最初に以下のような文が記述されています。
load staticは、スタティックファイルの保管場所のURLを生成するものです。その後に、<link>タグのhrefにこんな文がありますね。
この {% %} というのは、Pythonの文を実行するものです。ここで使っている static に、スタティックファイルのURLが設定されています。つまり、static 'hello/style.css'と記述することで、「static」内の「hello」内にあるstyle.cssのURLを出力していたのです。
スタティックファイルをHTMLを内で利用する場合は、このようにstaticとファイルの相対パスをつなげて記述していきます。こうすることで、Djangoがスタティックファイルに割り当てたURLが設定されるようになります。
ここでは、テンプレートの最初に以下のような文が記述されています。
{% load static %}load staticは、スタティックファイルの保管場所のURLを生成するものです。その後に、<link>タグのhrefにこんな文がありますね。
href="{% static 'hello/style.css' %}" この {% %} というのは、Pythonの文を実行するものです。ここで使っている static に、スタティックファイルのURLが設定されています。つまり、static 'hello/style.css'と記述することで、「static」内の「hello」内にあるstyle.cssのURLを出力していたのです。
スタティックファイルをHTMLを内で利用する場合は、このようにstaticとファイルの相対パスをつなげて記述していきます。こうすることで、Djangoがスタティックファイルに割り当てたURLが設定されるようになります。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
{% load static %}
<html lang="ja">
<head>
<meta charset="utf-8">
<title>hello/index</title>
<link rel="stylesheet" type="text/css" href="{% static 'hello/style.css' %}" />
</head>
<body>
<h1>hello/index</h1>
<p>{{msg}}</p>
</body>
</html>
| << 前へ | 次へ >> |