CSSデザインノートでタグ「column」が付けられているもの

floatを使用して横並びにした多段カラムの高さが違う場合、ボックスの下辺を揃えるには画像を利用します。

サンプル

左のボックス
余白
余白
余白
余白
余白
真ん中のボックス
右のボックス

(X)HTMLコード

<div class="wrapper">
   <div class="contents">左のボックス<br />余白<br />余白<br />余白<br />余白<br />余白</div>
   <div class="contents">真ん中のボックス</div>
   <div class="contents reset">右のボックス</div>
</div>

CSSコード

div.wrapper {
float:left;
width:320px;
background:url(bg_bottom.gif) 0 100% no-repeat;
}

div.contents {
float:left;
width:100px;
margin-right:10px;
border-top:1px solid #333;
}

div.reset {
margin-right:0;
}

カラムを横並びにする方法は当サイトの以下の記事を参考にしてください。

2段カラムの作り方(float編) - CSSデザインノート

カラムを囲っているdiv要素に以下のような画像を指定します。ポイントは、縦幅が高くてもきちんと表示されるように長めに画像を作ることです。

枠の画像

今回は四角い枠で囲んでいるタイプなので、各カラムの上部にborderをつけていますが、画像でも問題ありません。

カラムの右側にmarginで余白を空けているのですが、最後のカラムの右側のmarginは0にしておきます。これはカラム落ちになるのを防ぐためです。

ここでは記述していませんが、このfloatボックスの次に何か要素がある場合、その要素も回り込んでしまうので、「clear:both;」で回り込みを解除してください。

この方法は、画像をきっちり1pxもずらさずに作らないといけないので結構面倒ではあります。

基本的な2段カラムのテンプレートの作り方を紹介します。ヘッダー、コンテンツ(2段カラム)、フッターからなるテンプレートです。

(X)HTMLコード

<div id="top">
   <div id="header">header</div>
   <div id="contents">
      <div id="mainContents">mainContents</div>
      <div id="subContents">subContents</div>
  </div>
   <div id="footer">footer</div>
</div>
</body>
</html>

CSSコード

body {
   margin:0;
}

div#top {
   width:750px;
   margin:0 auto;
}

div#contents {
   float:left;
   width:750px;
}

div#mainContents {
   float:left;
   width:600px;
}

div#subContents {
   float:right;
   width:150px;
}

div#footer {
   clear:both;
}

HTML、CSSは最低限必要なソースコードです。レイアウトを体裁したい場合は、paddingなどの指定も必要となります。

まずHTMLソースコードですが、テンプレート全体を囲んだほうがデザインに幅が出ます。ここでは<div id=#top"></div>になります。なぜid名がtopなのかというと、ページのトップの戻りリンク先にも併用できるためです。別の名前でももちろん構いません。

2段カラム部分も囲みます。<div id="contents"></div>の部分です。これも先ほどと同様デザインに幅が出るためです。例えば、2段カラムの縦の長さが違っても、カラムの一番下まで背景画像を繰り返し表示できます。

続いて、CSSソースコードを説明します。2段カラム部分(<div id="mainContents"></div>と<div id="subContents"></div>)はfloatにより横並びにします。

また、2段カラムを囲んでいるcontetnsにもfleatを指定します。これによりcontetns領域が2段カラムをちゃんと囲めるようになり、カラムの一番下まで背景画像を繰り返し表示することなどが可能になります。これはCSSの仕様により、フロートボックスの親要素(この場合はdiv#contetns)は子要素の中身がないと計算されてしまうので、div#contetns自身にもfloatを適用することにより子要素の中身が計算されるようになります。

そしてdiv#footerで「clear:both;」を指定して回り込み(というか浮いている状態)を解除します。

注意点ですが、floatを指定した要素には必ずwidthにauto以外の値を指定しなければ内容が0になってしまいます。

CSS2.1の仕様では、内容に合わせて縮めた値になります。

10.3.5 Floating, non-replaced elements
If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.

Visual formatting model detailsより引用

最近のブログ記事