5/23 企業サイト - はれあめはれ

ベーシックな企業サイトを組む

<!DOCTYPE html>
<html lang="ja">
<head>
<charset=UTF-8" />
<title>サンプル スタイルシート カンパニー</title>
<style>
* {
	margin: 0;
	padding: 0;
}
body {
	font-size: 0.7em;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-indent: 1.7;
	width: 741px;
	margin: 0 auto;
  background-image: url(images/body_bg.gif);
  background-repeat: repeat-x;
}
#container {
	overflow: auto;      
}
h1 {
  padding: 20px 0 5px 15px;
  background-color: #fff;
}
#globalNav {
        width: 741px;
        height: 33px;
	background-image: url(images/global_nav_bg.gif);
	background-repeat: repeat-x;
}
ul {
	list-style-type: none;
}
li {
	width: 94px;
	float: left;
}
li a {
	display: block;
	width: 100%;
	height: 0 !important;
	height /**/: 33px;
	padding-top: 33px;
	overflow: hidden;
	background-image: url(global_nav.jpg); 
}

#nav01 a {
	background-position: 0 0;
}
#nav02 a {
	background-position: -94px 0;
}
#nav03 a {
	background-position: -188px 0;
}
#nav04 a {
	background-position: -282px 0;
}
#nav05 a {
	background-position: -376px 0;
}
#nav06 a {
  background-position: -470px 0;
}
#nav07 a {
	background-position: -564px 0;
}	

#nav01 a.stay {
	background-position: 0 -66px;
}
#nav02 a.stay {
	background-position: -94px -66px;
}
#nav03 a.stay {
	background-position: -188px -66px;
}
#nav04 a.stay {
	background-position: -282px -66px;
}
#nav05 a.stay {
	background-position: -376px -66px;
}
#nav06 a.stay {
  background-position: -470px -66px;
}
#nav07 a.stay {
	background-position: -564px -66px;
}

#nav01 a:hover {
	background-position: 0 -33px;
}
#nav02 a:hover {
	background-position: -94px -33px;
}
#nav03 a:hover {
	background-position: -188px -33px;
}
#nav04 a:hover {
	background-position: -282px -33px;
}
#nav05 a:hover {
	background-position: -376px -33px;
}
#nav06 a:hover {
  background-position: -470px -33px;
}
#nav07 a:hover {
	background-position: -564px -33px;
}	
#wrapper {
  overflow: auto;
  background-image: url(images/content_bg.gif);
  background-repeat: repeat-y;
}
h2 {
  height: 272px;
}
#main {
	width: 500px;
	float: left;    
}
h3 {
  background-image: url(images/title_bg.gif);
	background-repeat: repeat-x;
}
.section {
        margin: 10px 20px 15px 15px;
        border-bottom: 1px solid #ccc;        
}
.section p {
        padding: 5px 0;
}
.section .link {
	padding: 5px 0 15px 15px;
	background-image: url(images/arrow.gif);
	background-repeat: no-repeat;
	background-position: 0 8px;
}
#sidebar {
	width:240px;
  float: left;
}
#sidebar h3 {
	background-image: url(images/title_bg.gif);
	background-repeat: repeat-x;
}
dl {
	padding: 10px 15px 15px 15px;
}
dl dt {
	font-size: 0.8em;
	font-weight: bold;
}
dl dd {
        padding-bottom: 10px;
}

#footer {
	height: 33px;
        margin: 0 0 15px 0;
	background-color: #333333;
}
</style>
</head>

<body>
<div id="container">
<h1><img src="images/logo.gif" alt="サンプル スタイルシート カンパニー" width="290" height="38" /></h1>
<div id="globalNav">
<ul>
<li id="nav01"><a href="#" class="stay">トップページ</a></li><li id="nav02"><a href="#">ソリューション</a></li><li id="nav03"><a href="#">実績紹介</a></li><li id="nav04"><a href="#">パートナー</a></li><li id="nav05"><a href="#">カスタマー</a></li><li id="nav06"><a href="#">会社概要</a></li><li id="nav07"><a href="#">お問い合わせ</a></li>
</ul>
</div>
<div id="wrapper">
<h2><img src="images/main_copy.jpg" alt="あなたにとっての最高のパートナーであるために"width="740" height="272"></h2>
<div id="main">
<h3><img src="images/title_about.gif" alt="弊社について" width="107" height="42" /></h3>
<div class="section">
<h4><img src="images/section_01.gif" alt="スタイルシートによるレイアウトで、表現力と機能性が共存したサイトを構築。" width="292" height="38" /></h4>
<p>サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。</p>
<p class="link"><a href="#">ソリューションへ</a></p>
</div>
<div class="section">
<h4><img src="images/section_02.gif" alt="ウェブサイトを成功に導く、構造設計とインターフェース構築を武器に。" width=297"" height=38"" /></h4>
<p>100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシートカンパニー。競争に勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。</p>
<p class="link"><a href="#">実績紹介へ</a></p>
</div>
</div>
<div id="sidebar">
<h3><img src="images/title_news.gif" alt="ニュースリリース" width="119" height="42" /></h3>
<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 id="footer">
<address><img src="images/copyright.gif" alt="COPYRIGHT &copy; SAMPLE STYILESHEET COMPANY ALL RIGHTS RESERVED" width="319" height="33" /></address>
</div>
</div>
</body>
</html>
授業+家での作業で完成しました。
追記：ほかの方のブログを見て、vertical-align を付け忘れたことに気づいた…。