コリスさんの雑誌風のレイアウトをやってみた。

タイトルの通り、コリスさんのこの記事

[CSS]雑誌風のレイアウト、さぁどう実装する?

をちょっと考えてみた。

こんな具合。
まずはCSS

.post {
	position: relative;
}
.column_01 {
	float: left;
	width: 200px;
	background: #EEE;
}
.column_01:before {
	float: right;
	content:"";
	display: block;
	width: 110px;
	height: 200px;
	background: #CCC;
}
.column_02 {
	float: left;
	width: 200px;
	background: #EEE;
}
.column_02:before {
	float: left;
	content:"";
	display: block;
	width: 110px;
	height: 200px;
	background: #CCC;
}
.image {
	position: absolute;
	left: 100px;
	width: 200px;
	height: 200px;
	background: #FFF;
}

で、htmlのコード

<div class="post">
	<p class="column_01">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	<p class="column_02">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	<img src="blank.png" class="image" alt="" />
</div>

出力見本
cssの書き方が汚いのはご愛嬌。そこまで気が回りませんでした。
:beforeto:afterでboxを作って間を空けつつできた隙間にimgをpositionでねじ込む力技です。
まぁ色がちょっとあれなのと、おそらくIE6では表示がずれるのと、
画像のサイズ変更に柔軟じゃないのが欠点かも。

でもこういう企画は燃えますね。
考えている間はとても楽しかったです。