ランダムおすすめ記事

ホームページ作りました

python、djangoで掲示板を作ってみたい⑦

CSSをやりました!!!! 全部書くのはめんどくさいのでポイントだけ。

CSSについて

ページの背景色を作りました。

board\static\board\images\back_color.png

のようにディレクトリ構成を作りback_color.pngを取得させます。

board\static\board\style.css

style.cssを作成 css

body {
    background-image: url("/static/board/images/back_color.png");
}

このように書き込みます。

html側に

{% block content %}

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'board/style.css' %}">

link relでcssを読み込ませます。とくにbodyタグとかは作る必要はなくこれで背景色が反映されました。

画面幅に従って文字を折り返そうと思いました。

p.w-normal{
  word-wrap: break-word;
}

htmlのpタグにw-normalクラスを読み込ませます。

<p class="w-normal">{{ post.text | linebreaksbr }}</p>

| linebreaksbr

というのはフォームで改行した時にこれがないとその改行が反映されないのでつけました。

ただしこの状態ですと画像のサイズが大きいと画面幅が広がってしまうので、

img {
max-width: 100%;
height: auto;
}

このようにして画面幅に従ってリサイズされるようにstyle.cssに書き込みました。 ちなみに基本的なデザインはbase.htmlに

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

と書きbootstrapを使って書いてます。

python、djangoで掲示板を作ってみたい① - ニートがベルマーレ好きすぎて会社起こしたけど今後は未定

python、djangoで掲示板を作ってみたい② - ニートがベルマーレ好きすぎて会社起こしたけど今後は未定

python、djangoで掲示板を作ってみたい③ - ニートがベルマーレ好きすぎて会社起こしたけど今後は未定

python、djangoで掲示板を作ってみたい④ - ニートがベルマーレ好きすぎて会社起こしたけど今後は未定

python、djangoで掲示板を作ってみたい⑤ - ニートがベルマーレ好きすぎて会社起こしたけど今後は未定

python、djangoで掲示板を作ってみたい⑥ - ニートがベルマーレ好きすぎて会社起こしたけど今後は未定

python、djangoで掲示板を作ってみたい⑦ - ニートがベルマーレ好きすぎて会社起こしたけど今後は未定

python、djangoで掲示板を作ってみたい⑧ - ニートがベルマーレ好きすぎて会社起こしたけど今後は未定

python、djangoで掲示板を作ってみたい⑨ - ニートがベルマーレ好きすぎて会社起こしたけど今後は未定

python、djangoで掲示板を作ってみたい⑩ - ニートがベルマーレ好きすぎて会社起こしたけど今後は未定

python、djangoで掲示板を作ってみたい⑪ - ニートがベルマーレ好きすぎて会社起こしたけど今後は未定