96's blog

WEBサイト制作科　６ヶ月コース

実践演習課題H12C12

課題

HTML

<!doctype html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>H12C12</title>
<linkrel="stylesheet"href="css/H12C12.css">
</head>
<body>

<divid="container">

<divid="header">
<h1><imgsrc="img/12/logo.gif"width="290"height="38"alt="サンプルスタイルシートカンパニー"></h1>

<divid="nav">
<ul>
<liid="indexSelected"><ahref="#">トップページ</a></li>
<liid="solution"><ahref="#">ソリューション</a></li>
<liid="result"><ahref="#">実績紹介</a></li>
<liid="customer"><ahref="#">カスタマー</a></li>
<liid="partner"><ahref="#">パートナー</a></li>
<liid="company"><ahref="#">会社概要</a></li>
<liid="contact"><ahref="#">お問い合わせ</a></li>
</ul>
</div><!-- /nav-->

<divid="billboard">
<imgsrc="img/12/main_copy.jpg"width="740"height="272"alt="あなたにとって最高のパートナーであるために。">
</div><!--/billboard-->

</div><!--/header-->

<divid="wrapper">
<divid="content">
<h2><imgsrc="img/12/title_about.gif"width="107"height="42"alt="弊社について"></h2>
<divclass="section">
<h3><imgsrc="img/12/section_01.gif"width="292"height="38"alt="スタイルシートによるレイアウトで、表現力と機能性が共存したサイトを構築。"></h3>
<p>サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。</p>
<pclass="link"><imgsrc="img/12/arrow.gif"width="11"height="11"alt=""><ahref="#">ソリューションへ</a></p>
</div>
<divclass="section">
<h3><imgsrc="img/12/section_02.gif"width="297"height="38"alt="ウェブサイトを成功に導く、構造設計とインターフェース構築を武器に。"></h3>
<p>100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシートカンパニー。競争に勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。</p>
<pclass="link"><imgsrc="img/12/arrow.gif"width="11"height="11"alt=""><ahref="#">実績紹介へ</a></p>
</div>
</div><!--/content-->

<divid="sidebar">
<h2><imgsrc="img/12/title_news.gif"width="119"height="42"alt="ニュースリリース"></h2>
<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><!--/sidebar-->

</div><!--/wrapper-->

<divid="footer"></div><!--/footer-->
</div><!-- /container-->
</body>
</html>

CSS

@charset "UTF-8";
/* CSS Document */
body , div, h1, h2, h3, p, ul, li, img, dl, dt, dd {
  margin: 0;
  padding: 0;
}
ul{
  list-style: none;
}
body {
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  color: #333333;
  background: url(../img/12/body_bg.gif) repeat-x 0 0;
}
#container{
  width:740px;
  margin: 20px auto;
}
#header{
}
h1 {
  height: 38px;
  margin-bottom: 15px;
}
#nav{
  height: 33px;
  background: url(../img/12/global_nav_bg.gif) repeat-x;
}
#nav ul{
  overflow: hidden;
}
#nav li{
  float: left;
}
#nav li a {
  width: 94px;
  height: 33px;
  display: block;
  background: url(../img/12/global_nav.gif) no-repeat;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
}
#nav li#index a:link {
  background: url(../img/12/global_nav.gif) 0 0;
}
#nav li#index a:hover {
  background: url(../img/12/global_nav.gif) 0 -33px;
}
#nav li#indexSelected a{
  background: url(../img/12/global_nav.gif) 0 -66px;
  cursor: default;
}
#nav li#solution a:link {
  background: url(../img/12/global_nav.gif) -94px 0;
}
#nav li#solution a:hover {
  background: url(../img/12/global_nav.gif) -94px -33px;
}
#nav li#solutionSelected a{
  background: url(../img/12/global_nav.gif) -94px -66px;
  cursor: default;
}
#nav li#result a:link {
  background: url(../img/12/global_nav.gif) -188px 0;
}
#nav li#result a:hover {
  background: url(../img/12/global_nav.gif) -188px -33px;
}
#nav li#resultSelected a{
  background: url(../img/12/global_nav.gif) -188px -66px;
  cursor: default;
}
#nav li#partner a:link {
  background: url(../img/12/global_nav.gif) -282px 0;
}
#nav li#partner a:hover {
  background: url(../img/12/global_nav.gif) -282px -33px;
}
#nav li#partnerSelected a{
  background: url(../img/12/global_nav.gif) -282px -66px;
  cursor: default;
}
#nav li#customer a:link {
  background: url(../img/12/global_nav.gif) -376px 0;
}
#nav li#customer a:hover {
  background: url(../img/12/global_nav.gif) -376px -33px;
}
#nav li#customerSelected a{
  background: url(../img/12/global_nav.gif) -376px -66px;
  cursor: default;
}
#nav li#company a:link {
  background: url(../img/12/global_nav.gif) -470px 0;
}
#nav li#company a:hover {
  background: url(../img/12/global_nav.gif) -470px -33px;
}
#nav li#companySelected a{
  background: url(../img/12/global_nav.gif) -470px -66px;
  cursor: default;
}
#nav li#contact a:link {
  background: url(../img/12/global_nav.gif) -564px 0;
}
#nav li#contact a:hover {
  background: url(../img/12/global_nav.gif) -564px -33px;
}
#nav li#contactSelected a{
  background: url(../img/12/global_nav.gif) -564px -66px;
  cursor: default;
}
#billboard{
  width:740px;
  height:272px;
}
#wrapper{
  overflow: hidden;
}
#content h2,#sidebar h2{
  height:42px;
  margin: 0 0 15px -16px;
}
#content{
  width: 468px;
  background: url(../img/12/title_bg.gif) repeat-x;
  padding: 0 16px;
  float: left;
}
#content .section{
  border-bottom: 2px solid #dfdfdf;
  margin-bottom: 15px;
}
#content h3{
  height:38px;
  margin-bottom: 10px;
}
#content p{
  font-size: 12px;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
#content p.link img{
  margin-right:3px;
}
#sidebar{
  width: 206px;
  border-left: 2px solid #dfdfdf;
  background: url(../img/12/title_bg.gif) repeat-x;
  padding: 0 16px 20px 16px;
  float: right;
}
#sidebar dt{
  font-size: 14px;
  color:#888888;
}
#sidebar dd{
  font-size: 12px;
  margin-bottom: 10px;
}
#footer{
  height:33px;
  background: #323232 url(../img/12/copyright.gif) no-repeat;
  clear:both;
}

f:id:webtm2013:20130826123047p:image