4カラムレイアウトへの応用

2カラムレイアウトを応用することで、3カラムレイアウトを作成することができますが...

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

4カラムレイアウトへの応用

2カラムレイアウトを応用することで、3カラムレイアウトを作成することができますが、これをさらに応用することで、4カラムレイアウトも組むことができます。

3カラムレイアウトでは、まず2カラムを作成し、その内一方の枠内にさらに2カラムを作成することで完成します。この時に2カラムを作成しないもう一方の枠内にも2カラムを組めば、計4つの枠ができあがります。

[HTMLの記述]

<div id="wrap">
	<div id="header">
		タイトルなど
	</div><!-- /header -->  
	<div id="inner">
		<div id="largeAlphaWrap">
			<div id="aWrap">
				左中
			</div><!-- /aWrap -->
			<div class="bWrap">
				左左
			</div><!-- /bWrap -->
			<div class="clear"><hr /></div>
		</div><!-- /largeAlphaWrap -->
		<div id="largeBetaWrap">
			<div class="cWrap">
					右中
			</div><!-- /cWrap -->
			<div class="dWrap">
				右右
			</div><!-- /dWrap -->
			<div class="clear"><hr /></div>
		</div><!-- /largeBetaWrap -->
	</div><!-- /inner -->
	<div class="footer">
	    コピーライトなど
	</div><!-- /footer -->
</div><!-- /wrap -->

[CSSの記述]

body { text-align:center; }
#wrap { width:770px; text-align:left; margin:0 auto; }
#inner { margin:0 10px; }
#largeAlphaWrap { float:left; width:370px; }
#largeBetaWrap { float:right; width:370px; }
#aWrap { float:right; width:180px; }
#bWrap { float:left; width:180px; }
#cWrap { float:left; width:180px; }
#dWrap { float:right; width:180px; }
.clear { clear:both; }
.clear hr { display:none; }

[ブラウザ上の表示]

タイトルなど
スペース(A)
スペース(B)
スペース(C)
スペース(D)
コピーライトなど
（分かりやすくするため、高さ、色、枠線をつけています）

外枠、外側の2カラム、左右それぞれの枠内の2カラム作成方法は、2カラムレイアウト、3カラムレイアウトに記載してある通りです。

あまりに横幅が狭い場合、一番読んでもらいたい部分はどこなのかがぼやけてしまったり、文章が縦に長くなってしまったりと、ユーザビリティー上の不具合も出てきますのであまりお勧めはしませんが、応用していけば5カラムでも6カラムでも、好きなように作ることができます。

複数の段をCSSでレイアウトする場合の基本は2カラムレイアウトです。基礎をしっかり理解しておけば、3カラム4カラムでも難しいことはありません。