Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@on97-nakamatsu-mayumi

pythonのDjangoをつかって簡単ブログ作成③ CSSを使ってみよう

前回に引き続き挑戦記事です。

前回

今回はCSSも使って、テンプレートしてみよう!!挑戦です。

まず、CSSを記述するためのフォルダとファイルを準備

Djangoでは
「static」と言う名前で作るという決まりがあるみたいです。
この中に「image]もいれるし、あと「java.supript」もこの中にいれるらしい・・・・

今回はファイル名は「main.css」にします。
そして背景をピンクに指定。

Image from Gyazo

そのあと、htmlのファイルに以下を記述

Image from Gyazo

staticの場合はloadが必要らしい。

しかし、ブラウザで確認したらピンクになってない。。。
しばし戦います。。

あっ!!判明しました!!
サーバーの再起動が必要でした〜。。。
無事にトップ画面にはピンクが適用されました〜!!

Image from Gyazo

で、aboutページにも同じ記述するのは面倒だし、エラーがでそう
そこで今度は別のテンプレートを使う

extendsとblockタグを使ってみよう!!

また、基盤となるテンプレートファイルを作りそこの繰り返し使う記述をかく
変えたい部分にはblockタグで囲う
そしてindexとaboutのファイルを編集

Image from Gyazo

そしてブラウザで変更なってないか確認

大丈夫でした!!

そして画像の貼り付け方法

staticフォルダに貼り付けたい画像をアップデート
表示したいhtmlのファイルに記述

なかなか、表示されないと思っていたら。。。imgをimageにしてました。。

Image from Gyazo

なんとかここまでできたよ〜!!

Image from Gyazo

まだまだ挑戦は続く・・・

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
on97-nakamatsu-mayumi
プログラミング初心者

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?