【HTML02】 

<h2>デザインの話<h2>

<p>物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。</p>

<p>物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。</p>

<h2>パッケージの色<h2>

<p>パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。</p>

<p>パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。</p>

*1336889986*【HTML01】

*1336889932*【CSS21】

*1336889916*【CSS20】

*1336889900*【CSS19】

*1336889872*【CSS18】

*1336889830*【CSS17】

*1336889812*【CSS16】

*1336889793*【CSS15】

*1336889772*【CSS14】

*1336889753*【CSS13】

*1336889727*【CSS12】

*1336889693*【CSS11】

*1336889649*【CSS10】

*1336889577*【CSS09】

*1336889524*【CSS08】

*1336889436*【CSS06】

*1336889237*【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>
</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>

*1336889191*【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>
</head>
<body>
<div id="shopping">
<h2>今日買った物</h2>
<ul>
<li>豚肉</li>
<li>じゃがいも</li>
<li>たまねぎ</li>
<li>にんじん</li>
</ul>
</div>
</body>
</html>

練習２　１で作ったのを箱にしました 

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-style-type" content="text/css">
<title>【CSS02】
</title>
<style type="text/css">
<!--
#container{
background-color:#51BF08;
height:200px;
width:800px;
}
h1{
color:#33559B;

}
h2{

background-color:#9932CC;
color:#FFFFFF}
body{

background-color:#00FF00;
}
p{
background-color:#008B8B;
}

-->




</style>
</head>
<body>
<div id="container">



<h1>about wine</h1>
<h2>chianti classico riserva</h2>
<p>1435年創業の由緒あるワイン醸造メーカーの名家マッツェイが所有するぶどう園は、いたるところにローマ時代の遺跡が残る小さな集落にあります。<br>
15世紀から現在に至るまで、キャンティワインの造り手たちの先導者であり続けるマッツェイの歴史は、キャンティワインの歴史といっても過言ではありません。キャンティの最高峰と呼ばれるマッツェイは、もっぱら地元の人のために造られる量り売りを飲んでいたぼくにとって、憧れのワイナリーでした。当時はおじいちゃんになったら飲めるかなと思っていましたが、こうして日本で、ましてや自分の店のリストに加えることができるなんて驚きです。</p>
</div>



</body>


</html>

練習１　習ったことを色変えてやってみました 

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-style-type" content="text/css">
<title>【CSS02】
</title>
<style type="text/css">
<!--
h1{
color:#0000FF;

}
h2{

background-color:#FFFF00;
color:#FFFFFF}
body{

background-color:#990033;
}
p{
background-color:#00FFFF;
}

-->




</style>
</head>
<body>




<h1>about wine</h1>
<h2>chianti classico riserva</h2>
<p>1435年創業の由緒あるワイン醸造メーカーの名家マッツェイが所有するぶどう園は、いたるところにローマ時代の遺跡が残る小さな集落にあります。<br>
15世紀から現在に至るまで、キャンティワインの造り手たちの先導者であり続けるマッツェイの歴史は、キャンティワインの歴史といっても過言ではありません。キャンティの最高峰と呼ばれるマッツェイは、もっぱら地元の人のために造られる量り売りを飲んでいたぼくにとって、憧れのワイナリーでした。当時はおじいちゃんになったら飲めるかなと思っていましたが、こうして日本で、ましてや自分の店のリストに加えることができるなんて驚きです。</p>




</body>


</html>