CSS: 配置(3)

可変幅２段組(menu：左固定幅静的配置、contents：右可変幅絶対配置)

#contentsを#menuの右に絶対配置します。固定幅とほぼ同じスタイルです。

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

#block {
    position:relative; /* 基準点 */
    margin:10px;
}
#menu {
    margin:0;
}
#contents {
    width:auto;
    position:absolute;
    top:0px;
    left:162px;
    margin:0;
}

IE6,7では、絶対配置にした可変幅ブロック#contentsの幅計算にバグがあるため横にはみ出してしまいます。

可変幅２段組(menu：左固定幅絶対配置、contents：右可変幅静的配置)

#menuを#contentsの左に絶対配置します。固定幅とほぼ同じスタイルです。

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

#block {
    position:relative; /* 基準点 */
    margin:10px;
}
#menu {
    position:absolute;
    top:0px;
    left:0px;
    margin:0;
}
#contents {
    width:auto;
    margin:0;
    margin-left:162px;
}

IE6,7では、#footerの上枠が消えてしまします。

可変幅２段組(左右入れ替え、menu：右固定幅絶対配置、contents：左可変幅静的配置)

#menuを#contentsの右に絶対配置します。可変幅静的配置のブロックに右マージンをつけ、絶対配置のスペースを確保する必要があります。

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

#block {
    position:relative; /* 基準ブロックに */
    margin:10px;
}
#menu {
    position:absolute;
    top:0px;
    right:0px; /* leftの長さが計算できないため、rightを0で配置 */
    margin:0;
}
#contents {
    width:auto;
    margin:0;
    margin-right:162px; /* 右側に#menuが入るスペースを作成 */
}

IE6,7では、#footerの上枠が消えてしまします。

可変幅２段組(左右入れ替え、menu：右固定幅静的配置、contents：左可変幅絶対配置)

#contentsを#menuの左に絶対配置します。可変幅絶対配置のブロックに右マージンをつけ、絶対配置のスペースを確保する必要があります。

また、静的配置の#menuにつける左マージンは長さが計算できないため、autoを指定します。

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

#block {
    position:relative; /* 基準ブロックに */
    margin:10px;
}
#menu {
    margin:0;
    margin-left:auto; /* leftの長さが計算できないため、leftをauto */
}
#contents {
    width:auto;
    position:absolute;
    top:0px;
    left:0px;
    margin:0;
    margin-right:162px;
}

IE6,7では、絶対配置にした可変幅ブロック#contentsの幅計算にバグがあるため横にはみ出してしまいます。

可変幅３段組(menu：左固定幅絶対配置、contents：中央可変幅静的配置、menu2：右固定幅絶対配置)

課題とします。２段組の例を元に考えて作ってみましょう。

可変幅２段組(menu：左可変幅静的配置、contents：右可変幅絶対配置)

#menu, #contentsを割合指定で可変幅にします。

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

#block {
    position:relative; /* 基準ブロックに */
    margin:10px;
}
#menu {
    width:30%;
    margin:0;
}
#contents {
    width:65%;
    position:absolute;
    top:0px;
    right:0px; /* leftの長さが計算できないため、rightを0で配置 */
    margin:0;
}

幅の割合を足しても100%にならないのは、余白の幅の分を残しているためです。左右余白も割合指定にすると均等に全体が拡大縮小されます。

高さは双方変わるため、#footerは長い方に合わせておくことができます。

可変幅２段組(固定・可変順、先：左固定幅左寄せ、後：右可変幅)

#menuをfloatにし、#contentsは重ならないように左マージンを設定します。

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

#block {
    margin:10px;
    zoom:100%; /* 対IE6,7用。width指定による回り込み解除が使えないため。ブラウザ独自拡張なのでcssはvalidではなくなる。 */
}
#menu {
    float:left;
    margin:0;
}
#contents {
    width:auto;
    margin:0;
    margin-left:162px;
}
#block:after {
    content: "";
    display: block;
    clear: both; /* 左右の回り込みを解除 */
}

左右逆の場合は、floatとmarginの左右を逆に指定すれば実現できます。

