MENU
  1. ホーム
  2. プログラミング言語
  3. python
  4. Django
  5. 【初めてのDjango】（入門編 #02）CSSの適用からベーステンプレートの作成まで

【初めてのDjango】（入門編 #02）CSSの適用からベーステンプレートの作成まで

python Django 初心者向け

本記事では「初めてのDjango」（入門編）として、初めてDjangoというフレームワークを使用してWebアプリケーションを作ってみたい！という方向けに、簡単なアプリケーションの作り方をご紹介していきます。

こんな人におすすめ！

・とりあえず手を動かしてWebアプリケーションを作成してみたい！
・pythonはある程度知識ある！

本記事は連作になっております！

  1. （入門編 #01）単一ページのアプリケーション作成まで
  2. （入門編 #02）CSSの適用からベーステンプレートの作成まで ←イマココ
  3. （入門編 #03）コンテキスト情報とテンプレートタグの活用
  4. （入門編 #04）お問合せフォームの設置、メール送信処理まで
  5. （入門編 #05）お問い合わせ送信後にメッセージを表示させる
  6. （入門編 #06）アプリケーションをGAEにデプロイ
  7. （発展編 #01）データベースの設定を行う
  8. （発展編 #02）カスタムユーザーモデルの定義、マイグレーション
  9. （発展編 #03）django-allauthで認証機能を実装する
  10. （発展編 #04）ListViewを用いてモデル情報を描写する
  11. （発展編 #05）CreateViewを使用してデータベースを更新
  12. （発展編 #06）DetailViewを用いて詳細表示
  13. （発展編 #08）DeleteViewを用いてデータベースのレコード削除
目次

機密情報を外部ファイルから読み込むようにする

本記事ではまず、重要な情報を外部ファイルから読み込むように編集を行います。

重要な情報の例として、まずはプロジェクトディレクトリにある settings.py を開いてみましょう。

すると上の方にこのように SECRET_KEY という変数があるかと思います。

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-...(略)'

1行目にコメントしてあるように「これは秘密にしといてね★」と注意されています。

この状態でGithubなどにそのままpushしてしまうと、第三者がこの機密情報を覗き放題、、、なんてことになってします（リポジトリがpublicの場合）。

なので、キーやパスワードなどをそのままコード内に直接記述しなくても良いように、外部ファイルから読み込むようにしましょう！

情報の扱いには注意しましょう。

プロジェクトのルートディレクトリ（manage.pyがあるとこ）に settings.json を新規作成し、次のように記述しましょう。

{
    "SECRET_KEY":"<settings.pyの SECRET_KEY の中身をコピペ>"
}

このようにJSON形式で機密情報を記述します。

さらに、この settings.json の情報を cafe/settings.py にて読み込むようにします。

import os
import json

# Read settings.json
try:
    config_path = os.path.join(BASE_DIR, 'settings.json')
    config = json.load(open(config_path, "r", encoding="utf-8"))
except FileNotFoundError as e:
    print("[ERROR] Config file is not found.")
    raise e
except ValueError as e:
    print("[ERROR] Json file is invalid.")
    raise e

secret_key = config['SECRET_KEY']

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = secret_key

機密情報を格納したファイルを別で管理する事で、このように settings.py の中に直接記述せずに済みます。

またファイルが見つからなかった場合を想定して try-except 処理を実装しています。

BASE_DIRについて

上記の3行目で出てきた BASE_DIR とはなんでしょうか？

settings.py の上部でこのように定義されています。

from pathlib import Path

BASE_DIR = Path(__file__).resolve().parent.parent

結論から言いますと、プロジェクトのルートディレクトリ（manage.pyがあるとこ）を表しています。

Path(__file__).resolve() で settings.py があるディレクトリを表します。また parent は親要素を表すので、こんな具合です。

Path(__file__).resolve()
# > /Users/.../cafe/cafe/settings.py

Path(__file__).resolve().parent
# > /Users/.../cafe/cafe

Path(__file__).resolve().parent.parent
# > /Users/.../cafe

したがって、今回新規作成した settings.py のパスはこのように表すことができます。

config_path = os.path.join(BASE_DIR, 'settings.json')

これで無事重要な情報を隔離することができました！

今後もしパスワードやIDなど、機密情報がでてきたら適宜 settings.json に追加し、そこから読み込むようにします。

settings.jsonはGithubには公開しないようにしましょう！！
隔離した意味がなくなってしまいます。

ページにCSSを適用させる

