Djangoを使ってウェブアプリを作ります
cssを使ってみます
- このページで作成されたDjango環境はここからダウンロード可能です
#1. cssを用意します
-
northernlightsフォルダのsettings.pyの末尾に下記を追加します
northernlights/settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
-
manage.pyがあるディレクトリで、｀static｀サブフォルダを作成し、その中に下記のようなcssを作成します
test.css
.a1 {
background-color: #98d98e;
height: 120px;
padding: 20px;
}
.b1 {
background-color: #e4de8a;
padding-left: 20px;
height: 40px;
text-align:left;
font-size: 18pt
}
#2. htmlを用意します
-
penguinフォルダのurls.pyに以下を追記します
penguin/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('test', views.test, name='test'),
path('', views.index, name='index'),
]
-
penguinフォルダのviews.pyに以下を追記します
penguin/views.py
from django.shortcuts import render
def index(request):
return render(request, 'index.html')
def test(request):
return render(request, 'test.html')
-
penguinフォルダのtemplatesサブフォルダに下記のようなhtmlを追加します
test.html
{% load static %}
<html>
<head>
</head>
<body>
{% block extrahead %}
<link href="{% static 'test.css' %}" rel="stylesheet">
{% endblock %}
<div class='a1'>
<h1>テストページ</h1>
</div>
<div class='b1'>
<p>コンテンツ</p>
</div>
</body>
</html>
#3. 稼働を確認します
-
python manage.py runserverでDjangoを起動します - ブラウザで
localhost:8000/testへアクセスし、用意したcssが適用されることを確認します
