　実践演習課題12 - イチから学ぶWeb制作

演習課題H12
HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルスタイルシートカンパニー</title>
<link rel="stylesheet" href="H12.css">
</head>

<body>
<div id="container">
<div id="header">
<p><img src="img/logo.gif" width="290" height="38" alt="ロゴ"></p>
</div><!-- /header -->
<div id="nav">
<ul>
<li id="top"><a href="#"><em>トップページ</em></a></li>
<li id="sol"><a href="#"><em>ソリューション</em></a></li>
<li id="intro"><a href="#"><em>実績紹介</em></a></li>
<li id="partner"><a href="#"><em>パートナー</em></a></li>
<li id="customer"><a href="#"><em>カスタマー</em></a></li>
<li id="company"><a href="#"><em>会社概要</em></a></li>
<li id="contact"><a href="#"><em>お問い合わせ</em></a></li>
</ul>
</div><!-- /nav -->
<div id="wrapper">
<img src="img/main_copy.jpg" width="740" height="272" alt="パートナー">
<div id="content">
<p class="about"><img src="img/title_about.gif" width="107" height="42" alt="弊社"></p>

<p><img src="img/section_01.gif" width="292" height="38" alt="スタイルシート"></p>

<p>サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。</p>

<p class="icon"><img src="img/arrow.gif" width="11" height="11" alt="icon"><a href="#">ソリューションへ</a></p>


<p><img src="img/section_02.gif" width="297" height="38" alt="ウェブサイト"></p>

<p>100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシートカンパニー。競争に勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。</p>

<p class="icon"><img src="img/arrow.gif" width="11" height="11" alt="icon"><a href="#">実績紹介へ</a></p>
</div><!-- /content -->
<div id="sidebar">
<p class="release"><img src="img/title_news.gif" width="119" height="42" alt="ニュース"></p>

<p class="news">2013年7月1日</p>
<p class="sample">サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</p>
<p class="news">2013年7月1日</p>
<p class="sample">サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</p>
<p class="news">2013年7月1日</p>
<p class="sample">サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</p>
<p class="news">2013年7月1日</p>
<p class="sample">サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</p>
<p class="news">2013年7月1日</p>
<p class="sample">サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</p>
</div><!-- /sidebar -->
</div><!-- / wrapper-->
<div id="footer">
<p><img src="img/copyright.gif" width="319" height="33" alt="フッター"></p>
</div><!-- /footer-->
</div><!-- /container-->
</body>
</html>

CSS

@charset "utf-8";


/* リセット */
body,ul,li,p,div,h{
  margin:0;
  padding:0;
}

ul{
  list-style-type:none;
}


/*全体*/
body{
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  line-height:1.5;

}

#container{
  margin:0 auto;
  width:800px;
  height:auto;
  background: url(img/body_bg.gif) repeat-x right top #efefef;
}

/*ヘッダー*/
#header{
  padding: 15px 0 13px 20px;
}


/*ナビ*/
#nav{
  width: 740px;
  height: 33px;
  background: url(img/global_nav_bg.gif);
}
#nav ul {

}
#nav em{
  visibility: hidden;
}
#nav li{
  float: left;
  display: inline;
}
#nav a{
  text-decoration:none;
  width: 94px;
  height: 33px;
  display: block;
  background: url(img/global_nav.gif) no-repeat;
}

/*ナビ移動*/
#nav li#top a:link,#nav li #top a:visited{
  background-position: left top;
}
#nav li#top a:hover{
  background-position: left -33px;
}
#nav li#top a:active{
  background-position: left -66px;
}

#nav li#sol a:link,#nav li #sol a:visited{
  background-position: -94px top;
}
#nav li#sol a:hover{
  background-position: -94px -33px;
}
#nav li#sol a:active{
  background-position: -94px -66px;
}

#nav li#intro a:link,#nav li #intro a:visited{
  background-position: -188px top;
}
#nav li#intro a:hover{
  background-position: -188px -33px;
}
#nav li#intro a:active{
  background-position: -188px -66px;
}

#nav li#partner a:link,#nav li #partner a:visited{
  background-position: -282px top;
}
#nav li#partner a:hover{
  background-position: -282px -33px;
}
#nav li#partner a:active{
  background-position: -282px -66px;
}

#nav li#customer a:link,#nav li #customer a:visited{
  background-position: -376px top;
}
#nav li#customer a:hover{
  background-position: -376px -33px;
}
#nav li#customer a:active{
  background-position: -376px -66px;
}

#nav li#company a:link,#nav li #company a:visited{
  background-position: -470px top;
}
#nav li#company a:hover{
  background-position: -470px -33px;
}
#nav li#company a:active{
  background-position: -470px -66px;
}

#nav li#contact a:link,#nav li #contact a:visited{
  background-position: -564px top;
}
#nav li#contact a:hover{
  background-position: -564px -33px;
}
#nav li#contact a:active{
  background-position: -564px -66px;
}
/*コンテンツ*/
#wrapper{
  width:800px;
  overflow:hidden;
  background: url(img/content_bg.gif) repeat-y;
}

#content{
  float:left;
  width:470px;
  padding-bottom: 100px;
}

#content p{
  padding-bottom: 16px;

}

.about{
  background:url(img/title_bg.gif) repeat-x;
  width:494px;
}

.icon{
  border-bottom:#d3d3d3 1px solid;
  padding-bottom: 10px;
  margin-bottom: 16px;
}
#sidebar{
  float:right;
  width:245px;
  margin-right: 60px;
}
.release{
  background:url(img/title_bg.gif) repeat-x;
}
.news{
  color:#333333;
  padding:14px 0 0 20px;
}
.sample{
  width: 210px;
  padding-left: 20px;
}
/*フッター*/
#footer{
  width:740px;
  height:33px;
  clear:both;
  background:#333333;
}

↓