サブコンテンツ固定・メインコンテンツ可変のCSSレイアウト

前回の「簡単にCSSレイアウトできるフレームワークを考えてみる」の続きです。はてなのトップ画面のようにサイドメニューの幅が固定表示され、メインコンテンツ幅が伸縮するCSSレイアウトのフレームワークを考えて見ます。

position 指定によるサブ固定・メイン可変

はてなダイアリー管理画面がこの方式を採用してるようです。メインコンテンツにサイドメニューの幅分のmarginを与え、そこの空いたスペースに position:abosolute でサイドメニューを配置する方法です。

サブコンテンツを position でレイアウトした場合の欠点として、以下のような事があげられます。

• • サブコンテンツの包括要素にclearfix等を適用しても、サブコンテンツ分の高さを包括要素に加えることができない
  • 同様の理由でメインコンテンツの高さがサブコンテンツより小さいと、サブコンテンツがフッターにかぶってしまう

position によるCSSレイアウトは汎用性が前提となるフレームワーク向きではないと思いますので、ここではfloatベースでのレイアウトを考えてみたいと思います。

ネガティブマージンによるfloatレイアウト

通常 margin をかける事で隣接要素との間隔をとりますが、margin の値をマイナスにすると（ネガティブマージン）、隣接要素を自要素に重ね合わせることが可能になります。
この性質を利用し、サブコンテンツに固定幅とその幅分のネガティブマージンを与え、メインコンテンツの幅を100%にする事で、サブ固定・メイン可変なレイアウトが可能になります。

但し、サブコンテンツがメインコンテンツに重なった部分が隠れてしまうので、下図のようにサブコンテンツの幅の分の margin をかけたコンテンツ包括要素が、メインコンテンツ内に必要になります。

フレームワークによるクラス定義

以下レイアウトクラスを使用します。

• • div.my-layout_m_s240px
  • div.my-layout_m_s280px
  • div.my-layout_m_s320px

HTMLは以下のようになります。

<div class="my-head-container">
</div>
<div class="my-body-container my-layout_m_s240px">
    <div class="my-main-container">
        <div class="my-container">
        </div>
    </div>
    <div class="my-sub-container">
    </div>
</div>
<div class="my-foot-container">
</div>

サンプルページ
div.my-main-container や div.my-sub-container といったコンテナDIVの位置やサイズが、それらの包括要素に適用したレイアウトクラス名で決定されるという方式は前回と同様です。詳細は前回のエントリを参照ください。
_m_s240px という表記は、メインコンテナが左位置で可変、サブコンテナが右位置で240px固定という意味になります。
div.my-main-container 内の div.my-container には、div.my-sub-container の幅（この例では240px）の margin がかかっており、div.my-container の内容が div.my-sub-container に隠されないようにしています。

フレームワークのCSS定義

フレームワークのCSSは以下のよう定義されてます。

div div.my-layout_m_s240px div.my-main-container,
div.my-layout_m_s240px div.my-main-container{
	width:100%;
	clear:both;
	float:left;
	overflow:hidden;
	zoom:1;
}
div div.my-layout_m_s240px div.my-main-container div.my-container,
div.my-layout_m_s240px div.my-main-container div.my-container{
	width:auto;
	margin-right:240px;
	overflow:hidden;
	zoom:1;
}
div div.my-layout_m_s240px div.my-sub-container,
div.my-layout_m_s240px div.my-sub-container{
	width:240px;
	float:right;
	margin-left:-240px;
	overflow:hidden;
	zoom:1;
}

前回とそれほど差異はありませんが、サブコンテナに、固定幅とそれと同じ幅のネガティブマージンを設定し、コンテンツ用コンテナ(my-container)にも同幅の margin を設定してる部分がキモになります。

ダウンロード

こちらからどうぞ。

• • mycontainer.css