#block {
    margin:10px;
}
#menu {
    float:left;
    margin:0;
    margin-bottom:10px; /* #footerのclearに対する下余白 */
}
#contents {
    width:auto;
    margin:0;
    margin-left:162px;
    margin-bottom:10px; /* #footerのclearに対する下余白 */
}
#footer {
    clear:both; /* 回り込み解除 */
    margin-top:0; /* 回り込み解除したら上余白は0 */
}

可変幅２段組(可変・固定順、先：左可変幅、後：右固定幅右寄せ)

html上で可変幅の後に固定幅が記述してある場合の二段組を考えます。

#contentsと#menu2とで実践するため、以下のスタイルをつけます。

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

#menu { display:none; }

6aと同様のスタイルをつけても#menu2は#contentsに並ぶことはできません。floatの性質上、先に記述してある静的配置の右には入ることができないためです。

この場合、htmlに加工が必要となります。

可変幅である#contentsにはfloatを適用できないので、#contentsを含むブロック#l_blockを用意し、それに100％の幅をつけて左寄せにします。

8　配置サンプルファイル haiti.htm

<div id="l_block">
<div id="contents">
 :
</div>
</div>

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

#block {
    margin:10px;
    zoom:100%; /* 対IE6,7用。width指定による回り込み解除が使えないため。ブラウザ独自拡張なのでcssはvalidではなくなる。 */
}
#l_block {
    width:100%;
    float:left;
    margin:0;
    border:0;
}
#contents {
    width:auto;
    margin:0;
    margin-right:162px;
}
#menu2 {
    float:right;
    margin:0;
}
#block:after {
    content: "";
    display: block;
    clear: both; /* 左右の回り込みを解除 */
}

このままでは、幅100%のブロックの右にはmenu2の入るスペースがありませんから、横に並ぶことはできません。

そこで、マイナスの左マージンをつけて重ねます。

9a'　配置サンプルファイル style.css

#l_block {
    margin-right:-162px;
}

左右逆の場合は、floatとmarginの左右を逆に指定すれば実現できます。

#block {
    margin:10px;
}
#l_block {
    width:100%;
    float:left;
    margin:0;
    margin-right:-162px;
    border:0;
}
#contents {
    width:auto;
    margin:0;
    margin-right:162px;
    margin-bottom:10px; /* #footerのclearに対する下余白 */
}
#menu2 {
    float:right;
    margin:0;
    margin-bottom:10px; /* #footerのclearに対する下余白 */
}
#footer {
    clear:both; /* 回り込み解除 */
    margin-top:0; /* 回り込み解除したら上余白は0 */
}

可変幅３段組(固定・可変・固定順、先：左固定幅左寄せ、中：中央可変幅、後：左固定幅右寄せ)

可変・固定順を含むため、先ほどと同様にl_blockが必要になります。今回は、#menuと#contentsを含む#l_blockにします。

回り込み解除の指定方法で２種類のソースを乗せておきます。

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

#block {
    margin:10px;
    zoom:100%; /* 対IE6,7用。width指定による回り込み解除が使えないため。ブラウザ独自拡張なのでcssはvalidではなくなる。 */
}
#l_block {
    width:100%;
    float:left;
    margin:0;
    margin-right:-162px;
    border:0;
}
#menu {
    float:left;
    margin:0;
}
#contents {
    width:auto;
    margin:0;
    margin-left:162px;
    margin-right:162px;
}
#menu2 {
    float:right;
    margin:0;
}
#block:after {
    content: "";
    display: block;
    clear: both; /* 左右の回り込みを解除 */
}

#block {
    margin:10px;
}
#l_block {
    width:100%;
    float:left;
    margin:0;
    margin-right:-162px;
    border:0;
}
#menu {
    float:left;
    margin:0;
    margin-bottom:10px; /* #footerのclearに対する下余白 */
}
#contents {
    width:auto;
    margin:0;
    margin-left:162px;
    margin-right:162px;
    margin-bottom:10px; /* #footerのclearに対する下余白 */
}
#menu2 {
    float:right;
    margin:0;
    margin-bottom:10px; /* #footerのclearに対する下余白 */
}
#footer {
    clear:both; /* 回り込み解除 */
    margin-top:0; /* 回り込み解除したら上余白は0 */
}

htmlに手を加えるのはあまり得策とは言えません。他の方法としては、menu2を絶対配置にする方法があります。（課題）