ベーシックな企業サイトの作り方
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen,print"> <title>サンプル スタイルシート カンパニー</title> </head> <body> <!-- ▼#container --> <div id="container"> <!-- ▼#header --> <div id="header"><h1><a href="#"><img src="image/logo.gif" alt="サンプル スタイルシート カンパニー" width="290" height="38"></a></h1></div> <!-- ▲#header --> <!-- ▼#nav --> <div id="nav"> <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> <!-- ▲#nav --> <!-- ▼#wrapper --> <div id="wrapper"> <!-- ▼#content --> <div id="content"> <h2><img src="image/main_copy.jpg" alt="あなたにとっての最高のパートナーであるために" width="740" height="272"></h2> <!-- ▼#about --> <div id="about"> <h3><img src="image/title_about.gif" width="107" height="42" alt="弊社について"></h3> <h4><img src="image/section_01.gif" width="292" height="38" alt="スタイルシートによるレイアウトで、表現力と機能性が共存したサイトを構築。"></h4> <p>サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。</p> <p class="link"><a href="#">ソリューションへ</a></p> <hr> <h4><img src="image/section_02.gif" width="297" height="38" alt="ウェブサイトを成功に導く、構造設計とインターフェイス構築を武器に。"></h4> <p>100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシートカンパニー。競争に勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。</p> <p class="link"><a href="#">実績紹介へ</a></p> <hr> </div> <!-- ▲#about --> <!-- ▼#sidebar --> <div id="sidebar"> <h3><img src="image/title_news.gif" width="119" height="42" alt="ニューリリース"></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> <!-- ▲#sidebar --> </div> <!-- ▲#content --> </div> <!-- ▲#wrapper --> <!-- ▼#footer --> <div id="footer"><address><img src="image/copyright.gif" width="319" height="33" alt="COPYRIGHT@SAMPLE STYLESHEET COMPANY ALL RIGHTS RESERVED"></address></div> <!-- ▲#footer --> </div> <!-- ▲#container --> </body> </html>
CSS
@charset "UTF-8"; /* reset */ * { margin: 0; padding: 0; } body { font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS PGothic", "MS Pゴシック", sans-serif; background-color: #f4f4f4; background-image: url(../image/body_bg.jpg); background-repeat: repeat-x; background-position: top left; } img { border: none; vertical-align: top; } #container { width: 741px; margin: -15px auto 30px; background-color: #fff; } #header { margin: 20px; } /* nav */ #nav { width: 741px; height: 33px; background-image: url(../image/global_nav_bg.gif); background-repeat: repeat-x; } #nav ul{ list-style-type: none; } #nav li{ float: left; width: 94px; height: 33px; } #nav li a { display: block; background-image: url(../image/global_nav.gif); padding: 33px 0 0; height: 0; } /* オフマウス時 */ #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 { width: 741px; } #content { width: 100%; background-image: url(../image/content_bg.gif); background-position: left top; background-repeat: repeat-y; overflow: auto; padding: 0 0 30px; } h3 { background-image: url(../image/title_bg.gif); background-repeat: repeat-x; } /* about */ #about { float: left; width: 493px; } #about h4 { padding: 20px 0 0 20px; } #about p { font-size: 0.7em; padding: 10px 20px 0 18px; line-height: 1.4; } #about p.link { font-size: 0.7em; background-image: url(../image/arrow.gif); background-repeat: no-repeat; background-position: left center; padding: 16px; margin-left: 20px; } #about hr { margin: 10px 20px 0; } /* sidebar */ #sidebar { float: left; width: 246px; padding-left: 1px; } #sidebar dl { padding: 20px 10px 0; } #sidebar dt { font-size: 0.7em; font-weight: bold; } #sidebar dd { font-size: 0.7em; padding: 0 0 16px; } #footer { clear: both; } address { background-color: #333; }
参考図書
速習Webテクニック スタイルシート 上級レイアウト (Quick Master of Web Technique)
- 作者: 河内正紀
- 出版社/メーカー: 技術評論社
- 発売日: 2006/03/29
- メディア: 大型本
- 購入: 19人 クリック: 246回
- この商品を含むブログ (24件) を見る