CSS: 配置

ボックスの配置方法について学びます。

配置サンプルファイルで実践してみましょう。

表示

visibilityを使って表示・非表示を指定します。非表示を指定しても表示領域は残ります。

displayを使って表示方法を指定します。ブロック要素とインライン要素の表示を切り替えたり、noneを指定して領域ごと非表示に指定します。

1 配置サンプルファイル style.css

#menu { visibility:hidden; }
#menu2 { display:none; }

最初は2段組を想定して#menu2 { display:none; }は残しておきましょう。

positionを使った配置

positionは配置方法を定めます。

2段組を作りながらpositionによる配置を学習しましょう。

固定幅2段組(menu:左静的配置、contents:右絶対配置)

ここではpositionの特性をつかむため、一つ一つ変化を見ながら設定していきます。慣れたら下記の基本形から作ります。

#contentsposition:absoluteを設定して絶対配置にします。絶対配置にした物は他の物の配置に影響しないのでmarginは0にしておきます。

2 配置サンプルファイル style.css

#contents {
    position:absolute;
    margin:0;
}

topleftによる配置位置の指定を行わない場合には、本来の場所に置かれます。#footer#menuに続けて静的配置されるため、重なって表示されます。

さらに、基準点を確認するために配置位置を0pxで追加します。片方だけ設定する使い方もあります。

3 配置サンプルファイル style.css

#contents {
    position:absolute;
    top:0px;
    left:0px;
    margin:0;
}

#contentsの親要素は全てpositionstaticであるため、ページの左上が基準点となっています。

ここではとりあえず#menuの横に並ぶように、topleftの値を調整してみます。(この方法はあまりお勧めしません。理由は後述します。)

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つのブロックが左上でそろって重なった状態になります。
position配置基本形

「右:絶対配置」ですので、基本形から絶対配置のブロックを右に位置調整します。

6 配置サンプルファイル style.css

#contents {
    position:absolute;
    top:0px;
    left:162px;
    margin:0;
}

#blockの幅が決まっている場合には、right:0でも設定できます。

仕上げにページ全体の幅を設定します。

7 配置サンプルファイル style.css

#page { width:584px; }

以上で2段組の設定は終了です。

絶対配置を使った2段組の問題点

一応2段組になっていますが、まだ問題があります。#footerは静的配置の#menuの下に配置されるため、#contents#menuよりも縦に長くなると、#footerと重なってしまいます。

この問題を解決するには、下記のような対策が必要となります。

  • 内容的に常にどちらかが長くなるような工夫をする。
  • 両方の長さをheightで決め、#footerも絶対配置にする。高さがはみ出す可能性があるブロックには、はみ出さないようにoverflow:autoなどでスクロールバーを出す。
  • 両方の長さをheightで決め、はみ出す可能性のある方を静的配置にして#footerを続ける。ブロックには背景色・枠をつけない。

固定幅2段組(menu:左絶対配置、contents:右静的配置)

まずは#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段組の設定は終了です。

IE6以前のブラウザ対応(発展)

CSSの定義にそったブラウザでは正しく表示されますが、IE6には基準点がずれてしまうバグがあるため、#menuが右にずれてしまいます。これを回避するために、#blockwidthを設定します。

10 IE6以前の対応 - 配置サンプルファイル style.css

#page { width:584px; }
#block {
    width:564px;
    position:relative;
    margin:10px;
}

固定幅2段組(左右入れ替え、menu:右絶対配置、contents:左静的配置)

絶対配置の良い点は、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段組の作成手順をまとめます。

  1. 基本形の作成
    1. 絶対配置するものに、「position:absolute; top:0px; left:0px; margin:0px;」を記述する。
    2. 親要素のいずれかに、「position:relative;」を記述して絶対配置の基準点を作る。
    3. 必要な場合には、上下マージンを調整する。
  2. 重なりの解消
    • 絶対配置のブロックを調整する際は、「left:0px;」を変更して位置を調整する。
    • 静的配置のブロックを調整する際には、「margin-left」を変更して絶対配置を重ねる場所を作る。

課題

positionを使った固定幅2段組(左右入れ替え、menu:右静的配置、contents:左絶対配置)のスタイルを作成せよ。

positionを使った固定幅3段組(menu:左絶対配置、contents:中央静的配置、menu2:右絶対配置)のスタイルを作成せよ。

課題の解答