Django開発~ブログ構築編3~スタイル

今回は、cssでスタイルをつけていきましょう。

<目次>

BootStrapの導入

BootStrapを導入してみます。

base.htmlにBootStrapのCDNを追加しましょう。

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>

vi app/blog/templates/blog/base.html

{% load static %}

<!DOCTYPE html>

<html>

<head>

<title>{% block title%}{% endblock %}</title>

</head>

<body>

{% block content %}

{% endblock %}

</div>

</div>

</body>

</html>

これで、BootStrapの機能が使えるようになります。

ひとまず、TOPページの変更を行ってみましょう。まずは、base.htmlを変更します。

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>

vi app/blog/templates/blog/base.html

{% load static %}

<!DOCTYPE html>

<html>

<head>

<title>{% block title%}{% endblock %}</title>

</head>

<body>

{% block content %}

{% endblock %}

</div>

</div>

</body>

</html>

BootStrapでは、スタイルを付与する特別なタグがあります。その特別なタグをclassに指定することで、スタイルを適応することができます。参考

現時点のTOPページです。

base.htmlにBootStrapのタグを追加したので、TOPページにもそのスタイルが適用されました。

TOPページにもBootStrapのタグを入れてみましょう。

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 %}

vi app/blog/templates/blog/post/list.html

{% extends "blog/base.html" %}

{% block title %}My Blog{% endblock %}

{% block content %}

{% for post in posts %}

<h2>

</a>

</h2>

Published {{ post.publish }} by {{ post.author }}

</p>

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

{% endfor %}

{% endblock %}

カラフルになりましたね^^

独自CSSでスタイル

BootStrapと併用して、独自のスタイルも設定できます。

base.htmlに「<link href=”{% static ‘css/blog.css’ %}” rel=”stylesheet”>」と定義し、スタイルシートの読み込みを行っているので、このファイルにスタイルを定義しましょう。

作成する前に、blogアプリ配下にstaticフォルダとcssフォルダを作成します。

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

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を書き込んで、スタイルが変更されるか確認してみましょう。

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;
}

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;

}

docker-compose down
docker-compose up -d

1 2	docker-compose down docker-compose up -d

スタイルが適用されていることがわかると思います。

おわりに

TOPページを参考に、投稿画面にもスタイルを適用してみましょう^^

月	火	水	木	金	土	日
			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

Django開発~ブログ構築編3~スタイル

BootStrapの導入

独自CSSでスタイル

おわりに

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

BootStrapの導入

独自CSSでスタイル

おわりに

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

いいね機能をCSSでスタイリングしよう!

CSSで検索バーの表示・非表示をスタイリングしよう!

JavaScriptでVertical Sliderを実装しよう!

[Go言語/JavaScript]WebSocketsでチャットアプリを実装…

[Go言語]ハンズオンで学ぶログ解析ツール

[golang]fiber API7~Admin: Product API~

[Go言語]Builderパターン ~Builder~

Go言語とVue.jsで作るユーザー認証アプリ~環境構築編~

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル