CSSのレイアウト例　その1 カラムレイアウト

投稿日：2016年9月8日

本日はCSSのレイアウト例に関してよくあるものを見てみようと思います。

例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない　新・CSSデザインの大原則」を買いましょう。

代表的なカラムレイアウトについて

一般的な2カラム

<header>
    <div class="header_innner">
        <h1> </h1>
    </div>
</header>

<div id="contents">
    <div class="contents_innner">
        <article id="">
           <!-- メインカラム -->
        </article>
         
        <div id="side">
            <!-- サイドカラム-->
        </div>
　　　　　<!-- 下記のようにfloat対策をしないと親の高さがゼロになり、footerが上がってきてしまう--> 
　　　　　<div class="clear"></div>
    </div>  
</div>

<footer>
    <div class="footer_inncer">

    </div>
</footer>

</div>

</header>

</article>

</div>

</div>

</div>

</footer>

header,footer, #contents{
   /** 縮小した時につぶれないように最小幅設定をする必要あり**/
   min-width:980px;
}

[ class*="_innner"]{
  width:980px;
  margin:0 auto;   
}
/** ともにfloatを設定しているのでwidthをしてしないと幅いっぱいに広がり崩れてしまう。 **/
#main{
  float:left;
  width:630px;
} 

#side{
  float:right;
  width:300px;
}

/** 空divでclassを解除する代わりに下記のように書くこともできる**/

.contents_innner:after{
  content:"";
  clear:both;
  display:block;
}

header,footer, #contents{

/** 縮小した時につぶれないように最小幅設定をする必要あり**/

min-width:980px;

}

[ class*="_innner"]{

width:980px;

margin:0 auto;

}

/** ともにfloatを設定しているのでwidthをしてしないと幅いっぱいに広がり崩れてしまう。 **/

#main{

float:left;

width:630px;

}

#side{

float:right;

width:300px;

}

/** 空divでclassを解除する代わりに下記のように書くこともできる**/

.contents_innner:after{

content:"";

clear:both;

display:block;

}

3カラムその１ (header,footterは2カラム時と同様なので省略)

<div id="contents">
    <div class="contents_innner">
　　　　　<!-- 順番的には左からsub,main,sideだが記事コンテントして見せたいものはmainなのでこれを最初に書くのが正しいHTMLの書き方-->
        <article id="main">
           <!-- メインカラム -->
        </article>
         
        <div id="sub">
            <!-- サブカラム-->
        </div>

        <div id="side">
            <!-- サイドカラム-->
        </div>

    </div>  
</div>

</article>

</div>

</div>

.contents_innner{
  position:relative; /** 基準点づくり **/
}

#main{
  float:left;
  width:520px;
  margin-left:185px;　/** サムカラム分のあきを作る **/
} 

#sub{
  position:abosolute; /** contentsの左上に配置させる **/
  top:0;
  left:0;
  width:160px;  
}

#side{
  float:right;
  width:250px;
}

.contents_innner{

position:relative; /** 基準点づくり **/

}

#main{

float:left;

width:520px;

margin-left:185px;　/** サムカラム分のあきを作る **/

}

#sub{

position:abosolute; /** contentsの左上に配置させる **/

top:0;

left:0;

width:160px;

}

#side{

float:right;

width:250px;

}

3カラムその2

<div id="contents">
    <div class="contents_innner">
　　　   <div id="wrap">
            <article id="main">
                <!-- メインカラム -->
            </article>
         
            <div id="sub">
                <!-- サブカラム-->
            </div>
        </div>
        
        <div id="side">
            <!-- サイドカラム-->
        </div>

    </div>  
</div>

</article>

</div>

</div>

.contents > .wrap{
  float:left;
}

#main{
  float:right;
  width:520px;
} 

#sub{
  float:left;
  width:160px;
  margin-right:25px;  
}

#side{
  float:right;
  width:250px;
}

.contents > .wrap{

float:left;

}

#main{

float:right;

width:520px;

}

#sub{

float:left;

width:160px;

margin-right:25px;

}

#side{

float:right;

width:250px;

}

CSSのレイアウト例 その1 カラムレイアウト

CSSのレイアウト例　その1 カラムレイアウト