ウェブサイトを HTML&CSSに基礎から構築　〜 最終回 〜

ウェブサイトの作り方を学ぶには、やはり、一からどう作っるか説明するのが一番学べると思います。
ということで、今回はクオリティの高いフォトショップのウェブデザインのコーディングを４回に分けて説明しています。
今回は、第４回目の最終回です。
そして、この最終回は、チュートリアルをビデオ録画して送りいたします。ビデオチュートリアルは、文書と違い、簡単に見たい所を飛ばすことや、飛ばし読みなどは難しいですが、実際にどんな用に作られたか目で見ながら学ぶことができるので、文書よりもっと簡単に学べるとおもいます。
過去のチュートリアルを見ていない方は、こちらよりどうぞ。

• 第１回：
  ウェブサイト作成の準備＆ボディーのバックグラウンドイメージの設定
• 第２回：
  メニュー＆ロゴ、ソーシャルリンクのCSS&HTML
• 第３回：
  jQueryを使ってイメージスライダーの設置
• 第４回：
  最新のプロジェクトのCSS ビデオ講座

ビデオチュートリアルパート１

[youtube=http://www.youtube.com/watch?v=9Hye8gLzyWY&rel=0&w=590]

ビデオチュートリアルパート２

[youtube=http://www.youtube.com/watch?v=6GU_TPJ4bUI&rel=0&w=590]

ビデオチュートリアルパート３

[youtube=http://www.youtube.com/watch?v=rwwyTOLD_lI&rel=0&w=590]

ビデオチュートリアルパート４

[youtube=http://www.youtube.com/watch?v=ddBiJFeL1h0&rel=0&w=590]

今回の分のHTML

<div id="recent_project" class="clearfix">
<h2>最新のプロジェクト</h2>
<div>
			<img src="images/recent_project_001.jpg" alt="プロジェクト名１" />
			<span class="address">www.digitalskill.jp</span>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div><img src="images/recent_project_001.jpg" alt="プロジェクト名２" />
			<span class="address">www.digitalskill.jp</span>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div>
			<img src="images/recent_project_001.jpg" alt="プロジェクト名３" />
			<span class="address">www.digitalskill.jp</span>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
	<!-- div#recent_project -->
<div id="footer">
<div>
			<img id="footer_icon" src="images/icon_footer_frase.png" alt="" />
<ul>
	<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>
</ul>
</div>
</div>

今回の分のCSS

/*-------------------------------------------
Recent Project
--------------------------------------------*/
div#recent_project {
	width: 820px;
	padding: 0 65px;
	margin: 0 auto;
	color: #dc703b;
	text-align: left;
	font-size: 11px;
	line-height: 17px;
	display: block;
}
div#recent_project h2 {
	background: url(../images/h2_recent_project.png) no-repeat left center;
	width: 321px;
	height: 27px;
	text-indent: -9999px;
	margin: 25px 0 30px;
}
div#recent_project > div {
	float: left;
	width: 240px;
	margin-right: 50px;
}
div#recent_project > div:last-child {
	margin-right: 0;
}
div#recent_project .address {
	color: white;
}
/*-------------------------------------------
Footer
--------------------------------------------*/
div#footer {
	margin: 50px 0 35px;
	background: url(../images/bg_footer.jpg) no-repeat center center #dd7036;
	height: 80px;
}
div#footer > div {
	width: 820px;
	margin: 0 auto;
}
div#footer > div > img {
	float: left;
	margin-top: 25px;
}
div#footer > div > ul {
	float: right;
	margin-top: 35px;
}
div#footer > div > ul li {
	float: left;
	margin-right: 20px;
}
div#footer > div > ul li a {
	text-decoration: none;
	font-weight: bold;
	color: #35312e;
	font-size: 14px;
}
div#footer > div > ul li:last-child {
	margin-right: 0;
}