More than 5 years have passed since last update.

Django Webアプリ作成(6) CSSとBootstrap

Posted at 2019-02-25

環境
OS : macOS Mojave
Anaconda : python3.6.7
Django==2.1.5

#ここまで
前回までで一通りのブログを作ることができた。
今回は、前回でできたブログを少し作り込んでいこうと思う。

#CSSとBootstrap
CSS(Cascading Style Sheets)とは、簡単に言うとWebページのデザイン部分を担当する言語。
WebページはHTMLが文書構造を担い、CSSで見栄えを担い、その他に動的な部分を担うJavaScriptの3つで構成される。
また、Bootstrapはこれらを組み合わせたフレームワークです。
Bootstrapを使用することで大枠のデザインを簡単に作れるというメリットがあります。
これらについては、まだあまり知識がないのでこれから勉強して別の機会に投稿できたらと思っています。

#実際にBootstrap使ってみる
とりあえず、実際に使ってみましょう！
前回作成したhtmlファイルの

部分にBootstrapのリンクを書きます

templates/post_list.html

<html lang="ja">
    <head>
        <title>Django blog</title>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    </head>
  .
  .
  . 
  .
</html>

サーバを起動し確認してみましょう。
変化しましたか？

#CSSを使う
はじめにCSSファイルを作成しましょう.
staticディレクトリにcssフォルダを作成しその中にblog.cssを作成する。

Terminal

mkdir static/css
touch static/css/blog.css

次にpost_list.htmlが静的ファイルにアクセスできるようにするためにファイルの先頭に以下のコードを足す。

post_list.html

{% load staticfiles %}

また

ないに以下のコードを追加

post_list.html

<link rel="stylesheet" href="{% static 'css/blog.css' %}">

これでblog.cssの情報を読み取ることができるようになる。
出来上がったpost_list.htmlは以下のようになっているはずだ。

post_list.html

<html lang="ja">
    <head>
        <title>Django blog</title>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    </head>
    <body>
        <div>
            <h1><a href="/">Django Girls Blog</a></h1>
        </div>
        {% for post in posts %}
        <div>
            <p>published: {{ post.published_date }}</p>
            <h1><a href="">{{ post.title }}</a></h1>
            <p>{{ post.text|linebreaksbr }}</p>
        </div>
        {% endfor %}
    </body>
</html>

次に先程作成したblog.cssファイルを以下のように編集します。
コードの詳しい説明は省略します。

static/css/blog.css

@charset "UTF-8";

h1 a {
    color: #FCA205;
    font-family: 'Lobster', cursive;
}

body {
    padding-left: 15px;
}


.page-header {
    background-color: #ff9400;
    margin-top: 0;
    padding: 20px 20px 20px 40px;
}


.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
    color: #ffffff;
    font-size: 36pt;
    text-decoration: none;
}

.content {
    margin-left: 40px;
}

h1, h2, h3, h4 {
    font-family: 'Lobster', cursive;
}

.date {
    color: #828282;
}

.save {
    float: right;
}

.post-form textarea, .post-form input {
    width: 100%;
}

.top-menu, .top-menu:hover, .top-menu:visited {
    color: #ffffff;
    float: right;
    font-size: 26pt;
    margin-right: 20px;
}

.post {
    margin-bottom: 70px;
}

.post h1 a, .post h1 a:visited {
    color: #000000;
}

CSSファイルに合わせてpot_list.htmlを最終的に以下のように編集する

post_list.html

{% load staticfiles %}
<html lang="ja">
    <head>
        <title>Django blog</title>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
        <link href="http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="{% static 'css/blog.css' %}">
    </head>
    <body>
        <div class="page-header">
            <h1><a href="/">Django Girls Blog</a></h1>
        </div>
        <div class="content container">
            <div class="row">
                <div class="col-md-8">
                    {% for post in posts %}
                        <div class="post">
                            <div class="date">
                                {{ post.published_date }}
                            </div>
                            <h1><a href="">{{ post.title }}</a></h1>
                            <p>{{ post.text|linebreaks }}</p>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </body>
</html>

一度開発サーバを起動して確認してみましょう

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