手順のメモがほとんどできていなかった・・・。結局 1 of 1のあとには、VS Codeに適当にプラグインをインストールしたりソースコードをGithubに載せたりとかをごにょごにょやった。
CSSはありものをできるだけ使う
適当な練習アプリを作るにもHTMLとCSSがいるのだが、CSSを細々書くのなんてめんどくさい。超かんたんにある程度の見栄えになる適当なCSSのサンプルとかライブラリはなにかないものかとWebを漁ってみたけど意外とない。かっちょいい企業サイトのサンプルみたいなやたらとリッチなやつしか出て来なくて、２カラムのさっぱりした見た目で、なんとなくHeadingとかテーブルとかリストとかがきれいになるようなCSSはないのかなって探してみたけどいいのがない。CSSが調べながら書いたりとか、できないわけじゃないけどそれに極力時間を使いたくないのである。
結局Pure.cssというものだけはとりあえず入れてみることにした。
テンプレートエンジンを活用する
アプリのフォルダの下にtemplatesというフォルダを掘る。そこにlayout.htmlとindex.htmlを置く
[layout.html]
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TQuest1</title>
<link
rel="stylesheet"
href="{% static 'tq1a/bootstrap.css' %}"
type="text/css"
media="screen"
/>
<link
rel="stylesheet"
href="{% static 'tq1a/style.css' %}"
type="text/css"
media="screen"
/>
<!--[if lte IE 8]>
<link rel="stylesheet" href="menuie.css" type="text/css" media="screen" />
<link
rel="stylesheet"
href="vmenuie.css"
type="text/css"
media="screen"
/>
<![endif]-->
<!--[if IE 7]>
<style type="text/css" media="screen">
#ttr_vmenu_items li.ttr_vmenu_items_parent {
margin-left: -16px;
font-size: 0px;
}
</style>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="html5shiv.js"></script>
<script type="text/javascript" src="respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
{% block content %}
<p>親</p>
{% endblock %}
</div>
</body>
</html>
[index.html]
{% extends 'tq1a/layout.html' %}
{% block content %}
<h1><a>てきとうなクエスト</a></h1>
<h2>こんにちは</h2>
<p>現在の時刻： X月X日 23:45</p>
<p>現在のお金： 1234G</p>
<p class="index_message">{{ message }}</p>
<h2>メニュー</h2>
<div class="pure-g">
<div class="pure-u-1-3"><a href="{% url 'newt' %}">新しい手下</a></div>
<div class="pure-u-1-3">狩りに行く</div>
<div class="pure-u-1-3">バトルする</div>
</div>
<h2>お知らせ</h2>
<p>ありません</p>
<p>{{t.name}}</p>
<h2>手下たち</h2>
<div class="pure-g myuni">
{% for t in teshita %}
<div class="pure-u-1 myuni-one">
<p>{{t.name}} (Lv:{{t.level}})</p>
<div class="pure-g">
<div class="pure-u-1-3">max hp</div>
<div class="pure-u-1-6">{{t.maxhp}}</div>
<div class="pure-u-1-3">hp</div>
<div class="pure-u-1-6">{{t.hp}}</div>
</div>
<div class="pure-g">
<div class="pure-u-1-3">こうげき</div>
<div class="pure-u-1-6">{{t.kougeki}}</div>
<div class="pure-u-1-3">たいりょく</div>
<div class="pure-u-1-6">{{t.tairyoku}}</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
適当なゲームを作ろうとしていたので、こんなところくらいまできた。
手下を作って、敵を狩ったらレベルが上がるようなところを作ってみようかと思って、名前をつけたら名前によってランダムな強さが設定されるようにしてみた。