割烹エディターβ版リリースメモ2（Topページの作成）

2020年5月5日 13:14

まずは基本的なページを作成していきます。

今回作るのはTopページと404ページです。チャカチャカと作っていきましょう。

404ページ

templatesフォルダに404.htmlを作ります。これで、ページがなかった場合にこのhtmlが呼び出されるようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>404</title>
   <meta name="robots" content="noindex,nofollow">
</head>
<body>
   <h1>このページはありません！</h1>
   <p>アクセスできないURLか、ページが削除されています。</p>
   <p>もしくは、URLの打ち間違い、リンクミスの可能性があります。確認してみてください。</p>
   <p><a href="/">トップページに戻る</a></p>
</body>
</html>

キャプチャ

OKですね。Noteの404美術館みたいにちょっと凝った雰囲気にしてみてもいいですが、まぁそれは余裕があればで。

Topページ

templates/index.htmlを作ってそこにTopページを作ります。
Topページは独立に作っておきます。他のアプリケーションに組み込んでもよかったのですけど、今回作るレイアウト的に独立で作った方がいいかなと思ったのでそうします。何事も経験。

metaタグ

<title>タイトル名</title>
<meta content="概要文を120文字程度" name="description">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">

とりあえずこの4つを設定しておけばいいかな。OGPは共通のテンプレートと一緒に後で設定します。

参考

次にbody構造を決めます。文書構造を表すタグは

header
nav
article
section
main
aside
footer
div

があります。

<!DOCTYPE html>
<html lang="ja">
<head>
   <<title>割烹エディター</title>
   <meta charset="UTF-8">
   <meta content="割烹エディターは小説家になろうの活動報告を彩るためだけに作られたエディターです。あなたの割烹を素敵に彩ってみませんか？" name="description">
   <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
   <header class="top-header"></header>
   <section class="top-section"></section>
   <aside class="top-info"></aside>
   <main class="top-main"></main>
   <nav class="top-nav"></nav>
   <footer class="top-footer"></footer>
</body>
</html>

とりあえず。構造だけ作っておきます。

次にCSSを作ります。static/top.cssを作ります。

resetcssとしてhtml5doctorを使います。

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
   margin:0;
   padding:0;
   border:0;
   outline:0;
   font-size:100%;
   vertical-align:baseline;
   background:transparent;
}
body {
   line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
   display:block;
}
nav ul {
   list-style:none;
}
blockquote, q {
   quotes:none;
}
a {
   margin:0;
   padding:0;
   font-size:100%;
   vertical-align:baseline;
   background:transparent;
}
/* change colours to suit your needs */
ins {
   background-color:#ff9;
   color:#000;
   text-decoration:none;
}
/* change colours to suit your needs */
mark {
   background-color:#ff9;
   color:#000;
   font-style:italic;
   font-weight:bold;
}
del {
   text-decoration: line-through;
}
abbr[title], dfn[title] {
   border-bottom:1px dotted;
   cursor:help;
}
table {
   border-collapse:collapse;
   border-spacing:0;
}
/* change border colour to suit your needs */
hr {
   display:block;
   height:1px;
   border:0;
   border-top:1px solid #cccccc;
   margin:1em 0;
   padding:0;
}
input, select {
   vertical-align:middle;
}

CSSはブラウザで初期値が異なっているので、ブラウザ間の差異をなくすためにリセットCSSを設定することが多いです。

リセットcssはいくつかテンプレートがあって、以下のサイトがよくまとめられていました。

私は全部リセットして、再設定するほうが好きなのでHTML5 Doctor Reset CSSを使いました。

あ、そういえばCSSのフレームワークは使いません。bootstrapなんかが有名ですけど、デザインをするのにそこまで苦でないので自分でcssを書いていきます。

あとは、いったんhtmlの方に戻って、staticフォルダをLoadしておきます。

{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
   <title>割烹エディター</title>
   <meta charset="UTF-8">
   <meta content="割烹エディターは小説家になろうの活動報告を彩るためだけに作られたエディターです。あなたの割烹を素敵に彩ってみませんか？" name="description">
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" href="{% static 'top.css' %}">
   <link rel="icon" type="image/png" href="{% static 'favicon.png' %}">
</head>
<body>
<header class="top-header">
   <figure class='header-img' ><img src="{%  static 'logo.png' %}" alt="logo"></figure>
   <div class="header-white">
       <h2>あなたの<span class="red">割烹</span>に彩りを</h2>
       <p>割烹エディターは小説家になろうの活動報告を彩るためだけに作られたエディターです。</p>
   </div>
   <aside class="header-info"><a>お知らせ</a></aside>
   <div class="header-black">
       <h2>あなたの<span class="red">割烹</span>を彩ってみませんか？</h2>
       <p>割烹エディターはユーザー登録不要で簡単に使えます。</p>
   </div>
   <aside class="header-help"><a>使い方</a></aside>
</header>
<nav class="top-nav"> ・おすすめ
   ・定番
   ・変わり種
   ・テンプレート
   ・会員登録
</nav>
<footer class="top-footer">Copyright© 割烹エディター , 2020 All Rights Reserved.</footer>
</body>
</html>

{% static 'top.css' %}でstaticフォルダのcssを呼び出しています。

さて、では準備が終わったのでURLの設定に行きます。

project/urls.pyにTopページの設定を追加します。

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
   path('admin/', admin.site.urls),
   path('', include('top.urls')),
]

