ということで、今回はクオリティの高いフォトショップのウェブデザインのコーディングを４回に分けて説明したいと思います。これが今回のチュートリアルで作って出来上がったウェブサイトです。
このシリーズでは、ホーム（トップ）のページだけをCSS＆HTMLにコーディングしますが、トップページができれば、他のページも難なくできると思います。
あと、フォトショップのデザインのチュートリアルは今度ご用意しますので、お楽しみに待っててください。
- 第１回：
ウェブサイト作成の準備＆ボディーのバックグラウンドイメージの設定 - 第２回：
メニュー＆ロゴ、ソーシャルリンクのCSS&HTML - 第３回：
jQueryを使ってイメージスライダーの設置 - 第４回：
最新のプロジェクトのCSS ビデオ講座
１．フリーのフォトショップウェブデザインファイルを入手
今回は、MateusのGrunge Para Portfolio を使います。ダウンロードのリンクは以下になります。
http://www.mateusneves.com/design/layout-grunge-para-portfolio-gratuito/
２．ウェブページの各部分を見極める
フォトショップで開いたら、まず一番最初にすることは。。 考えることです。基本的なウェブサイトは、Background(背景), Header（ヘッダー）, Content Area（コンテンツ エリア） と Footer に分けることができます。
今回のデザインの背景から見てみると、背景画像は大きな画像が一つで大丈夫そうですねー。
ヘッダーには、メニュー（ナビゲーションバーNavigationbar）とロゴとソーシャルサイトへのリンクがあって。これは、他のページでも、同じく登場するので、phpなどで、includeするといいと思います。
コンテンツの部分は、最近のプロジェクトのスライダーあって、さらにその下に三つのポートフォリオの画像を載せれる部分があります。これらのコンテンツの部分はページごとに異なりますねー。
フッターの部分はオレンジのバーより下の部分で、ちょっとしたサブロゴと他のページへのリンクがあります。このフッターも全部のページに共通の部分になります。
３．固定レイアウト（Fixed Layout), 柔軟レイアウト (Liquid Layout), エラスティックレイアウト (Elastic Layout) を決める
各レイアウトの詳しい説明は、リファレンスを用意しますが、簡単に説明しますと、画質解像度によってレイアウトが柔軟に対応できものを作るか、ある程度解像度の枠を絞って製作するかということです。固定レイアウトが一番簡単なのと、デザインが保てるで、7割、8割がたのウェブサイトは、固定レイアウトのはずです。
今回のウェブサイトのデザインは、柔軟レイアウトにする意味がなさそうなので、固定レイアウトで行いたいと思います。
４．骨組み（フレームワーク）を作る
骨組みのプランをしっかり作っておくことで、実際のコーディングが楽になります。自分は、簡単にノートにスクラッチして、どの部分がどれくらいの大きさで、どこにどうやって、なにを置いて、どう作るかをノートにまとめます。先に色んな細かい部分をシュミレーションすることで、後に遭遇する問題を前もって理解し、それを回避できるように考えながら、骨組みにコメントなどを入れて作ります。
骨組みは、人によって様々なので、状況と自分に合ったものを作ればいいと思います。ウェブ製作会社のなどでは、しっかりとした物を作って、クライアントと確認しながら進める場合も少なくありません。
その他にも、オンラインツールやダウンロードして使えるソフトウェアも数多く存在しますので、Googleってみてください。
http://www.hotgloo.com/
https://gomockingbird.com/
https://cacoo.com/
http://iplotz.com/
http://www.balsamiq.com/products/mockups
５．エディター＆ブラウザー
それでは、コーディングを始めましょう。今回は、マックのCodaを使って行います。HTMLやCSSは過去の物を習うより、将来に必要なHTML５やCSS３をドンドン使っていきます。あと、現在IEを使ってる人はすぐにIEをパソコンから消去してください。IEは現在ブラウザーのマーケットで一番遅くて、一番規格が外れている、バグだらけのブラウザーです。
ファイアーフォックス、クローム若しくは、サファリをゲットしてください。
フォルダーの構成は以下のように設定しておきます。
６．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>
７．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%;
}
８．bodyのバックグラウンドーイメージ
今回は大きなイメージ一つでバックグラウンドイメージの作成で良さそうですね。Photoshopからイメージをスライスさせてウェブサイト用にエクスポートさせましょう。
JPG 80%ぐらいで画像を保存してイメージフォルダーに保存してください。
そして、CSSを以下のように書きます。
body {
background: url(../images/bg_body.jpg) no-repeat center top #1E1A17;
}
まぁ、コードを見てもらえばわかると思いますが、bodyにbackgroundとして、さっき程フォトショップからエクスポートしたイメージにリンクさせて、真ん中の上に配置して、繰り返しをなしに設定して、画像が以外の部分の色を設定しました。
第一回目はこれで終わりです。第２回は、トップのメニュー＆ロゴの部分のチュートリアルになりますので、お楽しみに。
