レイアウトが崩れた時
レイアウトが崩れた時は、幅の和がどこかであふれて段ずれを起こしているので、余計に幅をとっている要素を探す事です。
まずは概略のレイアウトシートを作り、幅を記入し、子要素の幅の和が親要素より若干小さい事を確認しましょう。
場合によっては要素中の画像や文字列が余計に幅を大きくしていて、それが原因として段ずれを起こしている場合もあります。目視でわかる場合もありますが、わからない場合は一つずつ要素を消していきましょう。
広告
関連コンテンツ
４段組レイアウトの方法
４段組レイアウトの例です。
HTMLソース
サンプルソース
<body>
<div id="header"></div>
<div id="area1">
<div id="area1-1">
<div id="area1-1-1"></div>
<div id="area1-1-2"></div>
</div>
<div id="area1-2">
<div id="area1-2-1"></div>
<div id="area1-2-2"></div>
</div>
</div>
<div id="footer"></div>
</body>ヘッダーとフッターの間にarea1というコンテナクラスを作り、２分割しました。４段組レイアウトにするためさらに２分割しています。
CSSソース
サンプルソース
div#header { width : 800px; }
div#area1 { width : 800px; }
div#area1-1 {
float : left;
width : 394px;
}
div#area1-1-1 {
float : left;
width : 191px;
}
div#area1-1-2 {
float : right;
width : 191px;
}
div#area1-2 {
float : right;
width : 394px;
}
div#area1-2-1 {
float : left;
width : 191px;
}
div#area1-2-2 {
float : right;
width : 191px;
}
div#area1:after{
display : block;
clear : both;
height : 0;
visibility : hidden;
content : ".";
}
div#footer { width : 800px; }３段組レイアウトの方法
３段組レイアウトの例です。
HTMLソース
サンプルソース
<body>
<div id="header"></div>
<div id="area1">
<div id="area1-1">
<div id="area1-1-1"></div>
<div id="area1-1-2"></div>
</div>
<div id="area1-2"></div>
</div>
<div id="footer"></div>
</body>ヘッダーとフッターの間にarea1というコンテナクラスを作り、２分割しました。Area1-1はさらに２分割しています。
CSSソース
サンプルソース
div#header { width : 800px; }
div#area1 { width : 800px; }
div#area1-1 {
float : left;
width : 600px;
}
div#area1-1-1 {
float : left;
width : 188px;
}
div#area1-1-2 {
float : right;
width : 400px;
}
div#area1-2 {
float : right;
width : 188px;
}
div#area1:after{
display : block;
clear : both;
height : 0;
visibility : hidden;
content : ".";
}
div#footer { width:800px; }レイアウトの種類
ウェブサイトのレイアウトの種類はいろいろありますが、有名なものを紹介します。
２カラムレイアウト
ヘッダーとフッターの間に、サイドバーとメインエリアのあるレイアウトです。サイドバーが右にあるものと左にあるものとがあります。
３カラムレイアウト
２カラムレイアウトにサイドバーをもう一つ追加したものです。ヘッダーとフッターの間が３列のものです。
リキッドレイアウト
ブラウザサイズに合わせてヘッダー、メインエリア、フッターなどレイアウトの構成要素の幅が変化するレイアウトです。要素の幅をピクセルでなく％で指定する事で実現します。
エラスティックレイアウト
ブラウザの文字サイズに合わせて変化するレイアウトです。要素の幅をピクセルでなくemで指定する事で実現しています。