次に、top/urls.pyを作成し、viewに渡します。

from . import views

app_name = 'top'
urlpatterns = [
   path('', views.IndexView.as_view(), name='index'),
]

top/views.pyを以下のように設定します。

from django.views import generic

class IndexView(generic.TemplateView):
   template_name = 'index.html'

templateの表示に特化したtemplateviewのクラスを使います。

これでURLの流れが設定できたので表示を見ましょうか。

python manage.py runserver

キャプチャ2

まぁこんなものかな。resetcssしか適用していないのでシンプルな感じ。ここからレイアウトを整える必要があります。

レイアウトはグリッドレイアウトで整えていきます。

.top-header img{
   width: 100%;
   height: auto;
   vertical-align: bottom;
}
.top-header{
   --sideLR: 20px;
   --sideTB: 40px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 170px auto 100px;
   margin: var(--sideTB) var(--sideLR);
}
.red{
   color: orangered;
}
.header-img{
   grid-column: 1 / -1;
   grid-row: 2;
   justify-self: center;
   align-self: center;
   width:60%;
}
.header-white{
   grid-column: 2;
   grid-row: 1 / 3;
   align-self: start;
   writing-mode: vertical-rl;
}
.header-white h2{
   font-size: 3em;
   font-weight: bold;
}
.header-white p{
   margin: 0 1em;
   font-size: 1.5em;
   height: 12em;
   line-height: 1.5;
}
.header-info{
   grid-column: 2;
   grid-row: 3;
   justify-self: end;
   align-self: end;
   width: 10em;
   padding: 1em;
   box-sizing: border-box;
   border: solid 1px #aaa;
   text-align: center;
}
.header-black{
   grid-column: 1;
   grid-row: 1 / 3;
   color: #fff;
}
.header-black h2{
   font-size: 2.5em;
   font-weight: bold;
}
.header-black p{
   margin: 1em 0 ;
   font-size: 1.25em;
   width: 12em;
   line-height: 1.5;
}
.top-header::after{
   grid-column: 1;
   grid-row: 1 /-1;
   z-index: -1;
   content: '';
   background-color: #222;
   margin-left:calc( var(--sideLR) * -1) ;
   margin-top:calc( var(--sideTB) * -1) ;
   margin-bottom:calc( var(--sideTB) * -1) ;
}
.header-help{
   grid-column: 1;
   grid-row: 3;
   color: #fff;
   justify-self: start;
   align-self: end;
   width: 10em;
   padding: 1em;
   box-sizing: border-box;
   border: solid 1px #fff;
   text-align: center;
}

キャプチャ3

はい、こんな感じ。

お知らせや使い方のリンクや、下の方のテンプレートのリンクや説明覧なんか作りますけど、全体整えてからかな。

ということで、暫定的なTopページができたので次は共通のヘッダー、フッターかな。

あと、スマホ用のレイアウトもしておきます。

@media(max-width:767px){
   .top-header{
       grid-template-columns: 1fr;
       grid-template-rows: repeat(6, auto);
   }
   .header-white{
   grid-column: 1;
   grid-row: 1;
   writing-mode: horizontal-tb;
   }
   .header-white h2{
       font-size: 1.75em;
   }
   .header-white p{
       font-size: 1.2em;
       margin: 1em 0 ;
       height: auto;
   }
   .header-info{
       grid-column: 1;
       grid-row: 2;
       justify-self: center;
       margin-bottom: 1em;
   }
   .header-img{
       grid-column: 1;
       grid-row: 3/5;
       width:80%;
   }
   .header-black{
       grid-column: 1;
       grid-row: 5;
   }
   .header-black h2{
       margin: 1em 0;
       font-size: 1.75em;
   }
   .header-black p{
       font-size: 1.2em;
       margin: 1em 0 ;
   }
   .header-help{
       grid-column: 1;
       grid-row: 6;
       justify-self: center;
   }
   .top-header::after{
       grid-column: 1;
       grid-row: 4 /-1;
       margin-top:0 ;
       margin-right: calc( var(--sideLR) * -1) ;
   }

}

とりあえずiPadの768px未満はスマホ用のレイアウトで。

キャプチャ4

全部縦方向に並べてみました。

いちおうこれでOKかな。

良ければサポートお願いします。サポート費用はサーバー維持などの開発費に使わせていただきます。