CSS課題

自宅課題

CSSの課題を自分なりのペースで解いていこうと思います。

【CSS01】

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>正しく構造化されたHTMLの例（CSSが適用されている場合）</title>
<style type="text/css">
<!--
#shopping {
  width: 300px;
}
h2 {
  color: white;
  font-size: 1.0em;
  line-height: 1.5em;
  margin: 0;
  background-color: blue;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  font-size: 1.0em;
  line-height: 1.5em;
  border-bottom: 1px dotted grey;
}
-->
</style>
</head>
<body>
<div id="shopping">
<h2>今日買った物</h2>
<ul>
<li>豚肉</li>
<li>じゃがいも</li>
<li>たまねぎ</li>
<li>にんじん</li>
</ul>
</div>
</body>
</html>

【CSS02】

<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>エコロジー＆環境問題</title>
<style type="text/css">
<!--
body {
  font-family:"メイリオ",sans-serif;
  width: 500px;  
}
h1 {
  color: white;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 3.0em;
  text-align: center;
  background-color: darkseagreen;
}
address {
  color: green;
  text-align: center;
  border-top: 10px solid darkseagreen;
}
-->
</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>