CSS environment created in 10 minutes using Django
prologue
Create a CSS study environment with Django.
If you have Django installed, it's supposed to be 10 minutes.
I think that it will not affect the contents, but it is the execution environment OS : Windows10 python : Python 3.7.6 django : 3.1
procedure
Folder creation, project creation, application creation
C:\work\02_Implementation>mkdir 20200919_htmlcss
C:\work\02_Implementation>cd 20200919_htmlcss
C:\work\02_Implementation\20200919_htmlcss>django-admin startproject htmlcss
C:\work\02_Implementation\20200919_htmlcss>cd htmlcss
C:\work\02_Implementation\20200919_htmlcss\htmlcss>python manage.py startapp test_app
C:\work\02_Implementation\20200919_htmlcss\htmlcss>dir
There is no volume label for drive C.
Volume serial number is D48D-C505
C:\work\02_Implementation\20200919_htmlcss\htmlcss directory
2020/09/19 19:38 <DIR> .
2020/09/19 19:38 <DIR> ..
2020/09/19 19:38 <DIR> htmlcss
2020/09/19 19:38 685 manage.py
2020/09/19 19:38 <DIR> test_app
1 file 685 bytes
4 directories 8,932,749,312 bytes of free space
App recognition (add the app name defined in apps to setting.py)
C:\work\02_Implementation\20200919_htmlcss\htmlcss>cd htmlcss
C:\work\02_Implementation\20200919_htmlcss\htmlcss\htmlcss>notepad settings.py
C:\work\02_Implementation\20200919_htmlcss\htmlcss\htmlcss>type ..\test_app\apps.py
from django.apps import AppConfig
class TestAppConfig(AppConfig):
name = 'test_app'
htmlcss/setting.py
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'test_app.apps.TestAppConfig',
]
Access destination settings (set in project urls.py and app urls.py)
C:\work\02_Implementation\20200919_htmlcss\htmlcss\htmlcss>notepad urls.py
htmlcss/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('test_app.urls')),
]
C:\work\02_Implementation\20200919_htmlcss\htmlcss\htmlcss>copy urls.py ..\test_app\
I copied one file.
C:\work\02_Implementation\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\urls.py
test_app/urls.py
from django.urls import path, include
from . import views
urlpatterns = [
path('', views.index),
]
Specify and create html of access destination
C:\work\02_Implementation\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\views.py
test_app/views.py
from django.shortcuts import render
# Create your views here.
def index(request):
return render(request, 'index.html')
C:\work\02_Implementation\20200919_htmlcss\htmlcss\htmlcss>mkdir ..\test_app\templates
C:\work\02_Implementation\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\templates\index.html
index.html
<html>
<head>
</head>
<body>
<p>hello, world</p>
</body>
</html>
Finally CSS (css recognition and creation, call from html)
C:\work\02_Implementation\20200919_htmlcss\htmlcss\htmlcss>notepad settings.py
htmlcss/setting.py
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
import os
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
C:\work\02_Implementation\20200919_htmlcss\htmlcss\htmlcss>mkdir ..\test_app\static\css
C:\work\02_Implementation\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\static\css\style.css
style.css
.T1 {
background-color: #99cc00
}
C:\work\02_Implementation\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\templates\index.html
index.html
{%load static%}
<html>
<head>
<link href="{% static 'css/style.css'%}" rel="stylesheet">
</head>
<body>
<div class='T1'>
<p>hello, world</p>
</div>
</body>
</html>
Start the web server and check with a browser
C:\work\02_Implementation\20200919_htmlcss\htmlcss\htmlcss>start
C:\work\02_Implementation\20200919_htmlcss\htmlcss\htmlcss>python ..\manage.py runserver
C:\work\02_Implementation\20200919_htmlcss\htmlcss\htmlcss>start http://localhost:8000
Complete! !! !!
epilogue
Now you can try CSS as you like
Recommended Posts