今度は作成したページにCSSを適用させる方法を解説していきます。

静的ファイルのパスを設定する

CSSを適用させるために、まずは静的ファイル（CSSや画像など中身が変化しないもの）がどこにあるかをプロジェクトに教えてあげる必要があります。

静的ファイルの場所は settings.py に設定します。下記のコードを追加してください。

# settings of static file path

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'), 
)

このように STATICFILES_DIRS にパスを追加することで、静的ファイルの場所をDjangoに教えてあげることができます。

このままですと静的ファイルのパスは設定しているがパス自体がありませんので、プロジェクトルートディレクトリに新規フォルダ static を作成します。

さらにその中に css/mystyle.css というファイルを設置しましょう。

このCSSの中に下記のコードを記述します（ぶっちゃけ現時点では何でもよいです）。

h1 {
    color: red;
}

テンプレートでCSSを読み込む

CSSファイルを作成したので、そのCSSをテンプレート側で読み込ませましょう。

トップページを表す index.html を次のように書き換えます。

{% load static %}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>トップページ</title>
        <link rel="stylesheet" type="text/css" href="{% static 'css/mystyle.css' %}">
    </head>
    <body>
        <h1>welcome to django app.</h1>
    </body>
</html>

{% load static %} と記述することで、staticタグを使用できるようにしています（1行目）。

またそのstaticタグを用いて、先ほど作成した mystyle.css を読み込んでいます（8行目）。

ここで、ローカルサーバーを立ち上げてトップページを確認してみましょう！

「python manage.py runserver」で立ち上げることができます。

このようにちゃんとCSSが適用されていたらOKです。

テンプレートタグについて

{% load static %} のように {% タグ名 %} という記述方法を用いることで、テンプレート上で変数の表示や条件分岐といった、通常の python のような書き方でロジックを組み込むことができます。

各ページ共通のベーステンプレートを作成する

一般的なWebサイトにおいて、各ページ内で共通して表示されるものがあります。ヘッダーやフッターなどがこれに該当するかと思います。

このような共通項目を、テンプレートごとに何回も記述するのは無駄ですので、このような各ページで共通する内容を１つにまとめて管理する方法をご紹介します。

新米エンジニア

間違いも減りそうですね！

今回はページ下部にフッターを共通で表示させます。

ベーステンプレートの作成

まずは共通で使用するベーステンプレートを作成します。

templatesディレクトリ直下に base.html を作成し、下記の内容を書き込みます！

{% load static %}

<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{% block title %}{% endblock title %}</title>

        {% block head %}{% endblock head %}
        
        <link rel="stylesheet" type="text/css" href="{% static 'css/mystyle.css' %}">
    </head>
    <body>
        {% block contents %}{% endblock contents %}

        <!-- フッター -->

        <footer>
            <div>
                <p>Copyright © 2023 hoge All rights Reserved.</p>
                <p>Powered by piyo</p>
            </div>
        </footer>
    </body>
</html>

ここで重要なのは9、14行目の {% block <ブロック名>}{% endblock <ブロック名> %} の部分です。

これは、各ページのテンプレートにて要素を埋め込むための記述になります（埋め込む方法は後述）。

ついでにmystyle.cssも編集してください。

/* 共通 */

* {
    margin: 0;
    padding: 0;
}

/* フッター */

