テンプレートファイルを作成する

どんなデザインの Web ページを作るときには、統一性や制作の効率化のために、共通する HTML や CSS を作成する。

新しいページを作るたびに、同じコードを書くのは効率が良くない。

作成するのは、HTML ファイルと CSS ファイルのセットで、レスポンシブデザインにも対応する。

テンプレートの特徴

HTML ファイル（base.html）と CSS ファイル（style.css）を用意する。
リセット CSS として Normalize.css を使用する。
style.css にはページ全体で使用するフォントの種類と、リンクのテキスト色を設定する。

リセット CSS とは

HTML や CSS の規格はしっかりと決められていて、ブラウザも規格に準拠して作られている。

どのブラウザを使ってもほぼ同じようにページ（コンテンツ）が表示されるが、それでもわずかな違いが見られる。

リセット CSS は、ブラウザの表示誤差を少なくするための CSS ライブラリとなっている。

使い方は HTML に所定の CSS ファイルを読み込むだけ。

この Labo では、リセット CSS に "Normalize.css" を使用する。

normalize.css

コード

HTML


				<!doctype html>
				<html land = "ja">
					<head>
						<meta charset="utf-8" />
						<meta name="viewport" content="width=device-width, initial-scale=1">
						<title>すべてのページに共通するテンプレートを作る</title>
						<link href="css/normalize.css" rel="stylesheet">
						<link href="css/style.css" rel="stylesheet">
					</head>
					<body class="post">
						Lorem ipsum dolor sit amet, consectetur ...
					</body>
				</html>

CSS


				body {
					font-family: 'Noto Sans JP' suns-serif;
					font-weight: 400;
					color:rgb(18, 19, 92)
				}

				a {
					color: rgb(196, 0, 98);
				}

テンプレートファイル

base.html

style.css