More than 3 years have passed since last update.

Djangoを使って10分で作るCSS環境

Posted at 2020-09-19

#プロローグ
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 startproject htmlcss
C:\work\02_実施\20200919_htmlcss>cd htmlcss
C:\work\02_実施\20200919_htmlcss\htmlcss>python manage.py startapp test_app
C:\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>          htmlcss
2020/09/19  19:38               685 manage.py
2020/09/19  19:38    <DIR>          test_app
               1 個のファイル                 685 バイト
               4 個のディレクトリ   8,932,749,312 バイトの空き領域

アプリ認識(appsに定義されているアプリ名をsetting.pyに追記)

C:\work\02_実施\20200919_htmlcss\htmlcss>cd htmlcss
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad settings.py
C:\work\02_実施\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',
]

アクセス先の設定(プロジェクトのurls.pyとアプリのurls.pyに設定)

C:\work\02_実施\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_実施\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

from django.urls import path, include
from . import views

urlpatterns = [
    path('', views.index),
]

アクセス先のhtmlを指定と作成

C:\work\02_実施\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_実施\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/

import os

STATIC_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>
    <link href="{% static 'css/style.css'%}" rel="stylesheet">
  </head> 
  <body>
    <div class='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 runserver
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>start http://localhost:8000

完成！！！

#エピローグ
これで好きなようにCSSをジャンジャン試せます

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up