5つのレイアウトパターンを解剖する

「アメブロのレイアウトをチェックする」で見たとおり、CSS編集可能デザインでのレイアウトタイプは5種類あります。

その実現方法は実に単純で、htmlタグのなかでレイアウトパターンに応じたクラス指定を変更することで実現しています。

各レイアウトのボックス配置方法

アメブロのHTMLの基本構造については、小難しい記事カテゴリーの記事「アメブロのHTMLの基本構造 」と「左右サイドバーと本文ブロックの構成」をご参照ください。

レイアウトパターン(1) 2カラム・メニュー左

htmlで指定されているクラスは、columnAで、次のように宣言されています（htmlタグは禁止タグのため、<>を省略しています）。

html lang="ja" class="columnA" xmlns:og="http://ogp.me/ns#" xmlns:mixi="http://mixi-platform.com/ns#"

columnAクラス指定の部分が、レイアウトパターンに応じて、columnB、columnC、columnD、columnEと書き換えられるだけで、どのレイアウトパターンでもHTMLのソースコードは同じです。

レイアウトパターン(1)ではその構造は下記のように設定されています。

.columnA .skinMainArea {
	float:right;
	width:665px;
}
.columnA .skinSubA {
	float:left;
	width:300px;
}
.columnA .layoutContentsB {
	display:none;
}

div.layoutContentsAのボックス直下のdiv.skinMainAreaボックスがfloat:right;、div.skinSubAボックスがfloat:left;設定でそれぞれ665ピクセル、300ピクセルのwidth指定がされています。幅の狭いサイドメニューであるdiv.layoutContentBはdisplay:none;で非表示指定にされています。

(2) 2カラム・メニュー右

同様に、レイアウトパターン(2)のCSS設定です。

.columnB .skinMainArea {
	float:left;
	width:665px;
}
.columnB .skinSubA {
	float:right;
	width:300px;
}
.columnB .layoutContentsB {
	display:none;
}

div.layoutContentsAのボックス直下のdiv.skinMainAreaボックスがfloat:left;、div.skinSubAボックスがfloat:right;設定でそれぞれ665ピクセル、300ピクセルのwidth指定。レイアウトパターン(1)を逆にフロートしているだけです。幅の狭いサイドメニューであるdiv.layoutContentBはdisplay:none;で非表示指定にされています。

(3) 3カラム・右ワイドメニュー

(1)(2)と違って、サイドメニューが両方表示されるレイアウトパターン(3)のCSS設定です。

.columnC .skinMainArea {
	float:left;
	width:470px;
}
.columnC .skinSubA {
	float:right;
	width:300px;
}
.columnC .layoutContentsB {
	float:left;
}
.columnC .skinSubB {
	width:180px;
}

(2)との違いは、div.skinMainAreaボックスのwidthが470ピクセルとなっている点と、幅の狭いサイドメニューであるdiv.layoutContentBがfloat:left;で表示される点です。幅は、div.layoutContentB直下のブロックであるdiv.skinSubBに対して180pxの指定がされています。比較して見ると、記事のエリアにサイドメニューが割り込んできたような形になります。ブラウザは、まずdiv.layoutContentsBを左にフロートし、残ったエリアにdiv.layoutContentsAを配置。そのなかのdiv.skinMainAreaを左フロート、div.skinSubAを右フロートして表示します。

(4) 3カラム・左ワイドメニュー

レイアウトパターン(4)のCSS設定です。

.columnD .skinMainArea {
	float:right;
	width:470px;
}
.columnD .skinSubA {
	float:left;
	width:300px;
}
.columnD .layoutContentsB {
	float:right;
}
.columnD .skinSubB {
	width:180px;
}

(2)と(3)の関係と(1)と(4)の関係は、右フロートか左フロートかの違いだけで同じですね。

(5) 3カラム・右メニュー

最後に、右側に両方のサイドバーを配置するレイアウトパターン(5)のCSS設定部分です。

.columnE .layoutContentsA {
	overflow:visible;
}
.columnE .skinMainArea {
	float:left;
	width:470px;
}
.columnE .skinSubA {
	float:right;
	width:300px;
}
.columnE .skinSubB {
	float:left;
	margin-left:15px;
	width:180px;
}

まず、.layoutContentsA {overflow:hidden;}とされていた設定を上書きしています。div.layoutContentsA直下のdiv.skinMainAreaを470ピクセル幅で左側にフロートし、div.skinSubAを300ピクセル幅で右側にフロートしています。その親ボックスである.skinContentsAreaの幅は980ピクセルですので、間に空きができてしまいます。この部分にdiv.layoutContentsB直下のdiv.skinSubBを180ピクセル幅で左フロートさせています。冒頭の上書き設定は、この部分を表示するために必要なわけですね。div.skinMainAreaとの間隔を空けるために、div.skinSubBの左側に15ピクセルのマージン設定がされています。

単純だからカスタマイズが容易

こうしてみてみると、非常に単純な仕組みでレイアウト変更が実現されているのがよく分かります。

単純だから見通しもいい。加えて、複雑なカスタマイズにも耐えられるよう、冗長とも思える2重・3重のボックスの入れ子設定もされています。よくできていると思います。