ウェブサイトを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