CSSレイアウト実践 企業系ウェブページ作成
ウェブページ作成：作成所要時間200分程度
ウェブで画像素材選定、Photoshop画像編集、ナビボタン作成、CSSレイアウト
・TIPS
div要素：グループ化するため
どこからどこまでなのか、名前をつける
アウトライン：見出しのツリー構造
検索エンジンが重視するもので、これが破綻しているとSEO対策に不利
////////////////////////以下、ソースコード////////////////////////////
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>課題：企業系サイト</title>
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<div id="container">
<div id="header">
<h1><em>サンプルスタイルシートカンパニー</em></h1>
<div id="nav">
<ul>
<li id="top"><a href="#"><em>トップページ</em></a></li>
<li id="sol"><a href="#"><em>ソリューション</em></a></li>
<li id="ach"><a href="#"><em>実績紹介</em></a></li>
<li id="par"><a href="#"><em>パートナー</em></a></li>
<li id="cus"><a href="#"><em>カスタマー</em></a></li>
<li id="com"><a href="#"><em>会社概要</em></a></li>
<li id="con"><a href="#"><em>お問い合わせ</em></a></li>
</ul>
</div><!--nav-->
<h2><em>あなたにとっての最高のパートナーであるために</em></h2>
</div><!--header-->
<div id="wrapper">
<div id="content">
<h3>弊社について</h3>
<h4>スタイルシートによるレイアウトで、<br>表現力と機能性が共存したサイトを構築。</h4>
<p>サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。</p>
<p class="link"><a href="#">ソリューションへ</a></p>
<h4>ウェブサイトを成功に導く、<br>構造設計とインターフェース構築を武器に。</h4>
<p>100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシートカンパニー。競争に勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。</p>
<p class="link"><a href="#">実績紹介へ</a></p>
</div><!--content-->
<div id="sidebar">
<h3>ニュースリリース</h3>
<dl>
<dt><a href="#">2014年7月1日</a></dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt><a href="#">2014年6月1日</a></dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt><a href="#">2014年5月1日</a></dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt><a href="#">2014年4月1日</a></dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt><a href="#">2014年3月1日</a></dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
</dl>
</div><!--sidebar-->
</div><!--wrapper-->
</div><!--container-->
<div id="footer">
<p><small>Copyright © Sample Stylesheet Company All Rights Reserved.</small></p>
<ul class="nav">
<li><a href="#">トップページ</a></li>
<li><a href="#">ソリューション</a></li>
<li><a href="#">実績紹介</a></li>
<li><a href="#">パートナー</a></li>
<li><a href="#">カスタマー</a></li>
<li><a href="#">会社概要</a></li>
<li class="last"><a href="#">お問い合わせ</a></li>
</ul>
</div><!--footer-->
</body>
</html>
@charset "utf-8";
/* reset */
html, body, div, h1, h2, h3, h4, p, ul, dl, dt {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic Pro",
Meiryo,
sans-serif;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
border: none;
vertical-align: bottom;
}
em {
visibility: hidden;
}
/* layout */
body {
background: #CCC;
}
#container {
width: 945px;
background: #FFF;
height: auto;
margin: 0 auto;
overflow: hidden;
}
#header {
width: 945px;
height: auto;
overflow: hidden;
}
#header h1 {
background:url(../img/logo.jpg) no-repeat;
width: 290px;
height: 38px;
margin: 10px 0 10px 10px;
}
#header h2 {
background:url(../img/011.jpg) no-repeat center;
width: 925px;
height: 320px;
margin: 10px 10px 0 10px;
}
#nav {
width: 945px;
height: 45px;
background:url(../img/btnb.jpg) no-repeat;
}
#nav li {
float: left;
display: inline;
}
#nav li a {
width: 135px;
height: 45px;
display: block;
}
#nav li#top a:hover {
background:url(../img/btnb.jpg) left -55px;
}
#nav li#sol a:hover {
background:url(../img/btnb.jpg) -135px -55px;
}
#nav li#ach a:hover {
background:url(../img/btnb.jpg) -270px -55px;
}
#nav li#par a:hover {
background:url(../img/btnb.jpg) -405px -55px;
}
#nav li#cus a:hover {
background:url(../img/btnb.jpg) -540px -55px;
}
#nav li#com a:hover {
background:url(../img/btnb.jpg) -675px -55px;
}
#nav li#con a:hover {
background:url(../img/btnb.jpg) -810px -55px;
}
#wrapper {
width: 925px;
padding: 10px;
}
#content {
float: left;
width: 595px;
height: auto;
margin-bottom: 10px;
}
#content h3 {
font-size: 16px;
background: #444;
color: #FFF;
line-height: 3.0;
padding-left:20px;
}
#content h4 {
line-height: 1.3;
border-left: 15px solid #444;
margin: 16px 0 0 18px;
}
#content p {
font-size: 0.8em;
line-height: 1.5;
margin: 16px 10px 0 18px;
}
#sidebar {
float: right;
width: 320px;
border-left: 1px dotted #444;
height: auto;
margin-bottom: 10px;
}
#sidebar h3 {
font-size: 16px;
background: #444;
color: #FFF;
line-height: 3.0;
margin-left: 10px;
padding-left:20px;
}
#sidebar dl {
font-size: 0.8em;
margin: 15px 0 0 10px;
}
#sidebar dt {
font-weight: bold;
margin: 0 0 5px 20px;
}
#sidebar dd {
line-height: 1.5;
margin: 0 10px 15px 30px;
}
#footer {
text-align: center;
color: #FFF;
background: #444;
height: 100px;
}
#footer p {
line-height: 3.0;
}
#footer ul {
}
#footer li {
color: #FFF;
display: inline;
border-right: 1px solid #FFF;
}
#footer ul.nav {
}
#footer li.last {
border-right: none;
}
#footer li a:hover {
color: #FFF;
}
#footer li a:link, #footer li a:visited {
color: #FFF;
padding: 0 8px;
}
#footer li a:hover {
color: #F00;
}
