見出し画像

継続は力なり＃２１

うちやましょうたろう/成り上がり

フロートによる３段組みレイアウト（１）

前回、前々回と同じ要領で３段組みを作る

サブを１つ増やし、2段組みのときと全く同じ要領で指定すると、簡単に３段組みが実現できる

例

HTML

<div id="page">
 
<header>
header要素
</header>
 
<main>
メインの段のテキストです。
メインの段のテキストです。
メインの段のテキストです。
メインの段のテキストです。
メインの段のテキストです。
メインの段のテキストです。
</main>
  
<div id="sab1">
サブ１の段のテキストです。
サブ１の段のテキストです。
サブ１の段のテキストです。
</div>
 
<div id="sub2">
サブ２の段のテキストです。
サブ２の段のテキストです。
サブ２の段のテキストです。
</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内で最初の段になっているメインを３つの段の中央に配置できない

最初にフロートを指定すると、その段は最も左または最も右に配置されてしまう
（同じ側にフロートを指定した場合、先に指定したものほど外側になり、後から指定したものほど内側になる）

これらは、HTML上で順番を変更すれば可能だが、　HTML側の順序を変更したくない場合の方法は以下の見出しになる


フロートによる３段組みレイアウト（２）


2段組みの中に2段組みを作る

メインを３つの段の中央に配置する場合、以下のようにメインとその隣の段を「div要素」（以下の写真では、「#contents」）でグループ化し、2段組みの一方の段の中がさらに2段組みになっているような状態にする

こうすると、基本全て2段組になり、グループ化する段とフロートの方向次第でどの段をどの場所にでも配置可能になる

画像3

以下は具体的なソースコードです
（HTML側には「<div id="contents"></div>」が追加しているだけであり、CSS側ではそのdiv要素にfloatプロパティとwidthプロパティを指定している）

例

HTML

<div id="page">
 
<header>
hwader要素
</header>
 
<div id="contents">
 
<main>
メインの段のテキストです。
メインの段のテキストです。
メインの段のテキストです。
メインの段のテキストです。
メインの段のテキストです。
メインの段のテキストです。
</main>

<div id="sub1">
サブ１の段のテキストです。
サブ１の段のテキストです。
サブ１の段のテキストです。
</div>
 
<div id="sub2">
サブ２の段のテキストです。
サブ２の段のテキストです。
サブ２の段のテキストです。
</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;
}

画像2