前回CSSでの3カラムレイアウトについてコードを記述した。しかしBoxA、BoxB、BoxC全てが左にフロートしている組み方はあまりない。BoxA、BoxBをDivで囲んだものと、BoxCで2段組にするという「2段組」を基本にしたやり方がよく使われる。今回そのやり方でソースを記述してみた。

SITE TITLE

    

      

        

          
MENU
          
MENU
          
MENU
          
MENU
          
MENU
          
MENU
        
      
    
    

      

        
SUB TITLE
	      
text text text text text text text text text text text
           text text text text text text text text
	      
text text text text text text text text text text text
           text text text text text text text text te
        
    
  




    

           

              
MENU
              
MENU
              
MENU
              
MENU
              
MENU
              
MENU
           
    






FOOTER

@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;
}

/*個別整形*/
h1,h2,p{
    margin-bottom:0px;
	margin-top:0px;
}

/*全体*/
#wrapper{
	width:800px;
	border: 1px solid #000000;
	margin-right: auto;
	margin-left: auto;
}

/*ヘッダー*/
#header{
	background-color:#FF0066;
	margin: 0px;
	padding: 0px;
}

/*フッダー*/
#footer{background-color:#FF33FF;}

/*box_aとbox_bを囲むdiv*/
#box_ab{
	float:left;
	margin: 0px;
	padding: 0px;
}

/*左メニュー*/
#box_a {
	float:left;
	width:150px;
	background-color:#FF99FF;
	height: 300px;
}

/*センターコンテンツ*/
#box_b {
	background-color:#FFCCFF;
	float: left;
	width: 500px;
	height: 300px;
}

/*右メニュー*/
#box_c {
	float:right;
	width:150px;
	background-color:#CC99FF;
	height: 300px;
}

/*textエリア整形*/
#navi{padding:1em 1em; 20em; 1em;}
#box_abc {
	float: left;
}

|  この記事に拍手   |   ウェブデザイン技能検定2級対策問題集購入はこちらへ   |