▲Link
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルスタイルシートカンパニー</title>
<link href="css/5.css" rel="stylesheet" type="text/css"
media="screen, print" />
</head>
<body>
<!--▼container-->
<div id="container">
<!--▼header-->
<div id="header">
<h1 id="logo"><img src="images/logo.gif" width="290"
height="38" alt="サンプルスタイルシートカンパニー"
title="サンプルスタイルシートカンパニー" /></h1>
<!--▼nav-->
<ul id="nav">
<li id="btn01"><a href="#" class="stay"><em>
トップページ</em></a></li>
<li id="btn02"><a href="#"><em>ソリューション</em></a></li>
<li id="btn03"><a href="#"><em>実績紹介</em></a></li>
<li id="btn04"><a href="#"><em>パートナー</em></a></li>
<li id="btn05"><a href="#"><em>カスタマー</em></a></li>
<li id="btn06"><a href="#"> <em>会社概要</em></a></li>
<li id="btn07"><a href="#"><em>お問い合わせ</em></a></li>
</ul>
</div>
<!--▲header-->
<!--▼ｗrapper-->
<div id="wrapper">
<h2><img src="images/main_copy.jpg" width="740" height="272"
alt="あなたにとっての最高のパートナーであるために" /></h2>
<!--▼about-->
<div id="about">
<h3><img src="images/title_about.gif" width="107" height="42"
alt="弊社について" /></h3>
<div class="box">
<h4><img src="images/section_01.gif" width="292" height="38"
alt="スタイルシートによるレイアウトで、表現力と機能性が
共存したサイトを構築。" /></h4>
<p>サンプルスタイルシートカンパニーでは、ウェブサイトの
構築にスタイルシートによるレイアウトを採用しています。
そのため、視覚的に美しい表現力だけでなく、ユーザーにとっ
て使いやすい機能性とを合わせ持ったウェブサイトを提供する
ことができます。
</p>
<a class="arrow" href="#">ソリューションへ</a>
</div>
<div class="box">
<h4><img src="images/section_02.gif" width="297" height="38"
alt="ウェブサイトを成功に導く、構造設計とインターフェース
構築を武器に。" class="about_subtitle" /></h4>
<p>100件あまりのウェブサイト構築経験から培った企画・開発
力をバックボーンにもつ、サンプルスタイルシートカンパニー。
競争に勝ち抜くための構造設計と、インターフェース構築を武器
に、お客様のウェブサイトを成功に導くお手伝いをします。
</p>
<a class="arrow" href="#">実績紹介へ</a>
</div>
</div>
<!--▲about-->
<!--▼news-->
<div id="news">
<h3><img src="images/title_news.gif" width="119" height="42"
alt="ニュースリリース" /></h3>
<dl>
<dt class="days">2006年4月1日</dt>
<dd class="news_contents">サンプルスタイルシートカンパニー
のウェブサイトがリニューアルしました。</dd>
<dt class="days">2006年4月1日</dt>
<dd class="news_contents">サンプルスタイルシートカンパニー
のウェブサイトがリニューアルしました。</dd>
<dt class="days">2006年4月1日</dt>
<dd class="news_contents">サンプルスタイルシートカンパニー
のウェブサイトがリニューアルしました。</dd>
<dt class="days">2006年4月1日</dt>
<dd class="news_contents">サンプルスタイルシートカンパニー
のウェブサイトがリニューアルしました。</dd>
<dt class="days">2006年4月1日</dt>
<dd class="news_contents">サンプルスタイルシートカンパニー
のウェブサイトがリニューアルしました。</dd>
</dl>
</div>
<!--news-->
</div>
<!--▲ｗrapper-->
<!--▼footer-->
<div id="footer">
<p><img src="images/copyright.gif" width="319" height="33"
alt="Copyright © Sample Stylesheet Company All Rights
Reserved." /></p>
</div>
<!--▲footer-->
</div>
<!--▲container-->
</body>
</html>
||>
<h5>CSS</h5>
>||
@charset "utf-8";
/* CSS Document */
/* リセット */
html, body, h1, h2, h3, h4 h5, h6, p, blockquote, pre,
address, ul, li, ol, dl, dt, dd, table, th, td, form, fieldset {
margin: 0;
padding: 0;
line-height: 1.4;
font-size: 1em;
font-family:
"ヒラギノ角ゴ Pro W3",
"Hiragino Kaku Gothic Pro",
"メイリオ", Meiryo, Osaka,
"ＭＳ Ｐゴシック",
"MS PGothic",
sans-serif;
}
body {
color: #333333;
font-size: 75%;
line-height: 1.4;
background: #F4F4F4 url(../images/body_bg.gif)
left top repeat-x;
}
img {
border: none;
vertical-align: bottom;
}
em {
visibility: hidden;
}
a {
color: #003399;
}
a:visited {
color: #333333;
}
a:hover {
color: #0066CC;
}
li {
list-style-type: none;
}
/* レイアウト */
#container {
width: 741px;
margin: 0 auto;
padding: 0;
position: relative;
background: #FFFFFF;
}
#header {
width: 741px;
height: 106px;
}
#nav {
background: #000000 url(../images/global_nav_bg.gif)
repeat-x left top;
width: 741px;
height: 33px; /* height:高さが効かない為、
セットでoverflow:hiddenを付ける */
overflow: hidden;
position: absolute;
top: 73px;
left: 0;
}
#wrapper {
overflow: auto !important;
overflow: /**/: hidden;
width: 100%;
background: #FFFFFF url(../images/content_bg.gif)
repeat-y left top;
padding-bottom: 30px;
}
#about {
float: left;
width: 493px;
}
#news {
width: 246px;
float: left;
padding: 0 0 0 1px;
}
#footer {
color: #FFFFFF;
background: #333333;
clear: both;
}
/* ロゴとナビ */
logo {
position: absolute;
left: 17px;
top: 18px;
}
#nav li {
float: left;
display: inline;
}
#nav li a {
background-image: url(../images/global_nav.gif);
display: block;
width: 94px;
height: 33px;
color: #FFFFFF;
}
#nav li a em {
visibility: hidden;
}
/*擬似クラス背景画像の位置 */
/* 通常 */
#btn01 a {
background-position: 0 0;
}
#btn02 a {
background-position: -94px 0;
}
#btn03 a {
background-position: -188px 0;
}
#btn04 a {
background-position: -282px 0;
}
#btn05 a {
background-position: -376px 0;
}
#btn06 a {
background-position: -470px 0;
}
#btn07 a {
background-position: -564px 0;
}
/* 現在位置 */
#btn01 a:stay {
background-position: 0 -66px;
}
#btn02 a:stay {
background-position: -94px -66px;
}
#btn03 a:stay {
background-position: -188px -66px;
}
#btn04 a:stay {
background-position: -282px -66px;
}
#btn05 a:stay {
background-position: -376px -66px;
}
#btn06 a:stay {
background-position: -470px -66px;
}
#btn07 a:stay {
background-position: -564px -66px;
}
/* オンマウス */
#btn01 a:hover {
background-position: 0 -33px;
}
#btn02 a:hover {
background-position: -94px -33px;
}
#btn03 a:hover {
background-position: -188px -33px;
}
#btn04 a:hover {
background-position: -282px -33px;
}
#btn05 a:hover {
background-position: -376px -33px;
}
#btn06 a:hover {
background-position: -470px -33px;
}
#btn07 a:hover {
background-position: -564px -33px;
}
/* 本文のレイアウト */
#about h3, #news h3 {
color: #FFFFFF;
background: #3452B2 url(../images/title_bg.gif)
repeat-x left top;
}
#about .box {
border-bottom: 1px solid #CCC;
margin: 16px 18px 0 18px
}
#about .box p {
margin: 10px 0;
line-height: 1.6;
}
#about .box .arrow {
background-image: url(../images/arrow.gif)
no-repeat left top;
padding: 0 0 0 14px;
}
#news dl {
margin: 16px 18px 0 18px;
}
#news dl dt {
font-size: 1.2em;
font-weight: bold;
color: #333333;
margin: 10px 0 0 0;
}
#news dl dd {
font-size: 0.875em;
color: #666666;
margin: 2px 0 0 1px;
}
