手順 3. ボックスCに左マージン
#boxC {
margin-left:200px;
}
#boxD {
width:100%;
clear:left;
}
左マージンがボックスCに適用されることによって、ボックスCのブロック要素がボックスBとの重なりを避けるように配慮される。この調整により、2段組のレイアウトが実現される。
次に、もしボックスBの内容がボックスCよりも多くのスペースを必要とする場合でも、レイアウトの整合性を保つためにボックスDが活用される。ボックスDは、クリア（clear）と呼ばれるプロパティを適用することで、その要素の下にある浮動要素の影響を受けずに配置される。このクリアによって、ボックスDの上辺はフロート要素の外側の下辺よりも下に配置されるようになる。
この手法によって、ボックスCとボックスDの配置が、ボックスBの長さが予想以上に大きくなった際にもレイアウトが適切に保持されることが確保される。要するに、ボックスの配置や重なり合いを制御することで、複雑な2段組のレイアウトがスムーズに構築されるのだ。
イメージ図1 イメージ図2
メインカラム幅可変、サイドバー幅固定 2カラムのサンプル
サイドバーの左右入れ替え
body {
text-align:center;
}
#container {
width:96%;
margin-left:auto;
margin-right:auto;
text-align:left;
}
#boxB {
width:200px;
float:right;
}
#boxC {
margin-right:200px;
}
#boxD {
width:100%;
clear:right;
}
margin, float, clear の値の left と right を入れ替えるだけだ。
フロートに関する設計上の問題が、ウェブデザインやレイアウトにおいて深刻な課題となりつつある。その中でも、特に注目すべきは、メインカラム内で「clear」という操作を行うことによって、サイドバーの配置に影響を及ぼしてしまう点だ。
「clear」を適用することで、その指定されたボックスは、その上辺が先行するフロート要素の外側の下辺よりも下に位置するようになる。この結果、ボックスの上マージンが増加し、要素の配置に変化が生じる。要するに、文章中で「clear」を使用すると、その箇所からメニューの位置までの間隔が開いてしまう可能性があるということだ。
例えば、メインカラムの幅が可変であり一方でサイドバーの幅が固定されている2カラムのデザインを考えてみよう。この場合、メインカラム内で「clear」を適用した場合、その操作によってサイドバーのフロートが解除され、意図しない間隔が生まれる可能性がある。
これに対処するために提案されるのが、フロート要素と負のマージンを組み合わせたアプローチだ。しかしながら、この方法は決して容易ではなく、複雑な手順を要する。
ウェブデザインの現場では、こうした問題に対処するために、デザイナーや開発者は慎重な調整を行う必要がある。ユーザーエクスペリエンスを損ねることなく、レイアウトの崩れや要素の位置ずれを避けるために、正確なコーディングとテストが欠かせない。
メインカラム幅可変、サイドバー幅固定 2カラム
手順 1. センタリング
body {
text-align:center;
}
#container {
width:96%;
margin-left:auto;
margin-right:auto;
text-align:left;
}
手順 2. 幅とフロート
#boxB {
width:200px;
float:left;
}
#boxC {
width:100%;
float:left;
}
#boxD {
width:100%;
clear:left;
}
幅200ピクセルのサイドバーが、左側にフロートされ、メインカラムも左フロートで幅100%となっている。メインのカラムを100%の幅に設定するのがポイントだ。また、フロート要素には幅を指定する必要がある。さらに、ボックスDではクリアを指定して配置を整える。
しかし、これだけでは要素が横に並ぶわけではない。要素を横に並べるためには、適切なコンテナ内にサイドバーとメインカラムを配置する必要がある。このコンテナは通常、親要素としての役割を果たする。例えば、次のようなHTML/CSSコードを考えてみよう。
html
Copy code
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 100%; /* コンテナ全体の幅を100%に設定 */
overflow: hidden; /* コンテナ内の要素をクリアするためにオーバーフローを隠す */
}
.sidebar {
width: 200px; /* サイドバーの幅を指定 */
float: left; /* 左フロート */
}
.main-column {
width: calc(100% - 200px); /* メインカラムの幅を計算して指定 */
float: left; /* 左フロート */
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<!-- サイドバーのコンテンツ -->
</div>
<div class="main-column">
<!-- メインカラムのコンテンツ -->
</div>
</div>
</body>
</html>
このコードでは、.containerがコンテナ要素として全体を包み、その中にサイドバーとメインカラムが配置されている。サイドバーの幅を固定の200pxに設定し、メインカラムは残りの幅を計算して設定している。フロート要素に幅を与え、さらにコンテナ内のオーバーフローを隠すことで、要素を横に並べることができる。
手順 3. ネガティブマージン
#boxB {
width:200px;
float:left;
margin-right:-200px;
}
#boxC>* {
margin-left:200px;
}
幅と同じ寸法の負の右マージンがメニューの配置に使用される。これにより、ボックスBとボックスCが重なるように配置される。更に、ボックスC内の子要素に正の左マージンを適用し、これによって子要素がボックスBと重ならないようにする。ただし、IEは子セレクタに対応していないため、実際には子孫セレクタをブロックレベル要素に適用するか、IDやクラスを持つ別のdiv要素を使用する必要がある。
ただし、ここで注意が必要だ。ボックスBに負の右マージンを適用するのではなく、ボックスCに負の左マージンを指定する方法は、IEではうまく機能しない可能性がある。
この方法によって、要素の配置を微調整し、重なりや配置の調整を行うことができる。これにより、ウェブページ上での視覚的なデザインやレイアウトをより洗練されたものに仕上げることができる。
手順 4. z-index
#boxB {
width:200px;
float:left;
margin-right:-200px;
position:relative;
z-index:2;
}
#boxC {
width:100%;
float:left;
position:relative;
z-index:1;
}
CSS（Cascading Style Sheets）において、要素同士の表示順序を制御する上で欠かせないのが、「z-index（Zインデックス）」というプロパティだ。このz-indexは、要素の重なり合う際の表示順序を定義するために使用され、要素がどれだけ前面に来るか、背面に配置されるかを指定する。しかしながら、z-indexの効果を発揮させるためには、要素の「position」プロパティの値が「static」以外のもの（つまり、relative、absolute、fixed、sticky）に設定されている必要がある。この点に留意しながら、各要素に適切なpositionプロパティを設定することが重要だ。
例えば、要素Aと要素Bが重なり合っている状況を考えてみよう。要素Bを要素Aの前面に配置したい場合、z-indexを駆使してその順序を調整することが可能だ。具体的には、要素Bのz-indexの値を大きくすることで、要素Bが要素Aの上に表示されるようになる。
しかしこの際に留意すべき重要なポイントは、要素のpositionプロパティだ。要素Bのz-indexを設定する場合、要素Bに対してposition:relativeを指定する必要がある。これにより、要素Bが重なり合う要素に対してコンテキストを持ち、z-indexの効果を適用できるようになるのだ。
このようにして、要素同士の重なり合いの表示順序を制御する際には、z-indexとpositionプロパティの組み合わせが鍵となる。要素Bを前面に押し出すためには、要素Bのz-index値を増加させ、かつposition:relativeを適用することで、要素同士の重なり合いの順序を適切に調整することが可能となる。
メインカラム幅可変、サイドバー幅固定 2カラムのサンプル2
Opera8.5ではボックスBの中の要素でz-indexを指定する必要がある。
#boxB>* {
position:relative;
z-index:2;
}
サイドバーの左右入れ替え
body {
text-align:center;
}
#container {
width:96%;
margin-left:auto;
margin-right:auto;
text-align:left;
}
#boxB {
width:200px;
float:right;
position:relative;
z-index:2;
}
#boxC>* {
margin-right:200px;
}
#boxC {
width:100%;
float:right;
margin-right:-200px;
position:relative;
z-index:1;
}
#boxD {
width:100%;
clear:right;
}
margin, float, clear の値の left と right を入れ替える。 今度はボックスB ではなく、ボックスC に負のマージンを与えるほうがよさそうだ。
