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

* 演習課題-5 *

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

《html》

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>初心者課題-5</title>
<link rel="stylesheet" href="kadai-5.css">
</head>

<body>
<div id="container">

     <div id="header">
            <h1>provence</h1>
     </div>

     <div id="wrapper">
     <div id="nav">
           <ul>
               <li id="home"><a href="#"><span>home</span></a></li>
               <li id="about"><a href="#"><span>about</span></a></li>
               <li id="product"><a href="#"><span>product</span></a></li>
               <li id="shop"><a href="#"><span>shop</span></a></li>
               <li id="access"><a href="#"><span>access</span></a></li>
               <li id="contact"><a href="#"><span>contact</span></a></li>
           </ul>
     </div>

     <div id="content">

                <p><img src="images-5/illust.gif" alt="みかんのロゴマーク">
                      プロヴァンス（la Provence）は、フランス革命以前のフランスに置かれていた州のひとつであり、フランスの南東部に位置                      する。フランス王国併合前（15世紀末）にあった独立国（プロヴァンス伯爵領）の名前でもある。「プロヴァンス」の名称                      は、古代ローマ時代の属州（プロウィンキア、Provincia）であったことにちなみ、プロヴァンス語で"Provenco"                      や"Provenca"などとも呼ぶ。プロヴァンスの名は現在でも特に観光上の観点から親しまれている。<br>
                      地域の区分としては、ローヌ川の左岸（東岸）とヴァール川の右岸とデュランス川の南側で区切られた一帯であり、現在                      の地域圏でいえばプロヴァンス＝アルプ＝コート・ダジュール地域圏の大部分に当たる。</p>

      </div>


      <div id="footer">
           <address> (c)provence</address>
      </div>

</div>
</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:"メイリオ","ＭＳＰゴシック", Tahoma, Arial, sans-serif;
     line-height: 1.7;
     color: #333;
     font-size: 14px;
     text-align: left;
     }

#container{
           width:700px;
           height:560px;
           background-color:#FFF;
           margin:0 auto;
           border:solid 2px #6FF;
        }

#header{
      background-image:url("images-5/header.gif");
      width:700px;
      height:120px;
    }

h1{
    color:#FFF;
    font-size:25px;
    padding-top:30px;
    margin-left:20px;
    font-weight:bold;
    }

li{
    display:block;
    width:200px;
    height:50px;
    }

a{
    display:block;
    }

#home{
       background-image:url("images-5/nav_bg001.gif");
       background-repeat:no-repeat;
     }

#about{
background-image:url("images-5/nav_bg002.gif");
}

#product{
background-image:url("images-5/nav_bg003.gif");
}

#shop{
background-image:url("images-5/nav_bg004.gif");
}

#access{
        background-image:url("images-5/nav_bg005.gif");
        }
#contact{
         background-image:url("images-5/nav_bg006.gif");
         }

span{
     visibility:hidden;
    }

#nav{
      float:left;
      margin-top:25px;
      margin-bottom:25px;
    }

#content{
        width:490px;
        float:right;
        }

p{
    margin-top:25px;
    margin-left:10px;
    margin-bottom:10px;
    font-weight:bold;
    }

img{
      float:right;
      margin-left:15px;
      }

#footer{
        clear:both;
        background-image:url("images-5/footer.gif");
        width:700px;
        height:61px;
      }