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