概要Djangoで、ブログを作るシリーズ2の一つです。ベーステンプレートファイルを作成していきます。base.htmlの作成base.htmlとして、次のようなテンプレートファイルを作ります。%}デザインに関する、自分用のノートです。</div></footer></body></html>難しそうに見えますが、一つ一つは単純です。上から順番に説明していきます。のちほどcssファイルを読み込むのですが、その際にstaticというテンプレートタグを使います。content="width=device-width">はレスポンシブにするために必要な宣言です。これらはもう、考えるまでもなく記述するのが当たり前になってきましたね。%}</title>は、titleタグにサイトのタイトルを指定しています。なんでblockタグで囲んだかというと、タイトルはページ毎に変更することが多いからです。他のテンプレートファイルで上書きできるようにblockタグを使っています。NOTEと入れています。name="description"も同様です。この2つはSEO的に重要なので、忘れないようにしましょう。%}">は、今回使うcssファイルを読み込んでいます。自分で作ったcssやjs、画像は、このように読み込みます。後程、style.cssの内容についても説明します。FontsからWebフォントを読み込んでいます。その下のscriptタグも同様で、そちらは日本語のWebフォント読み込みです。日本語のようなフォントデータが大きいものは、少し特殊な読み込み方必要なのか、別の読み込み方になっています。%}は、他のテンプレートファイルで<head>内に追加したい場合のための記述です。<body>の中はシンプルですね。%}としておき、各テンプレートファイルで上書きできるようにしています。style.cssの作成アプリケーション内にstaticディレクトリを作り、中にnblog2ディレクトリを作り、そしてstyle.cssファイルを配置します。テンプレートファイルと同様の流れです。置き場所をカスタマイズしたい方は、好きにしてください。style.cssの中身は、次のようにします。#fff;}bodyのスタイルから見ていきます。1は、行間や空間の高さを1にしています。説明すると、例えばh1はデフォルトでfont-sizeが32pxですが、実際はline-heightでの行間の値...1.2とか1.3とかの値が加味され、要素の高さは32*1.2と言った高さになります。マージンを厳密にとるようなデザインだと、このline-heightで作られる空白が、少々面倒なことがあります。line-height:1として、全ての要素の高さをfont-sizeと同じにしています。ここから、必要な要素だけline-heightを個別に設定します。sans-serif;は、今回読み込んだWebフォントを使っています。これは結果的に、アルファベットにはギルサンが、日本語にはノトサンが使われるようになります。このように和文と欧文で別のフォントを使うこともよくあります。14px;はデフォルトのフォントサイズの指定ですね。{にも書いているとおり、1024pxまでのときだけフォントサイズが14px、それ以上では16pxになります。小さい画面では14pxということです。#333は、#000の色は白背景に対してコントラストが強すぎる場合があるので、少し薄めた黒をデフォルトで使っているということです。400;は、フォントの太さですね。Webフォントの読み込み方によっては、デフォルトのフォントの太さが通常よりも細目とか太目のフォントになっていることもあります。今回は400と書くことで、400のウェイトのフォントを読み込んでいることを明示しています。なくても動作的には変わらないです。これは、今回見出し要素のフォントサイズを14px、画面幅が1024px以上のときは16pxにしている、という内容です。見出し要素は通常もっと大きくするのが一般的ですが、今回は敢えて小さくして、周りの余白を使って目立たせるというデザインをしている為です。a要素の設定では、リンク色を#1a0dabにして、下線をなくし、ホバー時に下線を表示するようにしています。img要素には、画像を親要素か、自身のもともとのサイズまで拡大するような指定をしています。どんなに大きい画像を使っても、親要素に合わせて表示されるということです。#ccc;で影をつけていますが、これをしないと、画像の隅っこに白い色があった場合に、ページが白背景だと区別つかなくなるので、画像をちょっと浮かせて境界をハッキリさせています。borderとかで線をつけるのもよく見ます。li要素では、上下に12px程度のマージンをとっています。line-heightを1にしたこととも関係あるのですが、リストはそのままだと詰まって見えがちです。リスト項目をリンクにしたい場合なんかだと、詰まっててクリックしづらい、ってことがあります。いったことが起こりがちなので、上下の余白を多くしてゆったりさせています。containerクラスは何かというと、画面幅に応じてコンテンツの幅を設定しています。小さい画面では左右に10pxや50px程度の余白だけ取ってコンテンツを表示して、大きい画面では、画面幅全部使うとデザイン的に難しい場合があるので、コンテンツ幅を1366px(正確には1266px)にしているということです。この場合、1920pxとかのモニターで見ると、左右が結構開いている感じになります。残りは、ヘッダー部分とフッター部分のスタイルを設定しています。PostsDjangoで、ブログを作るシリーズ2Djangoでブログを作っていくシリーズです。シリーズ・まとめComment記事にコメントするまだコメントはありません。幾つかの方法で、ブログの更新を受け取れます。