Django＋html＋cssでサイドバーテンプレートを5分で作る

Last updated at 2023-11-01Posted at 2020-11-30

本記事の対象者

Djangoの公式ドキュメントで丁寧に書かれているチュートリアルは試した！けど、どうすればそれっぽい見た目のWebサイトを作れるんだ・・・？と悩んでいるそこの貴方！！！
「とにかくいい感じの固定サイドバー」があれば、良いwebサイトに見える気がしませんか？見えますよね！
この「とにかくいい感じの固定サイドバー」を5分で実装できればいいな〜〜と思っている欲深い貴方が対象です。

前提条件

仮想環境の構築
Djangoのアプリ作成

が終わっている状態で以下の記事を読んでください。

実装環境

Django v.2.2.4
python v.3.7

実装


testapp : アプリ名 

階層
testapp --- __init__.py
        --- admin.py
        --- apps.py
        --- model.py
        --- tests.py
        --- urls.py
        --- views.py
        --- templates --- testapp --- base.html
                                  --- index.html
        --- static    --- css     --- main.css

とにかくコードをコピペする

base.html


{% load static %}
<html>
    <head>
        <title>5分で作ったWebサイト</title>
        <link rel="stylesheet" href="{% static 'css/main.css' %}">
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet">
    </head>
    <body>
        <nav>
            <p>とにかくいい感じの固定サイドバー</p>
            <h1>5分で作ったWebサイト</h1>
            <div id="pageitem">
                {% include 'testapp/pagelist.html' %}
            </div>
        </nav>
        <header>
            <p>ついでに</p>
            <p>ヘッダーも作ろう</p>
        </header>
        {% block content %}{% endblock %}
    </body>
</html>

pagelist.html

<ul>
<li><a class="item" href="{% url 'testapp:index' %}">index</a></li>
<li><a class="item" href="{% url 'testapp:page1' %}">page1</a></li>
<li><a class="item" href="{% url 'testapp:page2' %}">page2</a></li>
</ul>

index.html


{% extends 'testapp/base.html' %}
{% block content %}
<main>
    <h1>indexページ</h1>
    <div>
        <p>hogehogehoge</p>
        <p>piyopiyo</p>
    </div>
</main>
{% endblock %}

page1.html


{% extends 'testapp/base.html' %}
{% block content %}
<main>
    <h1>page1ページ</h1>
    <div>
        <p>hogehogehoge</p>
        <p>piyopiyo</p>
    </div>
</main>
{% endblock %}

page2.html


{% extends 'testapp/base.html' %}
{% block content %}
<main>
    <h1>page2ページ</h1>
    <div>
        <p>hogehogehoge</p>
        <p>piyopiyo</p>
    </div>
</main>
{% endblock %}

main.css


p {
   font-family: "Roboto";
   font-size: 14pt;
   color: #44546A;
   margin: 0px;
}

body {
   display: grid;
   margin: 0;
   height: 100vh;
   grid-template-rows: 75px 1fr;
   grid-template-columns: 350px 1fr;
   grid-template-areas:
      "nav    header  "
      "nav    main    ";
}

nav {
   grid-area: nav;
   text-align: right;
   display: grid;
   margin: 0;
   min-height: 100vh;
   grid-template-rows: 2px 100px 1fr;
   grid-template-columns: 1fr;
   grid-template-areas:
       "stitle "
       "mtitle "
       "plist  ";
   padding : 20px;
   box-shadow: 2px 2px 4px gray;
   z-index: 2;
}

nav h1 {
   grid-area: mtitle;
   color: #2E75B6;
   font-family: "Roboto";
   font-size: 24pt;
   font-weight: bold;
   text-align: right;
}

nav p {
   grid-area: stitle;
   color: #44546A;
   font-family: "Roboto";
   font-size: 14pt;
   text-align: right;
}

nav div {
   grid-area: plist;
}

nav div ul{
   list-style: none;
}

nav div ul li a {
   color: #44546A;
   font-family: "Roboto";
   font-size: 12pt;
   font-weight: bold;
   text-align: right;
   background-color: #f4f5f7;
   border-left: 10px solid #44546A;
   padding: 5px 10px;
   margin: 0 0 10px 0;
   text-decoration: none;
   display: block;
}

nav div ul li a:hover {
   background: #8795a8;
   color: #FFF;
}

header {
   grid-area: header;
   background: #f4f5f7;
   margin : 0px;
   text-align: right;
   z-index: 1;
   padding: 10px;
   box-shadow: 1px 1px 2px gray;
}

header p {
   grid-area: stitle;
   color: #44546A;
   font-family: "Roboto";
   font-size: 12.5pt;
   text-align: right;
   margin : 0px;
}

main {
   overflow: auto;
   grid-area: main;
   margin : 0px;
}

main h1 {
   grid-area: mtitle;
   color: hsl(215, 22%, 34%);
   font-family: "Roboto";
   font-size: 20pt;
   font-weight: bold;
   text-align: left;
   padding-left: 15px;
}

main div p {
   text-align: center;
}

main::-webkit-scrollbar {
   display:none;
}

いろいろ直す

このままでは何も表示されないので以下のコードを書き換えます。

urls.py

ここを変更しないとサイドバーに並べたリンク集を踏んでもページが遷移しません。


from django.urls import path

from . import views

app_name = 'testapp'
urlpatterns = [
    path('', views.index, name='index'),
    path('page1/', views.page1, name='page1'),
    path('page2/', views.page2, name='page2'),
]

views.py

ここを変更しないとサイドバーに並べたリンク集を踏んでもページが遷移しません。


from django.shortcuts import render

def index(request):
    return render(request, 'testapp/index.html')

def page1(request):
    return render(request, 'testapp/page1.html')

def page2(request):
    return render(request, 'testapp/page2.html')

最後に

サポーターズ様主催の技育展に参加して早5ヶ月・・・。
この5ヶ月、有志で集まったDiscordの技育展サーバの中で毎週もくもく会を開いたり、メンバーを集めてハッカソンに出てみたり、いろいろやってきました。
今後もツヨツヨになれるよう頑張っていきます。

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