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

デモへリンク 元ファイルダウンロード ウェブサイトの作り方を学ぶには、やはり、一からどう作っるか説明するのが一番学べると思います。 ということで、今回はクオリティの高いフォトショップのウェブデザインのコーディングを4回に分けて説明しています。 今回は、第4回目の最終回です。 そして、この最終回は、チュートリアルをビデオ録画して送りいたします。ビデオチュートリアルは、文書と違い、簡単に見たい所を飛ばすことや、飛ばし読みなどは難しいですが、実際にどんな用に作られたか目で見ながら学ぶことができるので、文書よりもっと簡単に学べるとおもいます。 過去のチュートリアルを見ていない方は、こちらよりどうぞ。 第1回: ウェブサイト作成の準備&ボディーのバックグラウンドイメージの設定 第2回: メニュー&ロゴ、ソーシャルリンクのCSS&HTML 第3回: jQueryを使ってイメージスライダーの設置 第4回: 最新のプロジェクトのCSS ビデオ講座 ビデオチュートリアルパート1 [youtube=http://www.youtube.com/watch?v=9Hye8gLzyWY&rel=0&w=590] ビデオチュートリアルパート2 [youtube=http://www.youtube.com/watch?v=6GU_TPJ4bUI&rel=0&w=590] ビデオチュートリアルパート3 [youtube=http://www.youtube.com/watch?v=rwwyTOLD_lI&rel=0&w=590] ビデオチュートリアルパート4 [youtube=http://www.youtube.com/watch?v=ddBiJFeL1h0&rel=0&w=590] 今回の分のHTML   今回の分のCSS

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

ウェブサイトの作り方を学ぶには、やはり、一からどう作っるか説明するのが一番学べると思います。 ということで、今回はクオリティの高いフォトショップのウェブデザインのコーディングを4回に分けて説明したいと思います。 これが今回のチュートリアルで作って出来上がったウェブサイトです。 完成したサイト 今回は第2回、メニューとロゴの部分をコーディングしたいと思います。 第1回: ウェブサイト作成の準備&ボディーのバックグラウンドイメージの設定 第2回: メニュー&ロゴ、ソーシャルリンクのCSS&HTML 第3回: jQueryを使ってイメージスライダーの設置 第4回: 最新のプロジェクトのCSS ビデオ講座 1.メニューの画像を用意する 今回は、普通のテキストでもメニューを作ることができますが、ウェブの標準フォントでないフォントを使いたい人の為に、画像を使ってコーディングを行いたいと思います。 それでは、以下の様に2個の画像を用意してください。一個目は、メニューの背景となる画像、2個目はメニューの文字とマウスがメニューの上に来た時とそのページが選択されているときの状態(HoverとActive 状態)の画像を用意します。 ちょっと前までは、各メニューの項目を一個ずつのイメージで作ってましたが、ほんの一年程前から、すべてを一つにまとめた方が、ホームページが早く表示されることが分かり、今ではすっかり定番となっている。 2.メニューのコーディング まずは、今回のコンテンツのサイズは、フォトショップから見ると950pxぐらいですので、まず、ヘッダー用にDIV(今回HTML5のHEADERを使いますが)を作って、その中にメニュー用のDIVの器を作ります。メニュー用のDIVは、950pxで指定して、いつでも中央に来る様に左右のマージンをAutoにします。この950pxと中央に来る様にしてするCSSは何度も使う予定なので、classを作っておきましょう。 次に実際のメニューのコーディングを行っていきます。htmlの方は、ul でリストを以下の様に作ります。 ulにさっき程一個目の画像を背景に指定します。ulのサイズは画像と同じサイズに指定して、上下のスペースをmarginで指定して, float:rightでul全体を右によせます。 ul をfloatしたけど、下のコンテンツを上に来てほしくないので、clearfixのcssをul の一個上のdiv に指定します。 3.フロート クリア フィックス (Float Clear Fix) Floatを指定してコンテンツの位置を調整することは、日常茶飯事です。それによって、したのコンテンツがあがってくることを防ぐ為の、以下のコードは色んなブログで紹介されていますので、スニペット(よく使うコード)として保存しておいてください。 4.メニューの項目をコーディング まず、a は、インラインタグなので、display blockを指定して、height と width を指定できる様にします。float leftを指定して、 a をすべて横に並べて、text-indent を -9999px に指定することで、テキストを見えなくします。次にすべての a に2個目のメニューの画像を指定して、そのあとに一個ずつBackground positionを利用して、位置を調整します。 li:nth-child はCSS3ですので、すべてのブラウザーに対応していません。とは言っても、今現在で対応してないメジャーブラザーはIEだけすけど。。(IE消えてくれないかな。。) IEに対応させる場合は、各 li にIDでも指定してください。 5.Logoの部分のコーディング これは、メニューの部分の繰り返しなので、特に説明する必要ないかと思いますが、何か分からないことがあればコメントを残してください。今回は、CSS3を使わずにやったので、メニューをIEに対応させたい人は、参考にしてください。 6.最終的なコード 最終的なコード以下とデモへのリンクです。 デモ style.css reset.css

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

ウェブサイトの作り方を学ぶには、やはり、一からどう作っるか説明するのが一番学べると思います。 ということで、今回はクオリティの高いフォトショップのウェブデザインのコーディングを4回に分けて説明したいと思います。これが今回のチュートリアルで作って出来上がったウェブサイトです。 完成したサイト このシリーズでは、ホーム(トップ)のページだけをCSS&HTMLにコーディングしますが、トップページができれば、他のページも難なくできると思います。 あと、フォトショップのデザインのチュートリアルは今度ご用意しますので、お楽しみに待っててください。 第1回: ウェブサイト作成の準備&ボディーのバックグラウンドイメージの設定 第2回: メニュー&ロゴ、ソーシャルリンクのCSS&HTML 第3回: jQueryを使ってイメージスライダーの設置 第4回: 最新のプロジェクトのCSS ビデオ講座 1.フリーのフォトショップウェブデザインファイルを入手 今回は、MateusのGrunge Para Portfolio を使います。ダウンロードのリンクは以下になります。 http://www.mateusneves.com/design/layout-grunge-para-portfolio-gratuito/ 2.ウェブページの各部分を見極める フォトショップで開いたら、まず一番最初にすることは。。  考えることです。基本的なウェブサイトは、Background(背景), Header(ヘッダー), Content Area(コンテンツ エリア) と Footer に分けることができます。 今回のデザインの背景から見てみると、背景画像は大きな画像が一つで大丈夫そうですねー。 ヘッダーには、メニュー(ナビゲーションバーNavigationbar)とロゴとソーシャルサイトへのリンクがあって。これは、他のページでも、同じく登場するので、phpなどで、includeするといいと思います。 コンテンツの部分は、最近のプロジェクトのスライダーあって、さらにその下に三つのポートフォリオの画像を載せれる部分があります。これらのコンテンツの部分はページごとに異なりますねー。 フッターの部分はオレンジのバーより下の部分で、ちょっとしたサブロゴと他のページへのリンクがあります。このフッターも全部のページに共通の部分になります。 3.固定レイアウト(Fixed Layout), 柔軟レイアウト (Liquid Layout), エラスティックレイアウト (Elastic Layout) を決める 各レイアウトの詳しい説明は、リファレンスを用意しますが、簡単に説明しますと、画質解像度によってレイアウトが柔軟に対応できものを作るか、ある程度解像度の枠を絞って製作するかということです。固定レイアウトが一番簡単なのと、デザインが保てるで、7割、8割がたのウェブサイトは、固定レイアウトのはずです。 今回のウェブサイトのデザインは、柔軟レイアウトにする意味がなさそうなので、固定レイアウトで行いたいと思います。 4.骨組み(フレームワーク)を作る 骨組みのプランをしっかり作っておくことで、実際のコーディングが楽になります。自分は、簡単にノートにスクラッチして、どの部分がどれくらいの大きさで、どこにどうやって、なにを置いて、どう作るかをノートにまとめます。先に色んな細かい部分をシュミレーションすることで、後に遭遇する問題を前もって理解し、それを回避できるように考えながら、骨組みにコメントなどを入れて作ります。 骨組みは、人によって様々なので、状況と自分に合ったものを作ればいいと思います。ウェブ製作会社のなどでは、しっかりとした物を作って、クライアントと確認しながら進める場合も少なくありません。 その他にも、オンラインツールやダウンロードして使えるソフトウェアも数多く存在しますので、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は現在ブラウザーのマーケットで一番遅くて、一番規格が外れている、バグだらけのブラウザーです。 ファイアーフォックス、クローム若しくは、サファリをゲットしてください。 フォルダーの構成は以下のように設定しておきます。 6.HTML5のDOCTYPE お好きなエディッターを開いて、新規にファイルを作成して、index.htmlに名前を変更して保存して、HTML5用にDOCTYPEやBODYタグを以下のように用意します。あとCSS用のフォルダ−を作ってそこにstyle.cssのファイルを作って、HTMLのHeadの中からリンクさせてください。 7.css リセット 実は、ブラウザーによって様々ですが、ブラザーは基本的なCSSのマークアップを行っているのです。例えば、body や div にマージンが勝手に入っていたり、ul や ol に list style が適用されています。今後スムーズにCSSのマークアップを行うために、css reset のスタイルシートも入れておきましょう。 自分はmeyerweb の CSS Resetシンプルなのを使ってますが、yahoo の YUI CSS Reset など使うのもいいかも知れません。 8.bodyのバックグラウンドーイメージ 今回は大きなイメージ一つでバックグラウンドイメージの作成で良さそうですね。Photoshopからイメージをスライスさせてウェブサイト用にエクスポートさせましょう。 JPG 80%ぐらいで画像を保存してイメージフォルダーに保存してください。 そして、CSSを以下のように書きます。 まぁ、コードを見てもらえばわかると思いますが、bodyにbackgroundとして、さっき程フォトショップからエクスポートしたイメージにリンクさせて、真ん中の上に配置して、繰り返しをなしに設定して、画像が以外の部分の色を設定しました。 これで一気に雰囲気がでてきましたねー。 第一回目はこれで終わりです。第2回は、トップのメニュー&ロゴの部分のチュートリアルになりますので、お楽しみに。 第1回: ウェブサイト作成の準備&ボディーのバックグラウンドイメージの設定 第2回: メニュー&ロゴ、ソーシャルリンクのCSS&HTML 第3回: jQueryを使ってイメージスライダーの設置 第4回: 最新のプロジェクトのCSS ビデオ講座