2段組幅固定レイアウト
では、幅固定レイアウトを2段組レイアウトに変更していきましょう。「contents」の中を「navi」と「main」の2つの領域に分けます。今までと同じようにそれぞれ<div>要素を使い、属性として「id=navi」と「id=main」を指定して作成します。
構成的には下記のような感じとなります。
「navi」を左側に、「main」を右側に配置しますので、「float」プロパティを使い「navi」には「float:left」を、「main」には「float:right」を設定します。またそれぞれの領域の幅も「width」プロパティで設定します。
#wrapper{
margin:0 auto 0 auto;
padding:0;
background-color:#ffffff;
width:450px;
}
#contents{
margin:0;
padding:0;
width:450px;
}
#navi{
margin:0;
padding:0;
float:left;
width:150px;
}
#main{
margin:0;
padding:0;
float:right;
width:300px;
}
floatの設定を解除しておく必要があります。「contents」の次に配置される部分で「clear:both」でfloat設定を解除するのですが、下記のように記述しておけばどこでfloatを解除するのかをあまり気にしなくてもよくなります。
#contents:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
本来「clear:both」だけを設定すればいいのですが、<div>要素の中に何もコンテンツが無い場合に色々不具合が出ることがあり、このように記述しておくことで回避できます。
スタイルシートの方はこれで完成ですので、あとはHTMLの方の中身を各<div>要素で括ってあげます。(下記は一部省略してます)。
<div id="contents">
<div id="main">
<p>
ここでは段組のレイアウトについて細かく見ていきます。段組には主に
2段組の場合と3段組の場合が多く用いられています。
</p>
</div>
<div id="navi">
<ul>
<li><a href="./sample1-1.html">スタイルシート詳細へ</a></li>
<li><a href="./sample1-1.html">HTML詳細へ</a></li>
</ul>
</div>
</div>
では実際に試した結果を見て見ましょう。
実際にブラウザで見てみると下記のようになります。
これで2段組の幅固定レイアウトは完成です。背景色などを少し修正したものを完成版として添付しておきます。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html;charset=UTF-8">
<title>レイアウトサンプル</title>
<link rel="stylesheet" href="./css/css3-2.css" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<p>
レイアウトサンプル
</p>
</div>
<div id="contents">
<div id="main">
<p>
ここでは段組のレイアウトについて細かく見ていきます。段組には主に
2段組の場合と3段組の場合が多く用いられています。
</p>
<p>
幅を固定する場合にはブラウザの横サイズに関わり無く一定の幅で表示
します。それに対して幅を固定しない場合にはブラウザの横サイズの大
きさに合わせて表示されるコンテンツの幅も自動的に変更されることに
なります。
</p>
<p>
幅を固定しない場合でも、メニュー画面などは固定の幅にして、メイン
コンテンツの部分だけを幅可変にすることが多いです。
</p>
</div>
<div id="navi">
<ul>
<li><a href="./sample1-1.html">スタイルシート詳細へ</a></li>
<li><a href="./sample1-1.html">HTML詳細へ</a></li>
<li><a href="./sample1-1.html">JavaScript詳細へ</a></li>
<li><a href="./sample1-1.html">XML詳細へ</a></li>
</ul>
</div>
</div>
<div id="footer">
<p>
お問い合わせはxxxxまで
</p>
</div>
</div>
</body>
</html>
@charset "Shift_Jis";
body{
margin:0;
padding:0;
background-color:#dcdcdc;
}
#wrapper{
margin:0 auto 0 auto;
padding:0;
background-color:#ffffff;
width:450px;
}
#header{
margin:0;
padding:0;
background-color:#eee8aa;
}
#contents{
margin:0;
padding:0;
width:450px;
background-color:#f0f8ff;
}
#navi{
margin:0;
padding:0;
float:left;
width:150px;
}
#navi ul{
margin-top:10px;
margin-left:20px;
font-size:0.75em;
}
#main{
margin:0;
padding:0;
float:right;
width:300px;
background-color:#ffffff;
}
#contents:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#footer{
margin:0;
padding:0;
background-color:#eee8aa;
}
p{
margin:0;
padding:10px;
}
実際にブラウザで見てみると下記のようになります。
( Written by Tatsuo Ikura+ )