CSS: 配置(2)

固定幅２段組(先：左寄せ、後：右寄せ)

htmlの順序が先のブロックに左寄せをかけ、後のブロックに右寄せをかけます。両方に左寄せをかけてもかまいません。

1. floatとmarginの指定

   floatを使う際にはwidthの指定を必ず行います（この例では、style.css上部に記述済み）。また、マージンは後で調整するように0にしておきます。両方とも左寄せで作る場合には、間にマージンを確保しないと隣接してしまいます。

   1　配置サンプルファイル style.css

   #menu {
       float:left;
       margin:0;
   }
   #contents {
       float:right; /* またはleft。その場合は要マージン*/
       margin:0;
   }

   この状態で、ブラウザの幅を変更し、配置がどのように変化するか確認してみましょう。

   • 横が十分に長い場合
     

     横に入るスペースがあれば、後に続く#footerも並んで配置されます。

   • 横が短い場合（Firefoxなど）
     
   • 横が短い場合（IE6,7）
     

     横に並ぶスペースが確保できない場合には、下に配置されます。また、IEとFirefoxで#footerの表示位置が異なるのも注意が必要です。

   このとき、#blockの背景色が無くなっていることに注目してください。floatをかけた物はstatic以外のpositionと同様に、親要素の内容物となりません。内容物の高さが無いため背景色が表示されないのです。

2. 横幅の確保

   floatをかけたブロックが横に並ぶ幅を確保するために、#blockに幅を設定します。また、#blockにはmarginをつけて余白の調整をします。

   2　配置サンプルファイル style.css

   #block {
       width:564px; /* 左右のブロックの間が10pxになるように幅設定 */
       margin:10px;
   }

   • Firefoxなど
     
   • IE6,7
     

     IEでは#blockに幅をつけた段階で回り込みが解除されてしまい、#footerが#blockの下部に配置されます。

     また、IE6,7には『幅や高さを指定した要素ではボックスサイズの算出時にフロートを除外しない』というバグがあるため、#blockの背景色が表示されています。

3. 回り込みの解除

   #footerが回りこみをしないように、回り込みの解除を行います。回り込みの解除には、下記の２つの方法があります。

   1. 親要素の:after擬似要素に回り込み解除を設定する。

      IE6,7は:after擬似要素を正しくサポートしていないのでこの方法は使用できません。ただし、IE6,7は上記のバグで回り込みが解除されているので問題ないといえば問題ないです。

      :after擬似要素は直後に要素を追加します。追加した要素にclearを設定し、回り込みを解除します。

      3a　配置サンプルファイル style.css

      #block:after {
          content: "";
          display: block;
          clear: both; /* 左右の回り込みを解除 */
      }
      

      要素を追加していることで、#blockに高さが生じ、背景色が塗られます。

   2. 直後のブロックに回り込み解除を設定する。

      直後の#footerにclearを設定し、回り込みを解除します。

      3b-1　配置サンプルファイル style.css

      #footer {
          clear:both; /* 左右の回り込みを解除 */
      }

      回り込みを解除したブロックの上マージンは無視されるのがCSSの仕様です。したがってそのままでは#footerが#blockとくっついてしまいます。

      

      これを回避するために、#blockの内容物の最下部にmarginを指定します。

      IEでは回り込みを解除したブロックの上マージンが無視されませんので、この修正をしなくても正しく表示されてしまいますが、ブラウザ互換のために修正します。

      3b-2　配置サンプルファイル style.css

      #block {
          width:564px;
          margin:10px;
      /*    margin-bottom:0;*/ 
      }
      #menu {
          float:left;
          margin:0 0 10px 0;
      }
      #contents {
          float:right;
          margin:0 0 10px 0;
      }
      #footer {
          clear:both; /* 回り込み解除 */
          margin-top:0; /* 回り込み解除したら上余白は0 */
      }
      

      コメント（/* */）されている#blockの下マージンは、本来コメントを外すべき箇所なのですが、IEでマージンが表示されなくなってしまう場合にはコメントにします。後述の左右入れ替えではコメントを外します。FireFoxではどちらでも同じ表示になります。

4. ページの幅設定

   #blockに幅設定を行った場合には、ページの幅設定を行うのが良いでしょう。さらに中央寄せにするのも一つのやり方です。

   4　配置サンプルファイル style.css

   #page {
       width:584px;
       margin:10px auto; /* 中央寄せ */
   }
   

固定幅２段組(先：右寄せ、後：左寄せ)

floatの場合には、回り込みの左右指定を変えるだけで左右入れ替えができます。

5　配置サンプルファイル style.css

#menu {
    float:right;
}
#contents {
    float:left;
}

#footerに回り込み解除をしていてIEで下マージンが増えてしまう場合には、 #blockの下マージンを外します。

6　配置サンプルファイル style.css

div.container {
    width:564px;
    margin:10px;
    margin-bottom:0; 
}

固定幅３段組（先：左寄せ、中：左寄せ、後：右寄せ）

３段組の場合には、左右のブロックを左右に寄せるだけで良いように思えますが、中央のブロックも左に寄せる必要があります。 全てを左寄せにしても構いません。

• #menu2を表示し、スタイルをつける。
• #menu2の表示分（150+10+2px)、#blockと#pageの幅を増やす。
• #menuを左寄せにする。
• #contentsを左寄せにし、#menuと隣接しないように左マージンを入れる。

7　配置サンプルファイル style.css

#page {
    width:746px;
    margin:10px auto;
}
#block {
    width:726px;
    margin:10px;
}
#menu {
    float:left;
    margin:0;
}
#contents {
    float:left;
    margin:0;
    margin-left:10px;
}
#menu2 {
    float:right;
    margin:0;
}
#block:after {
    content: "";
    display: block;
    clear: both; /* 左右の回り込みを解除 */
}

#footerに回り込み解除した場合は、２段組の際と同じく、IEでは下マージンが正しく表示されない場合があるため、コメント行で調整します。

固定幅３段組（順序入れ替え）

３段組での配置を入れ替えるには注意が必要です。floatはhtmlクを中央に持ってくる#contents, #menu, #menu2のような順番を実現することはできません。下記のような方法で実現することができます。

• htmlの順番を変える。（後ろ向きな対策）
• 絶対配置と組み合わせる。（課題）
• #menuと#contentsを含む包含ブロックを作成し、そのブロック内で左右を入れ替える。