ウェブ学のすすめ

Study of Web Design & Programing

実践課題【CSS04】 Computer Technology Groups

CSS

課題

【CSS04】

  • 空きはリセットをせず、個別に指定する


引用元：CSS03〜05 - Webデザインの勉強｜忘筌

解答

実践課題【CSS04】 Computer Technology Groups - jsdo.it - share JavaScript, HTML5 and CSS

<?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>Computer Technology Groups</title>
<style type="text/css">
body {
    font-family:
	"Hiragino Kaku Gothic Pro",
	"ヒラギノ角ゴ Pro W3",
	Meiryo, 
	"メイリオ", 
	Osaka, 
	"MS P Gothic", 
	"ＭＳ Ｐゴシック", 
	sans-serif;
    width: 475px;   
}
h1 {
    color: #2e8b57;
    font-size: 1.0em;
    background-image: url(logo.gif);
    background-repeat: no-repeat;
    background-position: left top;
    padding-top: 18px;
    padding-left: 80px;
    padding-bottom: 20px;
}
div#header {
    background-color: #2e8b57;
    background-image: url(ecology.gif);
    background-repeat: no-repeat;
    background-position: 50% 20px;
    padding-top: 70px;
    margin-top: 20px;
    width: 470px;
    height: 88px;
}
h2 {
    height: 20px;
}
p {
    font-size: 0.9em;
}
a {
    color: #2e8b57;
}
address {
    color: #2e8b57;
    font-size: 0.8em;
    font-style: normal;
    font-weight: bold;
    padding-top: 5px;
    border-top-style: solid;
    border-color: #2e8b57;
    border-width: 10px;
}
</style>
</head>
<body>
<h1>Computer Technology Groups</h1>
<div id="header">
<img src="img.jpg" alt="">
</div>
<h2><img src="mark.gif" alt=""> <img src="ecology_sub01.gif" alt="エコロジーへの取り組み"></h2>
<p>Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素(CO2)の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。
</p>
<p>
地域の自然環境の育成にも努めています。植樹、植林活動から、公園の整備なども行っています。また、社内裏手には広くて気持ちのいい芝生の丘があり、一般にも開放しています。昼休みなどには、憩いの場として賑わっています。
</p>
<h2><img src="mark.gif" alt=""> <img src="ecology_sub02.gif" alt="商品のラインナップ"></h2>
<p>
紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただきます。
</p>
<address align="center">Copyright(C)<a href="#">Computer Technology Groups</a>.All rights reserved.</address>
</body>
</html>