CSSレイアウト
複雑な応用型レイアウト
それぞれのパーツを組み合わせていく
ようやく全てのパーツが揃いました(^^; これから、パーツ使ってページを組み立てていきます。まずは↓のファイルをダウンロードして準備してください。
組み立てていく際に必要になる各パーツをまとめましたZIPで圧縮してあります。Assemble 1
assemble_1.zipを解凍すると、以下のパーツが含まれています。
- Header
- header4.html
- header4.css
- Search
- search4.html
- search4.css
- Services
- services4.html
- services4.css
- Business, Premium
- business_premium4.html
- business_premium4.css
- Categories
- categories5.html
- categories5.css
- Tools
- tools5.html
- tools5.css
- Tips
- tips4.html
- tips4.css
- City, World, More
- city_world_more5.html
- city_world_more5.css
- Footer
- footer3.html
- footer3.css
また、それに加えてyahoo.html, yahoo.cssというファイルが入っているので、このファイルにパーツを組み合わせていくようにします。
さて、準備が整ったら作業を開始します。まずはHTMLの方を組み立てましょう。作業は簡単。ZIPファイル内に入っているyahoo.htmlというHTMLファイルの適切な位置に、それぞれのHTMLを貼り付けていくだけです。
適切な位置・・・というと、悩んでしまうかもしれませんが、複雑な応用型レイアウトのはじめの方で、↓と同じものを紹介してあります。これを参考にすれば、大丈夫、誰にでも出来るハズです。
- base
- header
- left-column
- search
- services
- business, premium
- categories
- right-column
- tool
- tips
- city, world, more
- footer
次に、CSSですが、これも簡単。基本的に全てのCSSファイルの中身をyahoo.cssコピペでOKです。
・・・メンドクサイかもしれませんが、CSSを追加 ⇒ プレビューを繰り返すことで、変化していく様子を確認することが出来てGood! 達成感を味わえるかも。
全てのHTMLファイルと、CSSファイルを組み合わせてyahoo.htmlを表示させると、下のスクリーンショットの様になるでしょう。
以上の手順を行ったものをZIPファイルにまとめました。Assemble 2
次にやるべきことは、レイアウトの乱れを修正することです。上のスクリーンショットでは、国内の都市、世界のYahoo! の横に右カラムが回り込んでしまっています。これは、適切な位置にclear: right (both)を指定したブロック要素を配置することで修正することが出来ます。
また、本家のページと見比べて、水平線やバナー、リンク等 を追加します。
以上の手順を行ったものをZIPファイルにまとめました。Assemble 3
これで、Yahoo! のページの組み立ては終わりました。Yahoo! トップページは完成です(^^)/
でも、もう一つ・・・最適化（？）を行ったソースコードも参考にどうぞ。まとめられる部分をまとめて、ダイエットしてあります。
Assemble 3のCSSファイル（7.34KB）⇒ Assemble 4のCSSファイル（6.12KB）に。 行数も 353行 ⇒ 251行に大幅に減少しています。
最適化を行った完成ソースコードです。Assemble 4
