テンプレート

以降の説明で使う、基本のHTMLコード

師匠

今まで説明した結果、下のコードが、標準的なHTMLコードのテンプレートやった。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>
			タイトル
		</title>
	</head>
	<body>
		日本語も使えます。
	</body>
</html>
師匠

これを変更するで。
まず、インデント(字下げ)を無くす。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>
タイトル
</title>
</head>
<body>
日本語も使えます。
</body>
</html>
弟子

字下げ、あった方が読みやすいですが。。。

師匠

これくらいのシンプルなコードやと、字下げもできるけど、もっと複雑になると、字下げなんぞ してられへんわ。
字下げの無いコードに慣れることや。

師匠

それから、<title>が3行になっているところを、1行にまとめとこう。
あと、<body>の中は、空にしとく。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>




</body>
</html>
師匠

最後に、<head>要素内に、下に書いた <style>要素を 加えとけ。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
body *:not(br) {
	margin:  10px;
	padding: 10px;
	border:  1px dotted gray;
}
</style>
</head>
<body>




</body>
</html>
師匠

上のコードを、テキストファイルにコピペして、「 template.html 」みたいな名前で、自分のパソコンに保存しておけば よろし。

弟子

なんですか? この<style>という要素は。

師匠

要素の周りに境界線を引く設定や。
この設定があると、境界線が表示されるから、初心者には分かりやすいやろ。

師匠

これは、CSSというものの機能を使って線を表示してるんやけどな。
ま、いずれ説明するで。

師匠

一応、確認しておくと、今の木構造は、こんな風になってるんやで。

師匠

以降の説明では、<body></body>の間のコードだけを書いて、<html>とか<head>の要素は書かないから、自分で追加するように。

復習

  • このコースで使うHTMLファイルのテンプレートは、下。
  • 以降の説明では、<body>要素内のコードだけを書く。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
body *:not(br) {
	margin:  10px;
	padding: 10px;
	border:  1px dotted gray;
}
</style>
</head>
<body>




</body>
</html>