ウェブサイトの作り方を学ぶには、やはり、一からどう作っるか説明するのが一番学べると思います。
ということで、今回はクオリティの高いフォトショップのウェブデザインのコーディングを4回に分けて説明しています。

今回は、第4回目の最終回です。
そして、この最終回は、チュートリアルをビデオ録画して送りいたします。ビデオチュートリアルは、文書と違い、簡単に見たい所を飛ばすことや、飛ばし読みなどは難しいですが、実際にどんな用に作られたか目で見ながら学ぶことができるので、文書よりもっと簡単に学べるとおもいます。

過去のチュートリアルを見ていない方は、こちらよりどうぞ。

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

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

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

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

今回の分のHTML

<div id="recent_project" class="clearfix">
<h2>最新のプロジェクト</h2>
<div>
			<img src="images/recent_project_001.jpg" alt="プロジェクト名1" />

			<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="プロジェクト名2" />

			<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="プロジェクト名3" />

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