CSS01〜CSS02 ボックスモデル - Web関連あれこれ

CSS01

以下の画像と同じように表示させるCSSを記述しなさい
記述場所はエンベッド

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-style-Type" content="text/css" />
<title>【CSS01_2】正しく構造化されたHTMLの例（CSSが適用されている場合）</title>
<style type="text/css">
<!--
 * {
  margin: 0;
  padding: 0;
}
body {
  font-family:
  "Hiragino Kaku Gothic Pro",
  "ヒラギノ角ゴ Pro W3",
  Meiryo, 
  "メイリオ", 
  Osaka, 
  "MS P Gothic", 
  "ＭＳ Ｐゴシック", 
  sans-serif;
}
#shopping {
  width: 400px;
  padding: 10px;
  border: solid #ccc 1px;
}
h2 {
  color: #fff;
  background-color: #006CCF;
}
ul {
  list-style-type: none;
}
li {
  border-bottom: dotted #ccc 1px;
}
h2,li {
  font-size: 0.8em;
  padding: 2px 2px 2px 5px;
}
-->
</style>
</head>
<body>
<div id="shopping">
<h2>今日買った物</h2>
<ul>
<li>豚肉</li>
<li>じゃがいも</li>
<li>たまねぎ</li>
<li>にんじん</li>
</ul>
</div>
</body>
</html>

CSS02

HTMLの入力に不安がある人は入力から
CSSはエンベッド

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-style-Type" content="text/css" />
<title>【CSS02_2】エコロジー＆環境問題</title>
<style type="text/css">
<!--
 * {
  margin: 0;
  padding: 0;
}
body {
  font-family:
  "Hiragino Kaku Gothic Pro",
  "ヒラギノ角ゴ Pro W3",
  Meiryo, 
  "メイリオ", 
  Osaka, 
  "MS P Gothic", 
  "ＭＳ Ｐゴシック", 
  sans-serif;
}
#container {
  width: 450px;
  padding: 10px;
}
h1 {
  color: #fff;
  background-color: #97CD9B;
  text-align:center;
  font-size: 1.2em;
  padding: 20px 0;
}
#content {
  font-size: 0.8em;
  margin: 10px 0;
}
address {
  font-size: 0.7em;
  font-weight: bold;
  text-align:center;
  color: #95CE99;
  border-top: solid 8px #95CE99;
  padding-top: 5px;
}
-->
</style>
</head>
<body>
<div id="container">
<h1>エコロジーへの取り組み</h1>
<div id="content">
<p>
エコロジーや環境問題への関心は、年々高くなっています。<br />
Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。<br />
専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。 </p><br />
<p>
また、紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。<br />
リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。 </p>
</div>
<address>Copyright (C) Computer Technology Groups. All rights reserved.</address>
</div>
</body>
</html>