Mac mini ミニ大作戦！
第7回 目指せ、完全CSSレイアウト
（3段組チャレンジ編）
いよいよ当企画のメインディッシュ、3段組に挑戦。果たしてちゃんと辻褄を合わせられるだろうか不安だが、失敗したり自己解決できない状況に陥ったら恥を忍んでそのままレポートする予定。おいおい。
まずは親のBから
前回、何となくヘッダ＆フッタを形にできた。そこで今回はようやくコンテンツ部分に手を付けるわけだけれど、今一度その構造を確認しておく。前回でA,Cが終わった。
今回は上図の中にある、B(P(y,z),x)の部分を作成。第5回で一番重要なコンテンツ部を内包したB領域を<div id="pagebody">と名付けた。ここでは4つのブロックが入れ子状態になっていて、それぞれのブロックを正確な位置に置くために、ピクセル単位で細かく指定していく。
第1回の最初のブロック図と現在テーブルで組んである寸法を確認しつつ、幅の長さをピクセルで指定。ではまず一番親となるpagebodyから。前回作成したCSSに付け加えていく。
@charset "shift_jis";
/*ページ全体
________________________*/
body { margin: 0; padding: 0 }
h1,h2,h3,h4,h5,h6,p,dl { margin: 0; }
/*ヘッダ
________________________*/
#header { text-align: center;}
/*フッタ
________________________*/
#footer { background-image: url("footer.jpg"); background-repeat: no-repeat; background-position: center; text-align: center;}
#footer p { text-align: center; padding-top: 60px; padding-bottom: 35px }
/*ここからページ中段3段組
________________________*/
#pagebody { width: 750px; text-align: center;}
ダメダメである‥。pagebody部分のコンテンツがすべて中央揃えになってしまっている。前回、ヘッダを中央へ配置するのにtext-align: centerを使ったけれど、やはりこれは素材に適用されるものであって、<div>で括った領域全体をセンタリングするわけではなかった。じゃあ前回ヘッダに指定して上手く行ったのは間違いなのだ。たまたま画像1枚だったから、見かけ上期待通りに配置されただけで、#headerブロックは中央揃えになっていないのだな‥。やれやれ。
で、参考書を調べると、ブロック要素にはマージンをうまく活用することで中央揃えを実現できるらしい。それは左右のマージンを「auto」にしてやればいいそうな。なるほど、言われて見れば。
@charset "shift_jis";
/*ページ全体
________________________*/
body { margin: 0; padding: 0 }
h1,h2,h3,h4,h5,h6,p,dl { margin: 0; }
/*ヘッダ
________________________*/
#header { text-align: center;}
/*フッタ
________________________*/
#footer { background-image: url("footer.jpg"); background-repeat: no-repeat; background-position: center; text-align: center;}
#footer p { text-align: center; padding-top: 60px; padding-bottom: 35px }
/*ここからページ中段3段組
________________________*/
#pagebody { margin-right: auto; margin-left: auto; width: 750px; }
おお、Bブロック（#pagebody）がちゃんとセンタリングされてるじゃないですか。そのブロックの中身は普通に左寄せになっている。これこれ、これですよ。では早速、次
Bの中で「xを左、Pを右」
Bブロックの中に、左メニューの領域「x」には<div id="nav">と名前を付けてあって、その右の領域「P」には同じく「content」と名付けた。Bの中でxは左、Pは右になる。ここで新しく「float」というプロパティが登場。これを使って右へ左へ振り分ける。その際、各領域の幅を指定しておくこと。
@charset "shift_jis";
/*ページ全体
________________________*/
body { margin: 0; padding: 0 }
h1,h2,h3,h4,h5,h6,p,dl { margin: 0; }
/*ヘッダ
________________________*/
#header { text-align: center;}
/*フッタ
________________________*/
#footer { background-image: url("footer.jpg"); background-repeat: no-repeat; background-position: center; text-align: center;}
#footer p { text-align: center; padding-top: 60px; padding-bottom: 35px }
/*ここからページ中段3段組
________________________*/
#pagebody { margin-right: auto; margin-left: auto; width: 750px; }
#nav {float: left ; width: 170px;}
#content {float: right; width: 580px;}
floatには実体がない
参考書によると「floatは領域の位置を指定するけれど、中身が無い」ということらしい。だからフッタがBの部分を無視してヘッダの直下まで繰り上がってしまっているのだ。僕としてはコンテンツ部分に仮のテキストを入れてあるじゃないかと反論したくなるのだが、世の中、ワケの分からないルールは山ほどあるものです。で、参考書にこの現象を回避するお呪いが書いてあったので、せっせとそれをタイプする。
@charset "shift_jis";
/*ページ全体
________________________*/
body { margin: 0; padding: 0 }
h1,h2,h3,h4,h5,h6,p,dl { margin: 0; }
/*ヘッダ
________________________*/
#header { text-align: center;}
/*フッタ
________________________*/
#footer { background-image: url("footer.jpg"); background-repeat: no-repeat; background-position: center; text-align: center;}
#footer p { text-align: center; padding-top: 60px; padding-bottom: 35px }
/*ここからページ中段3段組
________________________*/
#pagebody { margin-right: auto; margin-left: auto; width: 750px; }
#nav {float: left ; width: 170px;}
#content {float: right; width: 580px;}
#pagebody:after { /*この部分、おまじない*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
この状態で挙動を確認してみる。
おおっ、よく意味は分からないものの、これですよコレ。さ、あまり深く考えず次へ行こう、次。
Pの中で「yを左、zを右」
次はPの中にあるメインコンテンツ部分（<div id="main">）と「キラーコンテンツ」画像としてまとめてしまった右メニュー（<div id="sub">）を振り分ける。ここでもfloatとwidthで指定していくんだけど、CSS内で記述する場所とか順番は気にしなくてもいいみたい。一応感覚的に分かり易いように赤字の場所へ記述。
@charset "shift_jis";
/*ページ全体
________________________*/
body { margin: 0; padding: 0 }
h1,h2,h3,h4,h5,h6,p,dl { margin: 0; }
/*ヘッダ
________________________*/
#header { text-align: center;}
/*フッタ
________________________*/
#footer { background-image: url("footer.jpg"); background-repeat: no-repeat; background-position: center; text-align: center;}
#footer p { text-align: center; padding-top: 60px; padding-bottom: 35px }
/*ここからページ中段3段組
________________________*/
#pagebody { margin-right: auto; margin-left: auto; width: 750px; }
#nav {float: left ; width: 170px;}
#content {float: right; width: 580px;}
#main {float: left; width: 415px;}
#sub {float: right; width: 165px;}
#pagebody:after { /*この部分、おまじない*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
この状態で挙動を確認してみる。
出来た！出来たとよ〜。いやあ、長い道のりだった。しかしここからがもっと大変。サンプルは各ブロック要素の配置が乱れに乱れている。これをキッチリ希望の場所へ配置して、オマケに背景画像もうまく表示されるように調整していく必要がある。
フッタの指定を間違えていた
そういえば前回、フッタの背景画像全体を表示させるのに、<p>タグにパディングで余白を付けたけれど、やっぱりそれは違うじゃんと今回の勉強をしていて気付いた。つまりフッタ領域の背景画像の全体がうまく表示できなかったのは、CSS内で#footerの幅widthと、高さheightを指定していなかったからなのだ。が〜ん、単純。
@charset "shift_jis";
/*ページ全体
________________________*/
body { margin: 0; padding: 0 }
h1,h2,h3,h4,h5,h6,p,dl { margin: 0; }
/*ヘッダ
________________________*/
#header { text-align: center;}
/*フッタ
________________________*/
#footer { background-image: url("footer.jpg"); background-repeat: no-repeat; width: 750px; height: 95px; margin-right: auto; margin-left: auto;}
/*ここからページ中段3段組
________________________*/
#pagebody { margin-right: auto; margin-left: auto; width: 750px; }
#nav {float: left ; width: 170px;}
#content {float: right; width: 580px;}
#main {float: left; width: 415px;}
#sub {float: right; width: 165px;}
#pagebody:after { /*この部分、おまじない*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
それまで記述していた#footer p{ }を削除しても大丈夫。なのでコピーライトの文章はデフォルトの左上に移動しているけれど、位置調整は今後詰めていけばOK。ヘッダ部分の記述も修正した方がいいかもね。
やっとまともに見られるレイアウトになった。しかしまだまだ文字の装飾や、リスト部分の画像への置き換えなど、やらねばならぬ作業はいっぱいある。というか、ミニ・カスタマイズはどうなってるんだ？
|
