日記や日々の雑記を綴るページを作りましょう。
見出しと段落で分けてCSSを使って色分けします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>日記</title>
<style type="text/css">
h1 {
font-size: 18px;
font-weight: bold;
color: #993300;
background-color: #FF9933;
border-style: solid;
width: 300px;
padding: 5px;
border-left-width: 10px;
border-color: #993300;
}
h2 {
color: #006600;
background-color: #99CC00;
padding: 5px;
}
h3 {
color: #FF9933;
background-color: #993300;
padding: 5px;
margin-left: 10px;
margin-right: 10px;
}
.diary {
background-color: #FFFFCC;
border: 5px ridge #993300;
margin: 10px;
padding: 10px;
}
</style> </head> <body>
<h1>日記</h1>
<hr>
<h2>2012年（平成24年）</h2>
<h3>○月1日</h3>
<p class="diary">今日は・・・・<br>
○○○○○○、○○○○○○○○○○○○○○○○○○○。○○○○○○、○○○○○○○○○○。<br>
○○○、○○○○○○○○○○○○○○○、○○○○○○○○○○○○○○○。○○○○、○○○○○○○○○。<br> ○○○○○、○○○○○○○○○○○、○○○○○○○○。○○○○○、○○○○○○○○○○○○○○。</p>
<h3>○月5日</h3>
<p class="diary">今日は・・・・<br>
○○○○○○、○○○○○○○○○○○○○○○○○○○。○○○○○○、○○○○○○○○○○。<br>
○○○、○○○○○○○○○○○○○○○、○○○○○○○○○○○○○○○。○○○○、○○○○○○○○○。<br> ○○○○○、○○○○○○○○○○○、○○○○○○○○。○○○○○、○○○○○○○○○○○○○○。</p>
<h3>○月10日</h3>
<p class="diary">今日は・・・・<br>
○○○○○○、○○○○○○○○○○○○○○○○○○○。○○○○○○、○○○○○○○○○○。<br>
○○○、○○○○○○○○○○○○○○○、○○○○○○○○○○○○○○○。○○○○、○○○○○○○○○。<br> ○○○○○、○○○○○○○○○○○、○○○○○○○○。○○○○○、○○○○○○○○○○○○○○。</p>
<hr>
<p align="center"><a href="index.html">戻る</a></p>
</body> </html>
まず、<body></body>の中を記述し、CSSを後から書いてどこに適用されるか見てみましょう。