プロローグ
CSSの勉強用環境をDjangoで作ります。
Djangoが導入済みであれば10分想定です。
内容には影響ないかと思いますが、実行環境です
OS : Windows10
python : Python 3.7.6
django : 3.1
手順
フォルダ作成、プロジェクト作成、アプリ作成
C:\work\02_実施>mkdir 20200919_htmlcss
C:\work\02_実施>cd 20200919_htmlcss
C:\work\02_実施\20200919_htmlcss>django-admin startprojecthtmlcssC:\work\02_実施\20200919_htmlcss>cd htmlcssC:\work\02_実施\20200919_htmlcss\htmlcss>python manage.py startapptest_appC:\work\02_実施\20200919_htmlcss\htmlcss>dir
ドライブ Cのボリューム ラベルがありません。
ボリューム シリアル番号は D48D-C505です
C:\work\02_実施\20200919_htmlcss\htmlcss のディレクトリ
2020/09/19 19:38 <DIR> .
2020/09/19 19:38 <DIR> ..
2020/09/19 19:38 <DIR>htmlcss2020/09/19 19:38 685manage.py
2020/09/19 19:38 <DIR>test_app1個のファイル 685バイト
4個のディレクトリ 8,932,749,312バイトの空き領域
アプリ認識(appsに定義されているアプリ名をsetting.pyに追記)
C:\work\02_実施\20200919_htmlcss\htmlcss>cd htmlcssC:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad settings.py
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>type ..\test_app\apps.py
fromdjango.apps importAppConfigclassTestAppConfig(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',]
アクセス先の設定(プロジェクトのurls.pyとアプリのurls.pyに設定)
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad urls.py
htmlcss/urls.py
fromdjango.contribimportadminfromdjango.urlsimportpath,includeurlpatterns=[path('admin/',admin.site.urls),path('',include('test_app.urls')),]
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>copy urls.py ..\test_app\
1個のファイルをコピーしました。
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\urls.py
test_app/urls.py
fromdjango.urlsimportpath,includefrom.importviewsurlpatterns=[path('',views.index),]
アクセス先のhtmlを指定と作成
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\views.py
test_app/views.py
fromdjango.shortcutsimportrender# Create your views here.
defindex(request):returnrender(request,'index.html')
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>mkdir ..\test_app\templates
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\templates\index.html
index.html
<html><head></head><body><p>hello, world</p></body></html>
ようやくCSS(css認識と作成、htmlからの呼び出し)
C:\work\02_実施\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/
importosSTATIC_URL='/static/'STATICFILES_DIRS=(os.path.join(BASE_DIR,'static'),)
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>mkdir ..\test_app\static\css
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\static\css\style.css
style.css
.T1{background-color:#99cc00}
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\templates\index.html
index.html
{%load static%}
<html><head><linkhref="{% static 'css/style.css'%}"rel="stylesheet"></head><body><divclass='T1'><p>hello, world</p></div></body></html>
webサーバの起動とブラウザで確認
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>start
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>python ..\manage.py runserverC:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>start http://localhost:8000
エピローグ
これで好きなようにCSSをジャンジャン試せます