5月24日（2）　ベーシックな企業サイト

講義の備忘録

↓完成
http://felica.boy.jp/basic_company/

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, print">
<title>サンプル スタイルシート カンパニー</title>
<style>
* {
	margin: 0;
	padding: 0;
	font-size: 13px;
}
body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
	background-image: url(img/body_bg.gif);
	background-repeat: repeat-x;
	background-color: #f9f9f9;
}
p {
	line-height: 1.4;
}
h1 {
	height: 52px;
	padding-left: 25px;
	padding-top: 20px;
}
h3 {
	background: url(img/title_bg.gif);
	background-repeat: repeat-x;
}
h4 {
	font-size: 18px;
	padding-bottom: 20px;
	line-height: 1.2;
}
#container {
	width: 740px;
	margin: 0 auto;
	border: 1px solid #CCC;
	overflow: auto;
}
#nav {
	background-image:url(img/global_nav_bg.gif);
	background-repeat: repeat-x;
}
#nav li { 
	float: left;
	width: 94px;
}
#nav li a{
	display: block;
	overflow: hidden;
	padding-top: 33px;
	height: 0 !important;
	height /**/: 33px;
	width: 100%;
	background-image: url(img/global_nav.jpg);
}
#nav1 a { background-position: 0 0;}
#nav2 a { background-position: -94px 0;}
#nav3 a { background-position: -188px 0;}
#nav4 a { background-position: -282px 0;}
#nav5 a { background-position: -376px 0;}
#nav6 a { background-position: -470px 0;}
#nav7 a { background-position: -564px 0;}

#nav1 a:stay { background-position: 0 -66px;}
#nav2 a:stay { background-position: -94px -66px;}
#nav3 a:stay { background-position: -188px -66px;}
#nav4 a:stay { background-position: -282px -66px;}
#nav5 a:stay { background-position: -376px -66px;}
#nav6 a:stay { background-position: -470px -66px;}
#nav7 a:stay { background-position: -564px -66px;}

#nav1 a:hover { background-position: 0 -33px;}
#nav2 a:hover { background-position: -94px -33px;}
#nav3 a:hover { background-position: -188px -33px;}
#nav4 a:hover { background-position: -282px -33px;}
#nav5 a:hover { background-position: -376px -33px;}
#nav6 a:hover { background-position: -470px -33px;}
#nav7 a:hover { background-position: -564px -33px;}

#about {
	width: 500px;
	border-right: 1px solid #CCC;
	float: left;
	background-color: #fff;
}
#news {
	float: left;
	width: 239px;
	background-color: #fff;
}
.section {
	margin: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #CCC;
}
p.link {
	padding-top: 15px;
}
p.link a{
	color: purple;
	text-decoration: underline;	
}

#section2 {
	margin: 20px;
}

#footer {
	clear: both;
	background-color: #111;
	color: #fff;
	padding: 15px 0 15px 25px;
}

dt {
	color: #666;
}
dd {
	margin-top: 5px;
	margin-bottom: 10px;
}

</style>
</head>
<body>
<div id="container">
<div id="logo">
<h1><a href="/"><img src="img/logo.gif"></a></h1>
</div>
<div id="nav">
<ul>
<li id="nav1"><a href="#">トップページ</a></li>
<li id="nav2"><a href="#">ソリューション</a></li>
<li id="nav3"><a href="#">実績紹介</a></li>
<li id="nav4"><a href="#">パートナー</a></li>
<li id="nav5"><a href="#">カスタマー</a></li>
<li id="nav6"><a href="#">会社概要</a></li>
<li id="nav7"><a href="#">お問い合わせ</a></li>
</ul>
</nav>
<div id="content">
<h2><img src="img/main_copy.jpg"></h2>
<div id="about">
<h3><img src="img/title_about.gif"></h3>
<div class="section">
<h4>スタイルシートによるレイアウトで、<br>表現力と機能性が共存したサイトを構築。</h4>
<p>
サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。
</p>
<p class="link">
<a href="#"><img src="img/arrow.gif"> ソリューションへ</a>
</p>
</div>
<div class="section">
<h4>ウェブサイトを成功に導く、<br>構造設計とインターフェース構築を武器に。</h4>
<p>
100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシートカンパニー。競争に勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。
</p>
<p class="link">
<a href="#"><img src="img/arrow.gif"> 実績紹介へ</a>
</p>
</div>
</div>
<div id="news">
<h3><img src="img/title_news.gif"></h3>
<div id="section2">
<dl>
<dt>2006年4月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt>2006年4月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt>2006年4月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt>2006年4月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt>2006年4月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
</dl>
</div>
</div>
</div>
<div id="footer">
<p>
COPYRIGHT &#169; SAMPLE STYLESHEET COMPANY ALL RIGHTS RESERVED.
</p>
</div>
</div>
</body>
</html>