Webデザインスキル強化計画 【 演習課題9 】
***** 演習課題-9 *****
《html》
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>課題-9</title>
<link rel="stylesheet" href="kadai-9.css" madia="all">
</head>
<body>
<div id="container">
<div id="header">
<div id="sub-header-1">
<h1>Computer Technology Groups</h1>
</div><!--********** sub-header-1 おわり ***********-->
<div id="sub-header-2">
<ul>
<li><a href="#">エコロジー</a></li>
<li><a href="#">コンピューター</a></li>
<li><a href="#">モバイル</a></li>
<li><a href="#">ショッピング</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div><!--********** sub-header-2 おわり ***********-->
<div id="sub-header-3">
<p><img src="images-9/ecology.gif"></p>
</div><!--********** sub-header-3 おわり ***********-->
</div><!--******************* header おわり ********************-->
<div id="content">
<div id="sub-content-1">
<h3>エコロジーへの取り組み</h3>
<p>Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素(CO2)の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。</p>
<p>地域の自然環境の育成にも努めています。植樹、植林活動から、公園の整備なども行っています。また、社内裏手には広くて気持ちのいい芝生の丘があり、一般にも開放しています。昼休みなどには、憩いの場として賑わっています。</p>
</div><!--********* sub-content-1 おわり ***********-->
<div id="sub-content-2">
<h3>商品のラインナップ</h3>
<p>紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。</p>
</div><!--********* sub-content-2 おわり ***********-->
</div><!--********************** content おわり *************************-->
<div id="footer">
<address>(C) Computer Technology Groups. All rights reserved.</address>
</div><!--********************* footer おわり ************************-->
</div><!--**************************** container おわり *********************************-->
</body>
</html>
《css》
@charset "utf-8";
/* CSS Document */
/* css reset */
/* ///// IE6対策です //// */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym {
border:0;
}
body {
font-family:"メイリオ","MS Pゴシック", Tahoma, Arial, sans-serif;
line-height: 1.7;
color: #333;
font-size: 14px;
text-align: left;
}
#container{
width:700px;
border:solid 2px #E7E7E7;
margin:0 auto;
}
#sub-header-1{
background-image:url("images-9/logo.gif");
background-repeat:no-repeat;
width:700px;
height:59px;
}
h1{
font-size:18px;
font-weight:bold;
margin-left:60px;
color:#393;
}
#sub-header-2{
width:660px;
height:50px;
margin:0 auto;
background-color:#FFF;
border-top:solid 2px #396;
border-bottom:solid 2px #396;
margin-top:10px;
margin-bottom:20px;
}
a{
display:block;
width:132px;
height:50px;
text-align:center;
text-decoration:none;
color:#396;
}
li{
float:left;
margin:0 auto;
font-weight:600;
}
a:hover{
text-decoration: underline;
}
#sub-header-3{
width:660px;
height:120px;
background-color:#396;
margin:0 auto;
clear:both;
}
p img{
margin-left:230px;
margin-top:50px;
}
#sub-content-1{
background-image:url("images-9/mark.gif");
background-repeat:no-repeat;
margin-left:20px;
margin-top:30px;
margin-right:20px;
}
h3{
color:#396;
font-size:18px;
font-weight:bold;
margin-left:20px;
margin-bottom:20px;
}
p{
font-size:15px;
font-weight:600;
}
#sub-content-2 h3{
margin-top:50px;
}
#sub-content-2{
background-image:url("images-9/mark.gif");
background-repeat:no-repeat;
margin-left:20px;
margin-right:20px;
}
#footer{
width:700px;
height:50px;
background-color:#FFF;
margin-top:50px;
border-top:solid 2px #396;
}
address{
text-align:center;
margin-top:20px;
}