![見出し画像](https://assets.st-note.com/production/uploads/images/21122678/rectangle_large_type_2_5c0e1e2cc0bafe9c77118c7d12f3e2b8.jpeg?width=1200)
継続は力なり#21
フロートによる3段組みレイアウト(1)
前回、前々回と同じ要領で3段組みを作る
サブを1つ増やし、2段組みのときと全く同じ要領で指定すると、簡単に3段組みが実現できる
例
HTML
<div id="page">
<header>
header要素
</header>
<main>
メインの段のテキストです。
メインの段のテキストです。
メインの段のテキストです。
メインの段のテキストです。
メインの段のテキストです。
メインの段のテキストです。
</main>
<div id="sab1">
サブ1の段のテキストです。
サブ1の段のテキストです。
サブ1の段のテキストです。
</div>
<div id="sub2">
サブ2の段のテキストです。
サブ2の段のテキストです。
サブ2の段のテキストです。
</div>
<footer>
footer要素
</footer>
</div>
CSS
#page {
margin: 0 auto;
wight: 400px;
}
heder, footer {
text-align: center;
color: #fff;
background: #bbb;
}
main {
float: right;
width: 200px;
color: #888;
background: #eee; /*薄いグレー*/
}
#sub1 {
float: left;
width: 100px;
color: #fff;
background: #390; /*緑*/
}
#sub2 {
float: left;
width: 100px;
color: #fff;
background: #fc0; /*黄色*/
}
footer {
clear: both;
}
だが、場合によって問題が1つ発生する
このような指定方法では、HTML内で最初の段になっているメインを3つの段の中央に配置できない
最初にフロートを指定すると、その段は最も左または最も右に配置されてしまう
(同じ側にフロートを指定した場合、先に指定したものほど外側になり、後から指定したものほど内側になる)
これらは、HTML上で順番を変更すれば可能だが、 HTML側の順序を変更したくない場合の方法は以下の見出しになる
フロートによる3段組みレイアウト(2)
2段組みの中に2段組みを作る
メインを3つの段の中央に配置する場合、以下のようにメインとその隣の段を「div要素」(以下の写真では、「#contents」)でグループ化し、2段組みの一方の段の中がさらに2段組みになっているような状態にする
こうすると、基本全て2段組になり、グループ化する段とフロートの方向次第でどの段をどの場所にでも配置可能になる
以下は具体的なソースコードです
(HTML側には「<div id="contents"></div>」が追加しているだけであり、CSS側ではそのdiv要素にfloatプロパティとwidthプロパティを指定している)
例
HTML
<div id="page">
<header>
hwader要素
</header>
<div id="contents">
<main>
メインの段のテキストです。
メインの段のテキストです。
メインの段のテキストです。
メインの段のテキストです。
メインの段のテキストです。
メインの段のテキストです。
</main>
<div id="sub1">
サブ1の段のテキストです。
サブ1の段のテキストです。
サブ1の段のテキストです。
</div>
<div id="sub2">
サブ2の段のテキストです。
サブ2の段のテキストです。
サブ2の段のテキストです。
</div>
<footer>
footer要素
</footer>
</div>
CSS
#page {
m argin: 0 auto;
width: 400px;
}
header, footer {
text-align: center;
color: #fff;
background: #bbb;
}
main {
float: right;
width: 200px;
color: #888;
background: #eee; /*薄いグレー*/
}
#sub1 {
float: left;
width: 100px;
color: #fff;
background: #390; /*緑*/
}
#contents {
float: left;
width: 300px;
}
#sub2 {
float: right;
width: 100px;
color: #fff;
background: #fc0; /*黄色*/
}
footer {
clear: both;
}