footer {
    background-color: #614039;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

footer div {
    text-align: center;
    position: relative;
}

footer p {
    color: #d3c2bb;
    font-size: 12px;
}

トップページを修正

すでに作成している index.html を下記のように修正します。

{% extends 'base.html' %}

{% load static %}

{% block title %}トップページ{% endblock title %}

{% block contents %}
<h1>welcome to django app.</h1>
{% endblock contents %}

1行目の {% extends ‘base.html’ %} は、先ほど作成した base.html のblockタグに埋め込むために記述します。

このように記述することで、{% block <ブロック名> %}…{% endblock <ブロック名> &} の内容を、base.htmlの対応するブロックの箇所に埋め込むことができます。

例えば今回の場合ですと、base.html の下記の部分が置き換わります。

{% block contents %}{% endblock contents %}

↓↓↓

<h1>welcome to django app.</h1>

{% block title %}{% endblock title %} も同様です。

トップページを確認するとこのようになっています。

ちゃんとフッターが表示されてます。

ヘッダーやサイドバーなど、他にも全ページで共通して表示させたい内容があれば、適宜 base.html に追加しましょう！

トップページを作り込む

ここまでで

  1. CSSの適用方法（静的ファイルの適用方法）
  2. 共通ベーステンプレートの作成方法

について学びました。

ここではシンプルにトップページを作り込みます。

index.html
{% extends 'base.html' %}

{% load static %}

{% block title %}トップページ{% endblock title %}

{% block contents %}
<div class="topPage">
    <img class="topMainImg" src="{% static 'assets/img/first-view.jpg' %}" alt="first-view">
    <div class="wrapperNav">
        <nav>
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">MENU</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </nav>
    </div>
</div>
<section class="welcome">
    <div>
        <h2>ようこそ、hoge cafeへ</h2>
        <p>こちらはhoge cafeの公式サイトです。</p>
    </div>
</section>
{% endblock contents %}
mystyles.css
/* 共通 */

* {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: -apple-system, Calibri、Candara、Segoe、Segoe UI、Optima、Arial、sans-serif;
}

a:link, a:visited, a:hover, a:active {
    color: inherit;
    text-decoration: none;
}

/* トップページ */

.topPage {
    position: relative;
}

.topMainImg {
    width: 100vw;
}

.wrapperNav {
    position: absolute;
    top: 50px;
    right: 100px;
}

.wrapperNav ul {
    display: flex;
    flex-direction: row;
}

.wrapperNav li {
    color: #d3c2bb;
    letter-spacing: .3rem;
    margin: 0 .5rem;
    font-weight: 800;
}

.welcome {
    background-color: #d3c2bb;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.welcome p {
    display: block;
    margin-top: 1rem;
}

/* フッター */

footer {
    background-color: #614039;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

footer div {
    text-align: center;
    position: relative;
}

footer p {
    color: #d3c2bb;
    font-size: 12px;
}

ここで新たにでてきた項目といえば、<img>タグによる画像の読み込み方法です。

cssファイルと同様に画像も静的ファイルなので、staticディレクトリ配下に画像を配置します。次の画像のように新規フォルダを作成しましょう！

今回はfirst-view.jpgという画像ファイルをトップページの画像として用いていますが、ぶっちゃけ何でもよいです笑

なければこちらからダウンロードしてください。

この画像ファイルも static タグを用いて読み込むことができます。

<!-- 抜粋 -->
<img class="topMainImg" src="{% static 'assets/img/first-view.jpg' %}" alt="first-view">

CSSと同じですね！

トップページを見てみましょう！

「hoge cafe」というカフェのトップページという体で作成しております。

紹介メッセージなどは自分好みに編集していただいて構いません。

ここまでのコードをGithubに載せておりますので、確認用としてご利用ください。

お疲れ様でした！

まとめ

本セクションでは、ページにCSSスタイルを適用させる方法から、各ページ共通のベーステンプレートの適用方法などをメインに紹介させていただきました。

次の記事では、

  1. 新規ページの作成、リンクの作成方法
  2. コンテキスト情報の活用、描写
  3. テンプレートタグの使用方法

などをご紹介いたします！

あわせて読みたい
【初めてのDjango】（入門編 #03）コンテキスト情報とテンプレートタグの活用 本記事では「初めてのDjango」（入門編）として、初めてDjangoというフレームワークを使用してWebアプリケーションを作ってみたい！という方向けに、簡単なアプリケーシ…

案件、ありますか？

「メインの仕事があるけれど、週1、2日だけできる仕事ないかな、、、」

「ある程度スキルが身に付いてはきたけど、そのスキルを活用できる場が欲しい」

なんて悩みが以前はありました。

自分で仕事を探しに行くのも大事ですが、蛇の道は蛇。その道の人に頼むことで、自分だけでは見つからないような案件に携わることができます。

IT PRO パートナーズでは、簡単に無料でアカウントを登録でき、さらにはエージェントさんに希望の働き方・案件の種類を提示することでお仕事を紹介してくれます！

登録自体も非常に簡単で、「エージェントさんとの面談を希望する」という欄にチェックをするだけで、エージェントさんから直接連絡をいただくことができます。

驚くほど簡単で正直拍子抜けしてしまいました笑

もしお仕事探しに困っておりましたら、一度登録し案件を眺めてみることをおすすめします！

python Django 初心者向け
django python
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

yamama72のアバター yamama72

勤めていた設計会社を退社し、フリーランスとして活動しています
また、趣味で主にpyhonを用いて機械学習を行なっています！
現在競艇の予測モデルの開発中です。

関連記事

コメント

コメント一覧 （12件）

コメントする

目次