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

このシリーズでは、ホーム(トップ)のページだけをCSS&HTMLにコーディングしますが、トップページができれば、他のページも難なくできると思います。
あと、フォトショップのデザインのチュートリアルは今度ご用意しますので、お楽しみに待っててください。

1.フリーのフォトショップウェブデザインファイルを入手

今回は、MateusのGrunge Para Portfolio を使います。ダウンロードのリンクは以下になります。
http://www.mateusneves.com/design/layout-grunge-para-portfolio-gratuito/

2.ウェブページの各部分を見極める

フォトショップで開いたら、まず一番最初にすることは。。  考えることです。基本的なウェブサイトは、Background(背景), Header(ヘッダー), Content Area(コンテンツ エリア) と Footer に分けることができます。

今回のデザインの背景から見てみると、背景画像は大きな画像が一つで大丈夫そうですねー。

ヘッダーには、メニュー(ナビゲーションバーNavigationbar)とロゴとソーシャルサイトへのリンクがあって。これは、他のページでも、同じく登場するので、phpなどで、includeするといいと思います。

コンテンツの部分は、最近のプロジェクトのスライダーあって、さらにその下に三つのポートフォリオの画像を載せれる部分があります。これらのコンテンツの部分はページごとに異なりますねー。

フッターの部分はオレンジのバーより下の部分で、ちょっとしたサブロゴと他のページへのリンクがあります。このフッターも全部のページに共通の部分になります。

002 570x200 ウェブサイトをHTML&CSSに基礎から構築 〜 第1回 〜

3.固定レイアウト(Fixed Layout), 柔軟レイアウト (Liquid Layout), エラスティックレイアウト (Elastic Layout) を決める

各レイアウトの詳しい説明は、リファレンスを用意しますが、簡単に説明しますと、画質解像度によってレイアウトが柔軟に対応できものを作るか、ある程度解像度の枠を絞って製作するかということです。固定レイアウトが一番簡単なのと、デザインが保てるで、7割、8割がたのウェブサイトは、固定レイアウトのはずです。

今回のウェブサイトのデザインは、柔軟レイアウトにする意味がなさそうなので、固定レイアウトで行いたいと思います。

4.骨組み(フレームワーク)を作る

骨組みのプランをしっかり作っておくことで、実際のコーディングが楽になります。自分は、簡単にノートにスクラッチして、どの部分がどれくらいの大きさで、どこにどうやって、なにを置いて、どう作るかをノートにまとめます。先に色んな細かい部分をシュミレーションすることで、後に遭遇する問題を前もって理解し、それを回避できるように考えながら、骨組みにコメントなどを入れて作ります。
骨組みは、人によって様々なので、状況と自分に合ったものを作ればいいと思います。ウェブ製作会社のなどでは、しっかりとした物を作って、クライアントと確認しながら進める場合も少なくありません。

003 577x411 ウェブサイトをHTML&CSSに基礎から構築 〜 第1回 〜

その他にも、オンラインツールやダウンロードして使えるソフトウェアも数多く存在しますので、Googleってみてください。

http://www.hotgloo.com/

https://gomockingbird.com/

https://cacoo.com/

http://iplotz.com/

http://www.balsamiq.com/products/mockups

5.エディター&ブラウザー

それでは、コーディングを始めましょう。今回は、マックのCodaを使って行います。HTMLやCSSは過去の物を習うより、将来に必要なHTML5やCSS3をドンドン使っていきます。あと、現在IEを使ってる人はすぐにIEをパソコンから消去してください。IEは現在ブラウザーのマーケットで一番遅くて、一番規格が外れている、バグだらけのブラウザーです。
ファイアーフォックスクローム若しくは、サファリをゲットしてください。

フォルダーの構成は以下のように設定しておきます。
Screen shot 2010 11 07 at 12.16.00 PM 577x432 ウェブサイトをHTML&CSSに基礎から構築 〜 第1回 〜

6.HTML5のDOCTYPE

お好きなエディッターを開いて、新規にファイルを作成して、index.htmlに名前を変更して保存して、HTML5用にDOCTYPEやBODYタグを以下のように用意します。あとCSS用のフォルダ−を作ってそこにstyle.cssのファイルを作って、HTMLのHeadの中からリンクさせてください。

<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>

</body>
</html>

7.css リセット

実は、ブラウザーによって様々ですが、ブラザーは基本的なCSSのマークアップを行っているのです。例えば、body や div にマージンが勝手に入っていたり、ul や ol に list style が適用されています。今後スムーズにCSSのマークアップを行うために、css reset のスタイルシートも入れておきましょう。
自分はmeyerweb の CSS Resetシンプルなのを使ってますが、yahoo の YUI CSS Reset など使うのもいいかも知れません。

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

html[xmlns] .clearfix {
	display: block;
}

* html .clearfix {
	height: 1%;
}

8.bodyのバックグラウンドーイメージ

今回は大きなイメージ一つでバックグラウンドイメージの作成で良さそうですね。Photoshopからイメージをスライスさせてウェブサイト用にエクスポートさせましょう。
JPG 80%ぐらいで画像を保存してイメージフォルダーに保存してください。
そして、CSSを以下のように書きます。

body {
background: url(../images/bg_body.jpg) no-repeat center top #1E1A17;
}

まぁ、コードを見てもらえばわかると思いますが、bodyにbackgroundとして、さっき程フォトショップからエクスポートしたイメージにリンクさせて、真ん中の上に配置して、繰り返しをなしに設定して、画像が以外の部分の色を設定しました。
Screen shot 2010 11 07 at 12.25.51 PM 577x360 ウェブサイトをHTML&CSSに基礎から構築 〜 第1回 〜

これで一気に雰囲気がでてきましたねー。
第一回目はこれで終わりです。第2回は、トップのメニュー&ロゴの部分のチュートリアルになりますので、お楽しみに。