My Vector Space

人生は寄り道してなんぼ

Webデザインスキル強化計画 【 演習課題9 】

***** 演習課題-9 *****

f:id:ooigawa-bitter-sweet:20131012023308g:plain

 

 

《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;
    }     
     
     

 


 

 

PAGE TOP