CSSによるカラムのデザイン

PukiWiki Adv.では、マルチカラムを実装する上で以下のようにコーディングを行なっています。スタイルシートで、@screenを用いている理由は、印刷時や、その他のデバイスで表示する場合、おそらく、メニューバーやサイドバーは不要になる為です。PukiWikiの動作状況に応じて、マルチカラムモードかそうでないかを切り替えます。例えば、編集画面やリスト画面の場合、メニューバーは不要になります。その場合、$layout_classを空欄にしてメニューバー、サイドバーを描画しないようにします。このフラグは、スタイルシートのクラス名を流用して判定に使います。

CSSでのカラムレイアウトなのに幅固定の原理は、ネガティブマージンという技法と、cleafixを組み合わせて実現しています。IE6ではスタイルシートの実装が不十分であるため正確に描画されません。(もっとも、IE6はサポート対象外ですが)

カラムモードの切替
if (arg_check('read') && exist_plugin_convert('menu')) {
	// マルチカラムモード(サイドバーが存在する場合は、3カラムモードとする)
	$layout_class = (exist_plugin_convert('side') && is_page($sidebar) ? 'three-colums' : 'two-colums');
}else{
	// シングルカラムモード
	$layout_class = '';
}
テーマのコーディング
<div id="container" class="<?php echo $layout_class ?>" role="document">
<!-- *** Header *** -->
	<header id="header">
		ヘッダー
	</header>
<!-- *** End Header *** -->

	<div id="wrapper" class="clearfix">
<!-- Center -->
		<div id="main_wrapper">
			<div id="main" role="main">
				<section id="body">
					<?php echo $body."\n" ?>
				</section>
			</div>
		</div<
<?php if ($layout_class == 'three-colums' || $layout_class == 'two-colums')  { ?>
<!-- Left -->
		<aside id="menubar">
			<?php echo do_plugin_convert('menu')."\n" ?>
		</aside>
<?php } ?>

<?php if ($layout_class == 'three-colums')  { ?>
<!-- Right -->
		<aside id="sidebar">
			<?php echo do_plugin_convert('side')."\n" ?>
		</aside>
<?php } ?>
	</div>

	<footer id="footer"  class="clearfix">
		フッター
	</footer>
</div>
スタイルシート
#container {
	width:100%;
	margin: 0 auto;
}

#main{
	background-color: whitesmoke;
}

#main_wrapper #main{
	background-color: white;
	padding:5px;
	margin:0 1.5em;
}

#menubar, #sidebar{
	display:none;
}
@media screen{
	.two-colums #main_wrapper {
		width:100%;
		float:right;
		margin-left:-180px;
	}

	.two-colums #main_wrapper #main {
		margin:0 0 0 180px;
	}

	.two-colums #menubar {
		display:block;
		width:180px;
		float:right;
	}

	.three-colums #wrapper {
		width:100%;
		float:left;
		margin-right:-180px;
	}

	.three-colums #main_wrapper {
		width:100%;
		float:right;
		margin-left:-180px;
	}

	.three-colums #main_wrapper #main {
		margin:0 180px;
		padding:5px;
	}

	.three-colums #menubar {
		display:block;
		width:180px;
		float:right;
	}

	.three-colums #sidebar {
		display:block;
		width:180px;
		float:left;
		right:0;
		position:absolute;
	}

	.three-colums #misc {
		width:100%;
		clear:left;
	}
}