Django開発~ブログ構築編2~投稿フォームの続きです。
今回は、cssでスタイルをつけていきましょう。
BootStrapの導入
BootStrapを導入してみます。
base.htmlにBootStrapのCDNを追加しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
vi app/blog/templates/blog/base.html {% load static %} <!DOCTYPE html> <html> <head> <title>{% block title%}{% endblock %}</title> <!-- 追加 --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link href="{% static 'css/blog.css' %}" rel="stylesheet"> </head> <body> <div id="content"> {% block content %} {% endblock %} </div> <div id="sidebar"> <h2>My blog</h2> <p>This is my blog.</p> </div> <!-- 追加 --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html> |
これで、BootStrapの機能が使えるようになります。
ひとまず、TOPページの変更を行ってみましょう。まずは、base.htmlを変更します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
vi app/blog/templates/blog/base.html {% load static %} <!DOCTYPE html> <html> <head> <title>{% block title%}{% endblock %}</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link href="{% static 'css/blog.css' %}" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <div id="content" class="col-8"> {% block content %} {% endblock %} </div> <div id="sidebar" class="col-4"> <h2>My blog</h2> <p>This is my blog.</p> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html> |
BootStrapでは、スタイルを付与する特別なタグがあります。その特別なタグをclassに指定することで、スタイルを適応することができます。参考
現時点のTOPページです。
base.htmlにBootStrapのタグを追加したので、TOPページにもそのスタイルが適用されました。
TOPページにもBootStrapのタグを入れてみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
vi app/blog/templates/blog/post/list.html {% extends "blog/base.html" %} {% block title %}My Blog{% endblock %} {% block content %} <a href="{% url 'blog:create' %}" class="btn btn-primary float-right col-3">POST</a> <h1>My Blog</h1> {% for post in posts %} <h2> <a href="{{ post.get_absolute_url }}"> {{ post.title }} </a> </h2> <p class="date"> Published {{ post.publish }} by {{ post.author }} </p> {{ post.body|truncatewords:30|linebreaks }} <div class="container"> <div class="row"> <a href="{% url 'blog:update' post.id %}" class="btn btn-success col-3 mr-2">Update</a> <a href="{% url 'blog:delete' post.id %}" class="btn btn-danger col-3">Delete</a> </div> </div> {% endfor %} {% endblock %} |
カラフルになりましたね^^
独自CSSでスタイル
BootStrapと併用して、独自のスタイルも設定できます。
base.htmlに「<link href=”{% static ‘css/blog.css’ %}” rel=”stylesheet”>」と定義し、スタイルシートの読み込みを行っているので、このファイルにスタイルを定義しましょう。
作成する前に、blogアプリ配下にstaticフォルダとcssフォルダを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
mkdir app/blog/static mkdir app/blog/static/css touch app/blog/static/css/blog.css tree django-lesson ├── Dockerfile ├── Makefile ├── app │ ├── app │ │ ├── __init__.py │ │ ├── settings.py │ │ ├── urls.py │ │ └── wsgi.py │ ├── blog │ │ ├── __init__.py │ │ ├── admin.py │ │ ├── apps.py │ │ ├── forms.py │ │ ├── migrations │ │ │ ├── 0001_initial.py │ │ │ └── __init__.py │ │ ├── models.py │ │ ├── static # new │ │ │ └── css # new │ │ │ └── blog.css # new │ │ ├── templates │ │ │ └── blog │ │ │ ├── base.html │ │ │ └── post │ │ │ ├── detail.html │ │ │ ├── form.html │ │ │ ├── list.html │ │ │ └── post_confirm_delete.html │ │ ├── tests.py │ │ ├── urls.py │ │ └── views.py │ ├── db.sqlite3 │ └── manage.py ├── docker-compose.yml ├── mkdir └── requirements.txt |
Djangoの初期設定では、staticフォルダ配下の静的ファイルを読み込むようになっているので、staticフォルダから作成しました。
試しにCSSを書き込んで、スタイルが変更されるか確認してみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
vi app/blog/static/css/blog.css html { font-size: 62.5%; box-sizing: border-box; } body { font-size: 1.5rem; margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; } .btn { font-size: 1.3rem; } .container { margin-top: 30px; } h2 { margin-top: 20px; } #sidebar { background-color: #CCCCCC; } |
|
1 2 |
docker-compose down docker-compose up -d |
スタイルが適用されていることがわかると思います。
おわりに
TOPページを参考に、投稿画面にもスタイルを適用してみましょう^^
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。