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

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

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

ベースとなるHTML

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

１カラムとメニュー

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

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

２カラム左サイドバー

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

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

２カラム右サイドバー

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

３カラム

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

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

まとめ

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

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