このページの短縮URL(リンク用) §06-04…3段組みの設定 – オンライン無料パソコン講座 | PCセミナー

§06-04…3段組みの設定

(01) ここからは3段組みのレイアウトを設定する方法を学習します。空のCSSファイル「lay01.css」を作成してください。また「index.htm」にリンクしてください。全体の幅「880px」、中央部「540px」、左右のメニュー(公園メニュー+お知らせ)を「160px」にする予定です。

<link rel="stylesheet" type="text/css" href="nor.css" />
<link rel="stylesheet" type="text/css" href="str.css" />
<link rel="stylesheet" type="text/css" href="lay01.css" />

(02) 3段組みにする場合、まず上の2セクションを2段組みにする設定をします。全体の幅を決め、上部2セクションにfloatの設定をします。「lay01.css」に以下のように追加しましょう。最後のセクションがおかしい位置に入りますが気にしません。

div.secall{
width:880px;
margin:auto;
border:1px solid #9966FF;
}
div.seccontent{
width:540px;
float:right;
}
div.secsubmenu01{
width:160px;
float:left;
}

(ウィンドウサイズ:1024px)

(03) 次に2段組みにした部分を1まとめにし、そこと最後のセクション(お知らせ)をさらに2段組みにするのです。floatの設定をした中央セクションと左のセクションを
<div class=”wrap01″>でまとめましょう。

<body>
~略~
<div class="main">
<div class="wrap01">
<div class="seccontent">
~略~
</div> <!--secsubmenu01の閉じタグ-->
</div> <!--wrap01の閉じタグ-->
<div class="secsubmenu02">
~略~
</body>

(04) 2段組みをまとめている<div class=”wrap01″>を左に、
<div class=”secsubmenu02″>を右にfloatさせましょう。「str.css」に追加します。なお、フッターセクションにはfloatの解除設定を済ませてあります。

div.wrap01{
width:710px;
float:left;
}
div.secsubmenu02{
float:right;
width:160px;
}