【Python】Django入門(レイアウトとCSSと画像表示) 

[![](https://www.tech-tech.xyz/wp-content/uploads/2018/11/art-1209519_640_thumnail.jpg)](https://www.tech-tech.xyz/wp-content/uploads/2018/11/art-1209519_640_thumnail.jpg)

アプリを生成
------

今回は、layoutという名前のアプリ名で作成します。

python manage.py startapp layout


アプリ登録とパスの登録をします。 `[プロジェクト名]/[プロジェクト名]/settings.py`

```python
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    ...
    'layout',# 追加
]

[プロジェクト名]/[プロジェクト名]/urls.py

from layout import views as layout_views# 追加

urlpatterns = [
    path('admin/', admin.site.urls),
    ...
    path('layout/hoge',layout_views.hoge,name='layout'),# 追加
    path('layout/fuga',layout_views.fuga,name='layout'),# 追加
]

viewを作成

今回は、ページを表示するだけの処理を追加します。

from django.shortcuts import render

def hoge(request):
    return render(request, 'hoge.html')
def fuga(request):
    return render(request, 'fuga.html')

レイアウトを作成

ページのヘッダーを共通化してタイトルとページの内容を切り替える場合、 テンプレートの継承を利用するのが便利です。 継承されるテンプレートに部品を定義して、 そこにページごとに異なるコンテンツを当てはめるような書き方ができます。 [プロジェクト名]/layout/templatesの下にhtmlを置きます。 継承されるテンプレート [プロジェクト名]/layout/templates/base.htmlを作成します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>{% block title %}{% endblock %}</title>
  </head>
  <body>
    {% block content %}{% endblock %}
  </body>
</html>

base.htmlを継承するページを作成します。 contentとtitleが変更されているのを確認するため hoge.htmlとfuga.htmlを下記のように作成します。 [プロジェクト名]/layout/templates/hoge.html

{% extends 'base.html' %}
{% block title %}
hoge
{% endblock %}
{% block content %}
<h1>hoge</h1>
<p>このページはhogehoge</p>
{% endblock %}

[プロジェクト名]/layout/templates/fuga.html

{% extends 'base.html' %}
{% block title %}
fuga
{% endblock %}
{% block content %}
<h1>fuga</h1>
<p>このページはfugafuga</p>
{% endblock %}

さて、ここまでのコードが動くか確認しましょう。

python manage.py runserver

でアプリを起動します。 http://localhost:8000/layout/hoge にアクセスするとhogeページが表示されます。 http://localhost:8000/layout/fuga にアクセスするとfugaページが表示されます。 ヘッダーが共通化されているのがわかると思います。

cssと画像を追加する

つぎに、ページ共通のcssとヘッダー画像を追加します。 cssとヘッダー画像は静的ファイルなので、 [プロジェクト名]/layout/static/ の配下に置きます。 static配下にディレクトリを作成してその配下においても良いです。 今回は、簡単のために配下に配置します。 ヘッダー画像を適当に用意して、header.jpgを[プロジェクト名]/layout/static/に置きます。 CSSも適当に作成してヘッダー画像と同様の場所に置きます。 [プロジェクト名]/layout/static/layout.css

h1 {color: blue;}
.header_img {width: 100%;}

[プロジェクト名]/layout/templates/base.htmlに スタイルシートとヘッダー画像を追加します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>{% block title %}{% endblock %}</title>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'layout.css' %}">
  </head>
  <body>
    <img class="header_img" src="{% static 'header.jpg' %}" />
    {% block content %}{% endblock %}
  </body>
</html>

静的ファイルを読み込むために再起動します。 アプリを起動させている場合、ctrl-cでアプリを止めて起動します。

python manage.py runserver

http://localhost:8000/layout/hoge にアクセスするとh1タグが青になって、画像が表示されてます。
“`

コメント

タイトルとURLをコピーしました