ウェブサイトをHTML&CSSに基礎から構築 〜 第１回 〜
ウェブサイトの作り方を学ぶには、やはり、一からどう作っるか説明するのが一番学べると思います。 ということで、今回はクオリティの高いフォトショップのウェブデザインのコーディングを４回に分けて説明したいと思います。これが今回のチュートリアルで作って出来上がったウェブサイトです。 完成したサイト このシリーズでは、ホーム（トップ）のページだけを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の中からリンクさせてください。 ７．css リセット 実は、ブラウザーによって様々ですが、ブラザーは基本的なCSSのマークアップを行っているのです。例えば、body や div にマージンが勝手に入っていたり、ul や ol に list style が適用されています。今後スムーズにCSSのマークアップを行うために、css reset のスタイルシートも入れておきましょう。 自分はmeyerweb の CSS Resetシンプルなのを使ってますが、yahoo の YUI CSS Reset など使うのもいいかも知れません。 ８．bodyのバックグラウンドーイメージ 今回は大きなイメージ一つでバックグラウンドイメージの作成で良さそうですね。Photoshopからイメージをスライスさせてウェブサイト用にエクスポートさせましょう。 JPG 80%ぐらいで画像を保存してイメージフォルダーに保存してください。 そして、CSSを以下のように書きます。 まぁ、コードを見てもらえばわかると思いますが、bodyにbackgroundとして、さっき程フォトショップからエクスポートしたイメージにリンクさせて、真ん中の上に配置して、繰り返しをなしに設定して、画像が以外の部分の色を設定しました。 これで一気に雰囲気がでてきましたねー。 第一回目はこれで終わりです。第２回は、トップのメニュー＆ロゴの部分のチュートリアルになりますので、お楽しみに。 第１回： ウェブサイト作成の準備＆ボディーのバックグラウンドイメージの設定 第２回： メニュー＆ロゴ、ソーシャルリンクのCSS&HTML 第３回： jQueryを使ってイメージスライダーの設置 第４回： 最新のプロジェクトのCSS ビデオ講座
