初心者向け！CSSでできるレイアウト例4選

サイトをゼロから作るとき、全体の構成をCSSでレイアウトするのは意外と面倒な作業です。

ここでは、初心者向けのCSSでできる簡単なレイアウトを紹介します。シンプルかつ少ないソースで作成可能なレイアウトのソースなので誰でも簡単に使えます。

1 ベースとなるHTML
2 まとめ

ベースとなるHTML

まず初めに、これから紹介するCSSソースすべてに共通するHTMLソースを以下に示します。

<div id="A">

</div>

<div id="B">

</div>

<div id="C">

</div>

<div id="D">

</div>

<div id="E"> ※3カラムの時追加

</div>

１カラムとメニュー

1cala

近年はスマホ対応もサイト構成では重要なポイントとなってくるので、１カラムが主流になりつつあります。後述の２カラムに比べ、元からスマホレイアウトに近いレイアウトなので崩さず再現しやすいです。

AやBにメニューやカテゴリーリンクを置き、Cがメインのコンテンツ領域となります。

body {
width:980px;
margin:0 auto;
}
#A {
height:150px;
background-color:#009b9f;
}
#B {
height:40px;
background-color:#009b9f;
margin-top:10px;
}
#C {
min-height:450px;
height:auto;
background-color:#009b9f;
margin-top:10px;
}
#D {
height:100px;
background-color:#009b9f;
margin-top:10px;
}

２カラム左サイドバー

2cala

定番のサイト構成で、主にBがサイト全体のメニュー、Cがメインコンテンツとなります。近年ではあまりみなくなってきた気がします。

ブログなどは次の右サイドバーのほうが主流なような気もしますが、正解もありませんので用途に合わせて使い分けるといいでしょう。

body {
width:980px;
margin:0 auto;
}
#A {
height:150px;
background-color:#009b9f;
}
#B{
width:250px;
min-height:500px;
height:auto;
background-color:#009b9f;
float:left;
margin-top:10px;
}
#C {
margin-left:260px;
width:720px;
min-height:500px;
height:auto;
background-color:#009b9f;
margin-top:10px;
}
#D {
margin-top:10px;
width:980px;
height:100px;
background-color:#009b9f;
}

２カラム右サイドバー

3cala

一般的なブログでよく見られる構成で、主にCがメインのコンテンツ領域、Bがサイドバーとして扱われ、Bにはカテゴリーや日付アーカイブ、またその他のメニューを格納する場合が多いです。

body {
width:980px;
margin:0 auto;
}
#A {
height:150px;
background-color:#009b9f;
}
#B {
width:250px;
min-height:500px;
height:auto ;
background-color:#009b9f;
float:right;
margin-top:10px;
}
#C {
width:720px;
min-height:500px;
height:auto;
background-color:#009b9f;
margin-top:10px;
}
#D {
height:100px;
background-color:#009b9f;
margin-top:10px;
}

３カラム

4cala

３カラムは大きいメディアサイトでよく見られる構成です。

カテゴリや特集バナー、広告など、表示したいコンテンツが多くある場合、スペースを有効活用できるレイアウトです。

body {
width:980px;
margin:0 auto;
}
#A {
height:150px;
background-color:#009b9f;
}
#B {
width:250px;
min-height:500px;
height:auto;
background-color:#009b9f;
float:left;
margin-top:10px;
}
#C {
width:250px;
min-height:500px;
height:auto;
background-color:#009b9f;
float:right;
margin-top:10px;
}
#D {
margin-left:260px;
width:460px;
min-height:500px;
height:auto;
background-color:#009b9f;
margin-top:10px;
}
#E {
margin-top:10px;
height:100px;
background-color:#009b9f;
}