こんにちは！Masaです。
12回目の今回は、今まで作ってきたテンプレートを整理して、Webページのデザインを整えていきましょう！
- Django初心者で簡単なWebアプリケーション作成を考えている人
- Djangoの学び直しをしている人
- Djangoの基礎を身に付けたい人
今回やること
今回は今まで作成してきた家計簿アプリのデザインを整理します。
つまり、HTML/CSS での作業が大半です。
それに加えてより見やすくなるよう、Djangoのフィルタなどを使っていきたいと思います。
静的ファイル置き場の準備
まず、静的ファイルであるCSSファイルの置き場を設定しましょう。
templatesフォルダやアプリケーションフォルダ（money_diary）などと同じ階層に“static”という名前のフォルダを作成します。
また、”static”の中に“css”フォルダを作成し、その中にstyle.cssを作成しましょう。
ファイルの作成が完了したら、settings.pyにstaticフォルダの場所を記載しましょう。
STATIC_URL = 'static/'
#以下追加
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]1行目は元々追加されていると思うので、３行目意向を追記してください。
最後にbase.htmlにて、cssファイルを適用させましょう。
base.htmlの<head>タグ内に以下のコードを追記してください。
<!-- style.css -->
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
cssファイルを適用させるテンプレートでは、{% load static %}と記述する必要があります。
忘れないでください。
フィルターを使った金額表示
次に金額を3桁づつ区切るフィルターを設定します。
Djangoに用意されているhumanizeというフィルタを使用します。
詳しい内容は以下の記事をご覧ください。
まず、settings.pyのINSTALLED_APPSに以下のように追記します。
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'money_diary',
'django.contrib.humanize' #追加
]次にその下でいいので、以下のプログラムを追加してください。
NUMBER_GROUPING = 3これで3桁おきにカンマで区切る指定になります。
あとはhumanizeフィルターを使用したいテンプレートでは{% load humanize %}を最初に記述し、金額の場所では{{ 数字 | intcomma }}とします。
詳しくは後ほどのテンプレートファイルを見てください。
全体の整理
最後にテンプレートファイルの簡単な変更とcssの適用によってデザインを少し整えました。
このページに全て載せられないので、githubで確認してください。（あくまで参考程度）
主にやったことは
- base.htmlの変更（ナビゲーションバー部分）
- humanizeフィルターの適用
- 全体のサイズ変更と配置
です。
これだけでスッキリしたように感じました（笑）
まとめ
今回はWebページ全体を整えることをメインとしました。
次の数回では、資産全体の推移グラフの作成と削除や修正をしやすいアプリケーションに改善していきたいと思います、
最後まで読んでいただきありがとうございます。
自己学習に役立てていただけたら嬉しく思います
またSNSやブログでシェアしていただくことや、誤植などをコメントで指摘いただけたら幸いです。
コメント