私は当社の実務プロジェクトに、典型的な列レイアウトを前提としています。ただし、このプロジェクトを実際にカラフルにライブで披露する前に、自分自身で列のレイアウトをどのように実装できるかを具体的に示したいと思います。ここでは、2列および3列のレイアウトが焦点となりますが、これらは依然として多くのウェブサイトの基盤をなしています。
ウェブデザインにおけるクラシック中のクラシックはおそらく2列レイアウトでしょう。通常、左のウィンドウ領域にはナビゲーションが表示され、右の列には実際のコンテンツが表示されます。ブログとの関連で言えば、この挙動は実際に変化しています。実際、多くのブログでは、右側にナビゲーションや広告が表示され、左側に実際のコンテンツが表示されます。
このような適用は、比較的簡単にCSSで実装できます。実際、2列は最も単純なレイアウト形式です。
次の例では、パーセンテージを使って実装された2列レイアウトを示します。
こちらが完全な例です：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
position: absolute;
left: 0;
margin: 0;
width: 20%;
background-color:#66CCCC;
}
#main {
margin: 0;
margin-left: 20%;
width: 80%;
background-color:#6666CC;
}
</style>
</head>
<body>
<div id="header">絶対位置レイアウト</div>
<div id="nav">ナビゲーション</div>
<div id="main">これがコンテンツエリアです</div>
<div id="footer">ここに著作権情報が表示されます。</div>
</body>
</html>そしてブラウザ上では次のように表示されます：
なお、左側の列を右に簡単に移動できます。次の指示を調整してください：
• #navではleft: 0をright: 0に変更します。
• #mainでは、margin-leftをmargin-rightに変更します。
変更を保存した後、望む結果が表示されます。
ただし、絶対位置指定を基にした表示は1つ問題があります：左側の列の内容が増えると、フッター領域にかぶってしまいます。
これは、絶対位置指定された要素には「スペースを空ける」スペースがないためです。この問題を回避するためには、左列よりも長いコンテンツがあることを主要領域に挿入することで解決できます。
このレイアウト形式を使用する際には、主要領域が左（または右）の列よりも実際に高いことが確実である場合に限ります。
フロートを使用した2列レイアウト
前述の例で発生したフッターがかぶる問題は、 floatプロパティを使用することで解決できます。変更後の構文は次のようになります：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 80%;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header">絶対位置レイアウト</div>
<div id="nav">ナビゲーション用エリア</div>
<div id="main">これがコンテンツエリアです</div>
<div id="footer">ここに著作権情報が表示されます。</div>
</body>
</html>ここでは、2つの列それぞれにfloatプロパティが適用されています。これにより、列は横に並べられます。
左の列には幅が20パーセント割り当てられます。特に注意すべきは、floatで配置された要素は常に幅の指定を必要とするということです。
実際の内容エリアには幅が80パーセント割り当てられます。このエリアもfloat: leftで配置されます。これにより、このエリアが左列の横に表示されます。
フッター領域が常にウィンドウの下部に表示されるようにするには、次の構文が使用されます：
#footer {
clear: both;
}
このバリエーションに独自のクラスを定義する方法についてはすでに指摘しています。
フロートを使用した3列レイアウト
3列レイアウトも、ウェブデザインにおいてよく使用されるバリエーションの1つです。典型的な構成は次のようになります：
• 左の列にはナビゲーションが含まれます。
• 中央の列には実際のコンテンツが配置されます。
• 右側には追加情報や広告が表示されます。
以下は、フレキシブルな3列レイアウトが作成される例です。これを見ると、先に示した2列レイアウトと似ていることに気付くでしょう。ただし、新たに右側のウィンドウ列を表す追加のdiv領域であるrightが存在します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#main, #right {
margin: 0;
border: 0;
padding:0;
}
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 60%;
}
#right {
float: right;
width: 20%;
background-color:#6699FF;
}
#footer {
clear: both;
} </style>
</head>
<body>
<div id="header">絶対位置へのレイアウト</div>
<div id="nav">ナビゲーション領域</div>
<div id="main">コンテンツ領域</div>
<div id="right">右の列です</div>
<div id="footer">著作権情報がここに記載されます。</div>
</body>
</html>
新しい領域に20%の幅が指定されました。したがって、レイアウトは次のようになります:
• 左右の列はそれぞれ表示エリアの20%を占めます。
• 中央の列の幅は60%です。
表示された構文により、right領域は実際に右に表示されます。
この点で構文は柔軟です。main領域を以下のように調整することもできます:
#main {
margin: 0;
float: right;
border: 0;
background-color:#6666CC;
width: 60%;
}
ここでfloatをrightに設定しました。その結果、right領域が左に移動します。
このチュートリアルでは、floatに基づいて基本レイアウトを簡単に定義できる方法を見ました。これにより、Webサイトの構築の基盤が形成されました。次のチュートリアルでは、Webサイトの構築が段階的に進み、基本的な構造から始まります。
