Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8728

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

$
0
0

プロローグ

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

完成!!!
1.png

エピローグ

これで好きなようにCSSをジャンジャン試せます


Viewing all articles
Browse latest Browse all 8728

Latest Images

Trending Articles

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>