今回は最も頻繁に使用されるであろうCSSでの3カラムレイアウトについて。CSSでの3カラムの組み方はいろいろある。左から順にBoxA,BoxB,BoxCと横並びにする場合

今回書いたコードは4であるが、このやり方はあまり見かけない。簡単な組み方だけに、全体を囲んでいる#mainの幅は#sidemenuの幅+#contentsの幅+#affiriateの幅が同じでないとレイアウトが崩れる。

  

    ヘッダエリア
  
  
  
  

    

      メニューエリア
    
	
    
 
      コンテンツエリア
    
	
    

      広告用エリア
	
    
    
  
  
  

    フッタエリア
  
  

@charset "shift_jis";
/* -----------------------
common.css
共通
------------------------ */

body,h1,h2,h3,p,div,ul,ol,li,dl,dd,dt,
table,form,blockquote,pre,address{
  margin : 0;
  padding : 0;
}

body{
  width : 100%;
}

/* ヘッダー */ 
#header{
  width : 760px;
  height : 50px;
  margin : auto;        /* 標準モードなので、これでセンタリング */
}

/* メニューと本文と広告部分をひとくくりするためのID */
#main{
  width : 760px;        
  margin : auto;
}

#sidemenu{
  width : 150px;
  float : left;
}

#contents{
  width : 460px;
  float : left;
}

#affiriate{
  width : 150px;
  float : left;         /* 指定しないとFirefox,Operaで落ちる */
}

/* フッター */
#footer{
  width : 760px;
  clear : both;
  margin : auto;
}

|  にほんブログ村 ＩＴ系資格 へ1票  |  ウェブデザイン技能検定2級対策問題集購入はこちらへ  |