練習3

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>構造主義の四銃士</title>
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen, print">
<style type"text/css">
<!--
@charset "UTF-8";

body {
	font-size: 0.875em;
}
.content {
	margin: 0 0 25px 10px;
	width: 500px;
}
h1 {
	color: #036;
	font-size: 1.6em;
	margin: 0 0 10px 0;
	padding: 5px 35px 10px 16px;
	background-color: #EAEAEA;
	border: 1px solid #000;
}
ul {
	list-style-image: url(images/mark.gif);
}
-->
</style>
</head>

<body>
<div class="content">
<h1>構造主義の四銃士</h1>
<p>言語学に限られていた「構造主義」の理説ををそれぞれの分野で展開し、後の世代に多大な影響を与えたのは次の4人です。</p>
<ul>
<li>ミシェル・フーコー</li>
<li>ロラン・バルト</li>
<li>クロード・レヴィ=ストロース</li>
<li>ジャック・ラカン</li>
</ul>
<p>生まれた順番は、次の通りです。</p>
<ol>
<li>ジャック・ラカン</li>
<li>クロード・レヴィ=ストロース</li>
<li>ロラン・バルト</li>
<li>ミシェル・フーコー</li>
</ol>
</div>
<div class="content">
<h1>それぞれの功績</h1>
<dl>
<dt>ミシェル・フーコー</dt>
<dd>構造論的な手法による歴史分析を通して、西欧的人間像の系譜を明らかにした</dd>
<dt>ロラン・バルト</dt>
<dd>言語=文化が社会の中で「制度」として人々に及ぼす影響を分析した</dd>
<dt>クロード・レヴィ=ストロース</dt>
<dd>構造言語学の考え方を人類学の中に導入して構造主義の方法を確立</dd>
<dt>ジャック・ラカン</dt>
<dd>「フロイトに還れ」を合言葉に、独自の精神分析学理論を展開</dd>
</dl>
</div>
</body>

</body>
</html>

*1338921198*練習2
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>エコロジー&環境問題</title>
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen, print">
<style type"text/css">
<!--
@charset "UTF-8";

* {
	margin:0;
	padding:0;
}
body {
	font-family:
		"Hiragino Kaku Gothic Pro",
		"ヒラギノ角ゴ Pro W3",
		Meiryo, 
		"メイリオ", 
		Osaka, 
		"MS P Gothic", 
		"MS Pゴシック", 
		sans-serif;
	font-size: 1.0em;
	text-align: center;
 }

h1 {
	font-size: large;
	color: #FFF;
	margin: 20px 0;
	padding: 20px 0;
	background-color: #9ACF9C;
 }

p {
	font-size: 0.875em;
	line-height: 1.5;
	color: #555;
	text-align: left;
	margin: 0 0 20px 0;
 }

address {
	font-size: 0.7em;
	font-style: normal;
	color: #55924F;
	text-align: center;
	padding-top: 8px;
	border-top: solid 9px #9ACF9C;
 }

h1, p, address {
	width: 480px;
	margin: 0 auto;
 }
-->
</style>
</head>

<body>
<h1>エコロジーへの取り組み</h1>
<p>
エコロジーや環境問題への関心は、年々高くなっています。<br>
Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素(CO2)の排出量を減らす努力もしています。<br>
専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。 </p>
<p>
また、紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。<br>
リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。 </p>
<address>Copyright (C) Computer Technology Groups. All rights reserved.</address>

</body>
</html>

*1338921121*練習1
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>正しく構造化されたHTMLの例(CSSが適用されている場合)</title>
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen, print">
<style type="text/css">
<!--
#shopping {
	border: 1px solid #CCC;
	font-size: small;
	padding: 10px;
	width: 400px;
}
#shopping h2 {
	background-color: #06C;
	padding: 3px;
	color: #FFF;
	margin: 0;
	font-size: small;
	font-weight: normal;
}
#shopping ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#shopping li {
	border-bottom: 1px dotted #CCC;
	padding: 3px;
	margin: 0;
}

-->
</style>
</head>

<body>
<div id="shopping">
<h2>今日買った物</h2>
<ul>
<li>豚肉</li>
<li>じゃがいも</li>
<li>たまねぎ</li>
<li>にんじん</li>
</ul>
</div>
</body>
</html>