21日目 | 企業系サイト続き、ケーキショップサイト作成

授業

企業系サイト2日目

企業系サイトがうまくいかなかった原因
  • ナビゲーション　CSS Sprite、a:hover指定書き方のミス

×（間違い）
#navi li #navi02 a:hover{
}
○（正解）
#navi02 a:hover{
}

  • navi li{ にfloat:left; を指定していない
  • #navi li a{ にheight:33px; を指定していない
  • ul1リストにaリンクからの背景画像で動きを作るCSS spriteの場合、各liにつけたidセレクタの指定まで全部書ききってから動きを見ること。全部書ききる前にプレビューしても絶対おかしな事になる

今日学校で続きを作った企業系サイト

!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>企業サイトサンプル</title>
<link rel="stylesheet" href="css/style4.css" media="print,screen">
</head>
<body>
<div id="container">
<div id="header">
<h1><img src="img/logo.gif" alt="株式会社CSS"></h1>
<div id="header_info">
<ul>
<li><a href="#">このサイトについて</a></li>
<li><a href="#">お問い合せ</a></li>
<li><a href="#">サイトマップ</a></li>
</ul>
</div>
<div id="navi">
<ul>
<li id="navi01"><a href="#" class="stay"><em>トップページ</em></a></li>
<li id="navi02"><a href="#"><em>ソリューション</em></a></li>
<li id="navi03"><a href="#"><em>実績紹介</em></a></li>
<li id="navi04"><a href="#"><em>パートナー</em></a></li>
<li id="navi05"><a href="#"><em>カスタマー</em></a></li>
<li id="navi06"><a href="#"><em>会社概要</em></a></li>
<li id="navi07"><a href="#"><em>お問い合わせ</em></a></li>
</ul>
</div>
<div id="mainimage"><img src="img/main4.jpg" width="960" height="360" alt="あなたにとって最高のパートナーであるために"></div>
<div id="wrapper">
<div id="primary">
<div id="komoku1">
<p class="midashi">弊社について</p>
<p class="submidashi">about</p>
</div>
<div class="gaiyo">
<h2>スタイルシートによるレイアウトで、表現力と機能性が共存したサイトを構築</h2>
</div>
<div class="section">
<p>
株式会社CSSは創業間もない新しい会社ですがこれまでにない独創的なスタイルのウェブサイト構築をご提案いたします。
</p>
<div class="hyperlink">
<p><a href="#">ソリューションへ</a></p>
</div>
</div>
<div class="gaiyo">
<h2>ウェブサイトを成功に導く、構造設計とインターフェース構築を武器に。</h2>
</div>
<div class="section">
<p>
100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシート、勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。
</p>
<div class="hyperlink">
<p><a href="#">事例紹介</a></p>
</div>
</div>
</div>
</div>
<div id="sidebar"><!-- サイドバー（ニュースリリース用） -->
<div id="komoku2">
<p class="midashi">ニュースリリース</p>
<p class="submidashi">News Release</p>
</div>
<div id="newsrelease">
<dl>
<dt>2012年12月12日</dt>
<dd>ソリューション○○を発売開始しました</dd>
<dt>2012年12月10日</dt>
<dd>ソリューションフェアに出展しました</dd>
<dt>2012年12月1日</dt>
<dd>製品△△△が累計出荷台数１万台を突破しました</dd>
<dt>2012年11月12日</dt>
<dd>Bカンパニーと業務提携しました</dd>
<dt>2012年10月12日</dt>
<dd >東証一部に上場しました</dd>
</dl>
</div>
</div>
</div>
<div id="footer"><p>Copyright &copy;l株式会社CSS　All rights reserved</p>
</div>
</div>
</body>
</html>

@charset "UTF-8";

*{
    margin:0;
		padding:0;
		font-family:
		"メイリオ",
		Meiryo,
		Sans-serif
		;
}
body{
	background-color:#ddd;
	font-size:1em;
}
#container{
	  width:960px;
		margin:0 auto;
		background-color:#fff;
}
#header{
	width:960px;
}
#header_info{
	  position:absolute;
		width:360px;
		font-size:0.75em;
		right:100px;
		top:20px;
}
#header_info li{
    list-style:none;
		display:inline;
}
#header_info li a{
	    color:#1300ac;
}
#header_info a:hover{
	    color:#5ca4ff;
}
em{
  visibility:hidden;
}
#navi{
	top: 73px;
	left: 0;
	width: 960px;
	height: 33px;
	list-style-type: none;
	background: #000000 url(../img/global_nav_bg.gif) left top repeat-x;
}
#navi  li{
	list-style-type:none;
	float:left;
	width:94px;
}
#navi  li a{
	display:block;
	overflow:hidden;
  text-decoration:none;
	height:33px;
  background-image:url(../img/global_nav.gif);
	background-repeat:no-repeat;
}
#navi01 a{
	background-position:0 0;
}
#navi01 a:hover{
	background-position:0 -33px;
}
#navi01 a.stay{
	background-position:0 -66px;
}
#navi02 a{
	background-position:-94px 0;
}
#navi02 a:hover{
	background-position:-94px -33px;
}
#navi03 a{
	background-position:-188px 0;
}
#navi03 a:hover{
	background-position:-188px -33px;
}
#navi04 a{
	background-position:-282px 0;
}
#navi04 a:hover{
	background-position:-282px -33px;
}
#navi05 a{
	background-position:-376px 0;
}
#navi05 a:hover{
	background-position:-376px -33px;
}
#navi06 a{
	background-position:-470px 0;
}
#navi06 a:hover{
	background-position:-470px -33px;
}
#navi07 a{
	background-position:-564px 0;
}
#navi07 a:hover{
	background-position:-564px -33px;
}

