Django開発~ブログ構築編3~スタイル

django

学習記録

Django開発~ブログ構築編2~投稿フォームの続きです。

今回は、cssでスタイルをつけていきましょう。

BootStrapの導入

BootStrapを導入してみます。

base.htmlにBootStrapのCDNを追加しましょう。

これで、BootStrapの機能が使えるようになります。

ひとまず、TOPページの変更を行ってみましょう。まずは、base.htmlを変更します。

BootStrapでは、スタイルを付与する特別なタグがあります。その特別なタグをclassに指定することで、スタイルを適応することができます。参考

現時点のTOPページです。

base.htmlにBootStrapのタグを追加したので、TOPページにもそのスタイルが適用されました。

TOPページにもBootStrapのタグを入れてみましょう。

カラフルになりましたね^^

独自CSSでスタイル

BootStrapと併用して、独自のスタイルも設定できます。

base.htmlに「<link href=”{% static ‘css/blog.css’ %}” rel=”stylesheet”>」と定義し、スタイルシートの読み込みを行っているので、このファイルにスタイルを定義しましょう。

作成する前に、blogアプリ配下にstaticフォルダとcssフォルダを作成します。

Djangoの初期設定では、staticフォルダ配下の静的ファイルを読み込むようになっているので、staticフォルダから作成しました。

試しにCSSを書き込んで、スタイルが変更されるか確認してみましょう。

スタイルが適用されていることがわかると思います。

おわりに

TOPページを参考に、投稿画面にもスタイルを適用してみましょう^^

コメントを残す