サイトレイアウト

レスポンシブデザイン

オブジェクトを％指定などを施し、それぞれの並びは大きく変わらない。

リキッドレイアウト

グリッドシステムなどを用いてボックスを並べており、個々のオブジェクトの位置やサイズが大きく変化する。

3カラムサンプル

HTML

<div id="wrap">
	<div id="center">
		<div id="center2">center</div>
	</div>
	<div id="left">left</div>
	<div id="right">right</div>
</div>

CSS

#wrap {
	background: #999999;
}

#center {
	background: #99ff99;
	float: left;
	width: 100%;
}

#center2 {
	background: #99cc99;
	margin-left: 400px;
	margin-right: 400px;
}

#left {
	background: #ff9999;
	float: left;
	width: 400px;
	margin-left: -100%;
}

#right {
	background: #9999ff;
	float: right;
	width: 400px;
	margin-left: -400px;
}

Web

Windows

Microsoft Office

ソフトウェア

その他