<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DeMo.html　CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />

<style type="text/css">
<!-- 
body	{
	margin:25px 0px 10px 25px;
	background-image:url(../img/ws.jpg);
	background-attachment:fixed;
	}

#title	{
	position:relative;
	top:0px;
	left:0px;
	margin:0px;
	width:780px;
	height:200px;
	background-color:#fafae8;
	border-bottom:solid 2px #a0aaa0;
	}

#youkosobun	{
	position:absolute;
	top:95px;
	left:25px;
	text-align:left;
	width:550px;
	height:30px;
	margin:0px;
	padding:0px;
	font-size:16px;
	}

#titlename	{
	position:absolute;
	top:2px;
	left:505px;
	width:80px;
	margin:0px;
	padding:0px;
	font-size:50px;
	font-weight:bold;
	background-color:#fafae8;
	}

#red	{
	position:absolute;
	top:10px;
	left:10px;
	margin:0px;
	padding:0px;
	width:400px;
	height:20px;
	background-color:red;
	z-index:1;
	}

#yellow	{
	position:absolute;
	top:20px;
	left:50px;
	margin:0px;
	padding:0px;
	width:400px;
	height:20px;
	background-color:yellow;
	z-index:2;
	}

#blue	{
	position:absolute;
	top:32px;
	left:100px;
	text-align:right;
	width:400px;
	height:20px;
	margin:0px;
	padding:0px;
	font-size:15px;
	font-weight:bold;
	color:#ffffff;
	background-color:blue;
	z-index:3;
	}

#youkoso	{
	position:absolute;
	top:58px;
	left:25px;
	width:510px;
	height:30px;
	text-align:center;
	margin:0px;
	padding:0px;
	font-size:28px;
	font-weight:bold;
	color:#008aff;
	}

#link	{
	position:absolute;
	top:100px;
	left:570px;
	text-align:center;
	width:200px;
	height:80px;
	margin:0px;
	padding:0px;
	line-height:160%;
	font-size:16px;
	font-weight:bold;
	}

a	{
	color:blue;
	}

a:hover	{
	text-decoration:none;
	color:red
	}

#main	{
	margin:0px;
	width:780px;
	background-color:#fafae8;
	}

h2	{
	text-align:left;
	margin:20px 10px 0px 20px;
	font-size:30px;
	color:maroon;
	}

#aisatu	{
	margin:0px 10px 0px 20px;
	padding-top:20px;
	}

p	{
	margin:0px;
	padding:5px 10px 40px 25px;
	text-align:left;
	line-height:140%;
	font-size:17px;
	}

.prof	{
	margin-top:15px;
	text-align:center;
	font-weight:bold;
	line-height:160%;
	}

#onore	{
	font-size:25px;
	font-weight:bold;
	font-style:italic;
	color:red;
	}
-->
</style>

</head>
<body>

<div id="title">

<p id="youkosobun">
ここは最も基本的なHTMLを用いたレイアウトのデモページです。<br />
特に難しいことはしていませんが、これの応用で他の全てのレイアウトも構築されるんですよ。<br />
構造さえ理解しちゃえばHTMLは単純なものですので、肩肘張らずにいきましょー。
</p>

<p id="titlename">
DeMo.html
</p>

<p id="red"></p>

<p id="yellow"></p>

<p id="blue">→→→</p>

<p id="youkoso">
ようこそ！
</p>

<p id="link">
<a href="#aisatu">ご挨拶</a><br />
<a href="#prof">Profile</a<<br />
<a href="#today">今日の日記</a><br />
</p>
</div>

<div id="main">

<h2 name="aisatu" id="aisatu">ご挨拶</h2>

<p>
　DeMo.htmlにお越しいただきありがとうございます。<br />
　ここは……………………………で、<br />
@+*=&'$&)[]「＠：；な〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜というサイトです。<br /><br />

　そうそう。<br />
　このデモページに書いてあるProfileや今日の日記はフィクションです。<br />
<em>デモページ用に適当に書いている文章</em>ですので、誤解なきようお願いします。
</p>

<h2 name="prof" id="prof">Profile</h2>

<p class="prof">
生息地：北緯33度　東経66度<br />
好きなアルコール度数：25度<br />
平熱：36.9度<br />
うっとりしちゃう角度：斜め45度<br />
チャームポイント：喉<br />
好きな食べ物：アボカド<br />
持っている資格：上級シスアド<br />
口癖：まいど
</p>

<h2 name="today" id="today">今日の日記</h2>

<p>
<b>11月11日（日）　晴れ</b><br />
　のべつまくなし、やることもなし。<br />
　空に浮かぶ雲を眺め、ぼんやりと過ぎる時間を楽しむ。<br />
　そんな一日を予定していたが、近所に住む姪っ子が遊びに来たためにあえなく断念。どうやら以前、弟の家で飲んでいたときに約束した（らしい）遊園地へ連れていけとせがまれ、仕方なく連れて行くことになってしまった。<br />
　弟は弟で、これ幸いとばかりに私に姪っ子を押し付け、のんびりしていると言う。<br />
　そういえばあの時、酒の席で弟が姪っ子が遊園地に行きたがっているという話を私に振った気がする。確か、その流れで私が連れて行こうと約束したのではなかったか……。<br /><br />

　<span id="onore">おのれ弟ぉぉ</span><br /><br />

　この借りはいずれ返してやるぞ。<br />
　たーのーしーみ〜ぃに、しておげぇぇぇい。
</p>
</div>
</body>
</html>
戻る