#wrapper{
	float:left;
	width:598px;
/*	background-color:#00ca70;*/
	border-right:1px solid #ccc;
}
#primary{
	width:580px;
	}
#komoku1{
	width:580px;
	background-image:url(../img/title_bg.gif);
	background-repeat:repeat-x;
}
.midashi{
	color:#fff;
	font-size:0.875em;
	font-weight:bold;
	padding:2px 0 0 5px;
}
.submidashi{
	color:#fff;
	font-size:0.675em;
	font-weight:normal;
	padding:0 0 2px 5px;
}
.gaiyo{
	width:560px;
	margin:0 10px 10px 10px;
	height:auto;
}
h2{
	font-size:1.1em;
	color:#240073;
	font-weight:normal;
}
.section{
	width:560px;
	margin:0 10px 10px 10px;
	height:auto;
	font-size:0.875em;
	border-bottom:1px solid #ccc;
}
.hyperlink{
	background:url(../img/arrow.gif) left center no-repeat;
	padding:0 0 0 16px;
	color:#0040ff;
	margin:0 0 10px 0;
}
.hyperlink a{
	    color:#1300ac;
}
.hyperlink a:hover{
	    color:#5ca4ff;
}
#sidebar{
	float:right;
	width:340px;
	margin:0 5px;
}
#komoku2{
	width:340px;
	background-image:url(../img/title_bg.gif);
	background-repeat:repeat-x;
}
#newsrelease  dl dt{
  font-size:0.8em;
	color:#ff9c2a;
}
#newsrelease  dl dd{
	font-size:0.85em;
	color:#555;
}

#footer{
	clear:both;
	text-align:center;
	background-color:#333;
	color:#fff;
	font-size:0.65em;
	height:40px;
}


改善の余地大いにあり。
下記の修正を試して見たい。

  • バックグラウンドのシャドウをつける
  • ロゴの改造
  • ナビゲーションの作り変え
  • フッターをコンテナーから開放してみる

サーバーにアップロードの練習

ケーキショップサイトを作る

まだレイアウトが崩れまくっている状態。もう少し目処がついたらダイアリーにアップしよう。