H12 C12

授業　演習問題 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>H12</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1><img src="img/logo.gif" width="290" height="38" alt="サンプルスタイルシートカンパニー"></h1>
<div id="nav">
<ul>
  <li id="top"><a href="#"><span>トップページ</span></a></li>
  <li id="solution"><a href="#"><span>ソリューション</span></a></li>
  <li id="achivement"><a href="#"><span>実績紹介</span></a></li>
  <li id="partners"><a href="#"><span>パートナー</span></a></li>
  <li id="customers"><a href="#"><span>カスタマー</span></a></li>
  <li id="company"><a href="#"><span>会社概要</span></a></li>
  <li id="contact"><a href="#"><span>お問い合わせ</span></a></li>
</ul>
</div>
</div><!-- /header -->

<div id="sidebar">
<h2><img src="img/main_copy.jpg" width="740" height="272" alt="あなたにとっての最高のパートナーであるために"></h2>
</div>

<div id="content">
<div class="section01">
<h3><img src="img/title_about.gif" width="107" height="42" alt="弊社について"></h3>
<ul>
<li><h4><img src="img/section_01.gif" width="292" height="38" alt="スタイルシートによるレイアウトで,表現力と機能性が共存したサイトを構築。"></h4></li>
<li><p>
サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。</p></li>

<li><p><a href="#">ソリューションへ</a></p></li>
</ul>
<ul>
<li><h4><img src="img/section_02.gif" width="297" height="38" alt="ウェブサイトを成功に導く、<br>構造設計とインターフェース構築を武器に。"></h4></li>
<li><p>
100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシートカンパニー。競争に勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。
</p></li>
<li><p><a href="#">実績紹介へ</a></p></li>
</ul>
</div>
<div class="section02">
<h3><img src="img/title_news.gif" width="119" height="42" alt="ニュースリリース"></h3>
<dl>
<dt>2013年7月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt>2013年7月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt>2013年7月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt>2013年7月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt>2013年7月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
</dl>
</div>
</div><!-- /wrapper -->

<div id="footer">
<address><img src="img/copyright.gif" width="319" height="33" alt="Copyright (c) Sample Stylesheet Company All Rights Reserved."></address></div>

</div><!-- /container -->
</body>
</html>

@charset "UTF-8";
body,div,class,ul,li,dl,dt,dd,a,span,img,h1,h2,h3{
  margin: 0;
  padding: 0;
}
ul{
  list-style: none;
}
#nav li span{
  visibility: hidden;
}
/* layout */
body{
  font-size: 12px;
  font-family:
  "Hiragino Kaku Gothic ProN",
  Meiryo,
  sans-serif;
  line-height: 1.3;
  background: url(img/body_bg.gif) repeat-x;
}
#container{
  width: 741px;
  margin: 0 auto;
  padding: 20px 0 0 0;
}
#nav{
  width: 741px;
  height: 33px;
  background: url(img/global_nav_bg.gif) repeat-x 659px top;
}
#sidebar{
  width: 740px;
  height: 272px;
}
#content{
  width: 741px;
  height: auto;
  overflow: hidden;
  background: url(img/content_bg.gif);
}
#footer{
  width: 740px;
  height: 33px;
  clear: both;
  background: #333;
}
/* 子孫 */
h1{
  width: 290px;
  height: 38px;
  padding-bottom: 15px;
}
#nav ul{
  width: 658px;
  height: 33px;
}
#nav li{
  float: left;
}
#nav li a{
  width: 94px;
  height: 33px;
  display: block;
  background: url(img/global_nav.gif) left top;
}
li#top a,li#top a:active{
  background-position:  left -66px;
}
li#solution a{
  background-position: -94px top;
}
li#solution a:hover{
  background-position: -94px -33px;
}
li#solution a:active{
  background-position:  -94px -66px;
}
li#achivement a{
  background-position: -188px top;
}
li#achivement a:hover{
  background-position: -188px -33px;
}
li#achivement a:active{
  background-position:  -188px -66px;
}
li#partners a{
  background-position: -282px top;
}
li#partners a:hover{
  background-position: -282px -33px;
}
li#partners a:active{
  background-position:  -282px -66px;
}
li#customers a{
  background-position: -376px top;
}
li#customers a:hover{
  background-position: -376px -33px;
}
li#customers a:active{
  background-position:  -376px -66px;
}
li#company a{
  background-position: -470px top;
}
li#company a:hover{
  background-position: -470px -33px;
}
li#company a:active{
  background-position:  -470px -66px;
}
li#contact a{
  background-position: -564px top;
}
li#contact a:hover{
  background-position: -564px -33px;
}
li#contact a:active{
  background-position:  -564px -66px;
}
h3{
  background: url(img/title_bg.gif) repeat-x;
}
.section01{
  float: left;
  width: 493px;
}
.section01 ul{
  width: 93%;
  border-bottom: 1px solid #999;
  padding: 5px 0 0px 10px;
}
.section01 a{
  color: blue;
  padding-left: 16px;
  background: url(img/arrow.gif) no-repeat left 2px;
}
.section02{
  width: 247px;
  float: right;
}
.section02 dl{
  width: 87%;
  padding: 5px 0 0 15px;
}
.section02 dt{
  margin-bottom: 5px;
}
.section02 dd{
  margin-bottom: 14px;
}