だいたい完成。

問題点

• 記事の内容が少ないとメニュー部分にフッターがくいこむ！


• Mac版IEで表示が崩れる？かも

改善点

• メニューからフッター部分に色々引っ越し
  →くいこむのも減る？


• @import(*1)でMac版IE用にCSS(*2)を書く…？

ぜぇぜぇ…
もう大変ですホント…
・bodyと全体をくくったDIVに背景画像Yリピートを表示させ
・ヘッダーはマージンを消し表示
・メニューと本文をくくったDIVに幅を設定しposition:relative;(*3)
・本文はヘッダー分を考え上に200pxパディング…なはずがrelativeが効いてるのか
パディング0で左に大きくマージン(*4)
・メニューはrelativeを効かせてpositon:absolute;で↑←0
デザイン的に余白が左にあるのでパディング(*5)レフトでずらす
さらに枠をはみでちゃかっこわるいので幅を指定。
・フッターは背景画像を表示。コピーライトをtext-indent:-9999px(*6)で飛ばす。
ほら完成！！




…てこれPSOブログですよね？

わかんないってば！な人用に
ちょっと解説☆
*1 個別にCSSを読み込ませることが出来る
*2 CascadingStyleSheetの略。Webデザインでは必須。
*3 基点となるポジション。以下のAbsolute等は基点から見た位置を指定。
*4 ボックスの位置をずらす margin-top:20px;で上から20pxずらして表示開始。
*5 ボックス内の位置をずらす padding-right:5px;で右から5pxは表示されない。
*6 テキストの位置をずらす ここでの使い方はテキストを消すという使い方。