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

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

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

ベースとなるHTML

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

<div id="A">

</div>

<div id="B">

</div>

<div id="C">

</div>

<div id="D">

</div>

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

</div>

1カラムとメニュー

1cala

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

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

2カラム左サイドバー

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

2カラム右サイドバー

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

3カラム

4cala

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

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

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

まとめ

作っているサイトの大枠を決めるのはWebデザインの第一歩です。

いわば骨格のようなもので、あとからいじるのは面倒な場合も多いので、まずはこういったシンプルなレイアウトのみの構成でサイズ感などを調整していくといいでしょう。


イベント

2017/12/05(火)
Design Thinking Square