カラムの幅（width）と隙間（margin）の仕組みを理解しよう！

ファンブログカスタマイズ：カラム編投稿日：2009年09月15日 22:30

ファンブログ　カスタマイズ　シンプル系スキン限定

前回の３つのカラムの仕組みを知ろう！でカラムを表にして説明しましたが、今回は実際のスタイルシートに数字で記述されています、それぞれの幅（横幅）について説明します。

カラムに記述されています幅は全て「width: XXXpx;（ピクセル）」という単位で示され、基本的には全て横幅の数字が記述されています。

カラムの記述は「コンテナ」という大きな囲みが全体の幅で、その中に全ての囲みが入っているものなので、単純に考えますと3カラムの場合は「コンテナ」=「ラッパー（左サイドバー+コンテンツ）」+「右サイドバー」ということになりますので、実際の記述を元に計算してみましょう。

カラムの記述はスタイルシートの /* レイアウトごとの設定 */ という場所に、3カラム、左2カラム、右2カラムという順番で記述されています。場所的には中間くらいの位置にありますので探してみてください。3カラムは最初に記述されています /* 3 column multi */ という記述がされているものになります。

3カラム　/* 3 column multi */

背景　html

コンテナ　container

ヘッダ　header

メイン　main

ラッパー　wrapper

左サイドバー　sidebarLeft

コンテンツ　content

右サイドバー　sidebarRight

フッタ　footer

コンテナ　container

/* レイアウトごとの設定 */

/* 3 column multi */
body#multi #main {
	margin:0;
}
body#multi #container {
	width: 858px;
	margin: 0 auto;
	background: #fff;
}
body#multi #wrapper {
	float: left;
	width: 688px;
	margin: 0;
	padding: 0;
}
body#multi #sidebarLeft {
	float: left;
	width: 200px;
	margin: 0 5px;
	line-height: 1.6;
	display: inline; /* for IE6 */
}
body#multi #sidebarRight {
	float: right;
	width: 160px;
	margin:0 5px;
	line-height: 1.6;
	display: inline; /* for IE6 */
}
body#multi #content {
	float: right;
	width: 478px;
	margin: 0;
	padding:0;
}

記述を見ますと「コンテナ #container」の幅（width）は、858ｐｘ、「ラッパー #wrapper （左サイドバー #sidebarLeft 200px + コンテンツ #content 478px ）」は、688px で、「右サイドバー #sidebarRight」は、160px です。これを「コンテナ」=「ラッパー」+「右サイドバー」の式で計算しますと

858px=688px+160px
858px=848px

となりまして、10px 足りないですよね。さらに「ラッパー」=「左サイドバー」+「コンテンツ」を同様の式にして計算してみますと

688px=200px+478px
688px=678px

となりまして、やはり10px 足りない計算になってしまいます。この10px は何かと申しますと、隣接する記事とサイドバーがくっつかないように設定されている隙間（margin）なんです。カラムの調整をする場合は、この隙間（margin）の仕組みがわからないと、数字を調整していく内に混乱してしまい、うまく調整ができないんです。

隙間の記述は、外側の隙間（margin）と、内側の隙間（padding）がありますが、カラムの調整では外側の隙間（margin）だけ理解すれば何とかなりますので混乱しないよう、外側の隙間（margin）だけ覚えてしまいましょう。

外側の隙間（margin）は、上下左右の隙間の指定ができるもので、本来は4つの隙間の数字を記述するものなのですが、記述を見ますと1つのものや、2つのものはありますが、4つ記述されているものはありませんよね。
これは、上下、もしくは左右の隙間が同じ幅の場合に入力を省略できるからなんです。

パターンは4つしかありませんので、わかりやすいように表にしてみました、しっかり覚えてしまいましょう。

記述内容	指定された隙間	本来の記述
margin: 1px 5px 10px 15px;	上、右、下、左上1px、右5px、下10px、左15px	margin: 1px 5px 10px 15px;
margin: 1px 5px 10px;	上、左右、下上1px、左右5px、下10px	margin: 1px 5px 10px 5px;
margin: 1px 5px ;	上下、左右上下1px、左右5px	margin: 1px 5px 1px 5px;
margin: 1px ;	上下左右上下左右1px	margin: 1px 1px 1px 1px;

この上右下左という順番は、時計周りで考えます。上が12時、右が3時、下が6時、左が9時となりますので上下左右でなく、上右下左となっている意味がわかれば理解しやすいかと思います。

この外側の隙間（margin）のことを踏まえ、もう一度スタイルシートの記述を確認しますと、左右のサイドバー #sidebarLeft と #sidebarRight の記述に margin: 0 5px; という記述があります。これは左右それぞれのサイドバーの左右に 5px の隙間を作るという命令なので、式に直しますと

858px=688px(5px+200px+5px+478px)+5px+160px+5px
858px=858px

となり、「コンテナ #container」の幅（width）と同じ幅になることが、ご理解いただけたと思います。

ちなみに、2カラムの記述で同様の計算しますと隙間を足しても、10px 足りません。これはファンブログの記述ミスで、 #content の margin-left: 10px; もしくは margin-right: 10px; の隙間は、10px でなく 20px が正しい記述になりますので、10px 足りなくなってしまうんです。

カラムの性質上、10px 足りなくても正しく表示されますので、このままでも問題はないのですが、カラム幅の調整の際、混乱してしまうことがありますので、次回はこのカラムの性質を説明しながら、引き続きカラムの幅（width）と隙間（margin）の基礎的なことを説明していきます。(´・ω・`)b

※ Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。

この情報が、お役にたちましたら ≫ FC2 Blog Ranking ≪ 押していただけると励みになります

≪　前の記事に戻る　｜