[Labyrinthe Noir]>[Top]>[HTMLタグ講座]>

CSSによる段組

２段組

<div>タグで作った２つの要素を左右に段組します。

HTML 適用前 
<div id="blockA">Ａブロック</div>
<div id="blockB">Ｂブロック</div>
Ａブロック
Ｂブロック
CSS 適用後 
<style>
#blockA {
	float:left;
	width:200px;
}
#blockB {
	margin-left: 200px;
}
</style>
Ａブロック

id="blockA"
Ｂブロック

id="blockB"

Ｂブロックの幅指定をしていないので、ページのサイズに応じて変化します。

事例：<table>と<div>でフローティングメニューとコンテンツの段組

３段組

適用順に注意。左、右、中央の順にブロックを割り当てます。

HTML 適用前 
<div id="blockA">Ａブロック</div>
<div id="blockB">Ｂブロック</div>
<div id="blockC">Ｃブロック</div>
Ａブロック
Ｂブロック
Ｃブロック
CSS (1) 適用後 
<style>
#blockA {
	float: left;
	width: 200px;
}
#blockB {
	float: left;
	width: 200px;
}
#blockC {
	margin-left: 400px;
}
</style>
Ａブロック

id="blockA"
Ｂブロック

id="blockB"
Ｃブロック

id="blockC"

Ｃブロックには幅の指定がないため、ページの幅に応じて変化します。
CSS (2) 適用後 
<style>
#blockA {
	float: left;
	width: 200px;
}
#blockB {
	float: right;
	width: 200px;
}
#blockC {
	margin-left: 200px;
	margin-right: 200px;
}
</style>
Ａブロック

id="blockA"
Ｂブロック

id="blockB"
Ｃブロック

id="blockC"

Ｃブロックには幅の指定がないため、ページの幅に応じて変化します。左右のブロックはページの両端に置かれます。

 

戻る