CSS課題14

CSS課題


以下の画像と同じように表示させるCSSを記述しなさい
記述場所は外部スタイルシート

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS課題14</title>
<link rel="stylesheet" href="css/css14style.css" media="screen,print">
</head>
<body>
<div class="box">
<h1>構造主義の四銃士</h1>
<p>言語学に限られていた「構造主義」の理説ををそれぞれの分野で展開し、後の世代に多大な影響を与えたのは次の４人です。</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="box">
<h1>それぞれの功績</h1>
<dl>
<dt>ミシェル・フーコー</dt>
<dd>構造論的な手法による歴史分析を通して、西欧的人間像の系譜を明らかにした</dd>
<dt>ロラン・バルト</dt
><dd>言語＝文化が社会の中で「制度」として人々に及ぼす影響を分析した</dd>
<dt>クロード・レヴィ＝ストロース</dt>
<dd>構造言語学の考え方を人類学の中に導入して構造主義の方法を確立</dd>
<dt>ジャック・ラカン</dt>
<dd>「フロイトに還れ」を合言葉に、独自の精神分析学理論を展開</dd>
</dl>
</div>
</body>
</html>

@charset "UTF-8";

/* reset */
* {
	margin: 0;
	padding: 0;
}
body {
	font-family:
	"Hiragino Kaku Gothic Pro",
	"ヒラギノ角ゴ Pro W3",
	meiryo,
	"メイリオ",
	osaka,
	"MS PGothic",
	"ＭＳ Ｐゴシック",
}
/* content */
.box {
	margin: 0 auto 10px auto;
	padding: 5px;
	width: 510px;
}
h1 {
	margin-bottom: 10px;
	padding: 8px;
	color: #00355F;
	font-size: 1.5em;
	width: 500px;
	background-color: #EAEAEA;
	border: 1px solid #000;
}
p {
	margin-bottom: 10px;
	line-height: 1.5em;
}
ul {
	margin: 0 0 20px 20px;
	list-style-type: none;
}
ul li {
	margin: 0 0 10px 0;
	padding-left: 20px;
	line-height: 1.0em;
	background-image: url("../img/listmark.gif");
	background-repeat: no-repeat;
}
ol li {
	margin: 0 0 10px 45px;
}
dt {
	margin: 0 0 10px 0;
}
dd {
	margin: 0 0 10px 50px;
	line-height: 1.5em;
}

実際に表示させると↓