ボックスの配置方法について学びます。
配置サンプルファイルで実践してみましょう。
visibilityを使って表示・非表示を指定します。非表示を指定しても表示領域は残ります。
displayを使って表示方法を指定します。ブロック要素とインライン要素の表示を切り替えたり、noneを指定して領域ごと非表示に指定します。
1 配置サンプルファイル style.css
#menu { visibility:hidden; } #menu2 { display:none; }
最初は2段組を想定して#menu2 { display:none; }は残しておきましょう。
positionは配置方法を定めます。
2段組を作りながらpositionによる配置を学習しましょう。
ここではpositionの特性をつかむため、一つ一つ変化を見ながら設定していきます。慣れたら下記の基本形から作ります。
#contentsにposition:absoluteを設定して絶対配置にします。絶対配置にした物は他の物の配置に影響しないのでmarginは0にしておきます。
2 配置サンプルファイル style.css
#contents { position:absolute; margin:0; }
topやleftによる配置位置の指定を行わない場合には、本来の場所に置かれます。#footerは#menuに続けて静的配置されるため、重なって表示されます。
さらに、基準点を確認するために配置位置を0pxで追加します。片方だけ設定する使い方もあります。
3 配置サンプルファイル style.css
#contents { position:absolute;top:0px;
left:0px;
margin:0; }
#contentsの親要素は全てpositionがstaticであるため、ページの左上が基準点となっています。
ここではとりあえず#menuの横に並ぶように、topとleftの値を調整してみます。(この方法はあまりお勧めしません。理由は後述します。)
4 ページ左上を基準とした配置調整 - 配置サンプルファイル style.css
#contents { position:absolute; top:93px;
left:183px;
margin:0; }
ブラウザの文字サイズによって#headerのサイズが変わるような場合には、topの値を指定することは困難です(余白を含めた長さ全てがemで指定されていないとできない)。
そこで、揃えたい物を全て含むようなdivブロック(包含ブロック、ここでは#block)を追加し、包含ブロックを基準として位置を指定します。同時に、#headerや#footerとの余白の調整は#blockで行うように変更します。これを基本形と呼ぶことにしましょう。
5 基本形 - 配置サンプルファイル style.css
#block {position:relative;
/* 基準点に */
margin:10px;
/* 上下との余白調整 */
} #menu {margin:0;
} #contents { position:absolute; top:0px;
left:0px;
margin:0; }
この段階で、2段組にしたい2つのブロックと包含ブロックの3つのブロックが左上でそろって重なった状態になります。
「右:絶対配置」ですので、基本形から絶対配置のブロックを右に位置調整します。
6 配置サンプルファイル style.css
#contents {
position:absolute;
top:0px;
left:162px;
margin:0;
}
#blockの幅が決まっている場合には、right:0でも設定できます。
仕上げにページ全体の幅を設定します。
7 配置サンプルファイル style.css
#page { width:584px; }
以上で2段組の設定は終了です。
一応2段組になっていますが、まだ問題があります。#footerは静的配置の#menuの下に配置されるため、#contentsが#menuよりも縦に長くなると、#footerと重なってしまいます。
この問題を解決するには、下記のような対策が必要となります。
まずは#menuを絶対配置にした基本形を作ります。先の基本形と違うのは、絶対配置にする対象が異なるだけです。
8 基本形(2) - 配置サンプルファイル style.css
#block {
position:relative;
margin:10px;
}
#menu {
position:absolute;
top:0px;
left:0px;
margin:0;
}
#contents {
margin:0;
}
「右静的配置」ですので、基本形から静的配置のブロックを右に位置調整します。静的配置のブロックを右に移動するには、左マージン(ここでは#menu分)をつけます。
9 配置サンプルファイル style.css
#contents {
margin:0;
margin-left:162px;
}
#blockの幅が決まっている場合には、margin-left:auto;でも設定できます。
以上で、2段組の設定は終了です。
CSSの定義にそったブラウザでは正しく表示されますが、IE6には基準点がずれてしまうバグがあるため、#menuが右にずれてしまいます。これを回避するために、#blockにwidthを設定します。
10 IE6以前の対応 - 配置サンプルファイル style.css
#page { width:584px; }
#block {
width:564px;
position:relative;
margin:10px;
}
絶対配置の良い点は、HTMLで書かれた順番に関わらず好きな場所に配置できることです。
#menuを絶対配置にした基本形(2)を作り、#menuを右に位置設定します。仕上げにページ全体の幅を設定します。
11
#page { width:584px; }
#block { position:relative; margin:10px; } #menu { position:absolute; top:0px;right:0px;
/* leftならばいくつにすべき? */
margin:0; } #contents { margin:0; }
絶対配置を使った2段組の作成手順をまとめます。
positionを使った固定幅2段組(左右入れ替え、menu:右静的配置、contents:左絶対配置)のスタイルを作成せよ。
positionを使った固定幅3段組(menu:左絶対配置、contents:中央静的配置、menu2:右絶対配置)のスタイルを作成せよ。
Programming Laboratory (Shio seminar)