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

#プロローグ
CSSの勉強用環境をDjangoで作ります。

Djangoが導入済みであれば10分想定です。

内容には影響ないかと思いますが、実行環境です
OS : Windows10
python : Python 3.7.6
django : 3.1

#手順

フォルダ作成、プロジェクト作成、アプリ作成

```bat
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に追記)

```bat
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'
```

```python: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に設定)

```bat
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad urls.py
```

```python: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')),
]
```

```bat
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
```

```python:test_app/urls.py
from django.urls import path, include
from . import views

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

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

```bat
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\views.py
```

```python:test_app/views.py
from django.shortcuts import render

# Create your views here.

def index(request):
    return render(request, 'index.html')
```

```bat
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>mkdir ..\test_app\templates
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\templates\index.html
```

```html:index.html
<html>
  <head>
  </head> 
  <body>
    <p>hello, world</p>
  </body>
</html>
```

ようやくCSS(css認識と作成、htmlからの呼び出し)

```bat
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad settings.py
```

```python: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'),
)
```

```bat
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
```

```css:style.css
.T1 {
  background-color: #99cc00
}
```

```bat
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\templates\index.html
```

```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サーバの起動とブラウザで確認

```bat
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
```

完成！！！
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/ee9a9f0d-03ec-007d-593a-39bde8aa7fba.png)

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