ウェブ学のすすめ

Study of Web Design & Programing

ベーシックな企業サイトの作り方

ポイント

  • HTML5ではContent-Style-Typeは記述しなくてもよい
  • CSSが長くなったら外部ファイルとして読み込むようにする
  • 矢印などの意味のない画像はCSSで背景として指定する
  • contentの背景を表示させるために1px余分に幅を確保する
  • img要素に対してwidth、height属性を指定するとき、pxは必要ない
  • 必要に応じてコメントを入れておく
  • bodyの背景画像を新たに自作(2012/05/25)

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;
}

正当なCSSです!

参考図書

速習Webテクニック スタイルシート 上級レイアウト (Quick Master of Web Technique)

速習Webテクニック スタイルシート 上級レイアウト (Quick Master of Web Technique)