SEOを考慮した3カラムレイアウトのテンプレート

SEO的に検索エンジンに読ませたい内容（3カラムの場合、たいがい真ん中のメインコンテンツ）をHTMLの先頭にもっていきたいところですが、どうしても左サイドと真ん中ボックスを囲む<div>タグを1回使わないと真ん中のコンテンツを先頭にもっていくことができません。

 
<div id="containar">
    <div id="header">header</div>
 
    <!-- wrapを1回挟まないとcontentsを先頭にもっていけない -->
    <div id="wrap">
        <div id="contents">contents</div>
        <div id="sideL">sideL</div>
    </div>
	
    <div id="sideR">sideR</div>
    <div id="footer">footer</div>
</div>
 

ですが、ネガティブマージンを使えばその<div>タグを使わなくても簡単に3カラムのCSSレイアウトができます。その方法を紹介します。

1.検索エンジンに読ませたい内容順にHTMLを記述、CSSで段組みをする

 
<div id="containar">
    <div id="header">header</div>
    <div id="contents">contents</div>
    <div id="sideL">sideL</div>
    <div id="sideR">sideR</div>
    <div id="footer">footer</div>
</div>
 

 
#containar {
    width: 780px;
    background-color: #84876C;
}
 
#header {
    width: 100%;
    background-color: #CCC49F;
}
 
#contents {
    float: left;
    width: 480px;
    height: 300px;
    background-color: #EADCAE;
}
 
#sideL {
    float: left;
    width: 150px;
    height: 150px;
    background-color: #ADB96E;
}
 
#sideR {
    float: left;
    width: 150px;
    height: 150px;
    background-color: #47191C;
}
 
#footer {
    clear: both;
    width: 100%;
    background-color: #CCC49F;
}
 

2.CSSの#contentsにmargin-leftを加える

 
#contents {
    display: inline;	/* マージン2倍のバグ対処 */
    float: left;
    width: 480px;
    height: 300px;
    margin-left: 150px;	/* #sideLの幅分 */
    background-color: #EADCAE;
}

#contentsにmargin-leftを加え、左に#sideLを入れるスペースを作ります。今回は、#sideLの幅が150pxなのでmargin-left: 150px;と指定します。ただ、このままだとIE6ではmargin-leftの値が2倍になるというバグがでてしまうのでdisplay: inline;を追加します。

3.CSSの#sideLにネガティブマージンを加える

 
#sideL {
    float: left;
    width: 150px;
    height: 150px;
    margin-left: -630px;	/* マイナス（#contentsの幅 + #sideLの幅） */
    background-color: #ADB96E;
}

最後に、#contentsの幅（480px）と#sideLの幅（150px）を足した値を、margin-leftのマイナスにして、#sideLを左に（「2」で空けたスペースに）寄せます。

3カラムレイアウトのサンプル

<div>タグが1個増えるからって、ここまでしなくていいじゃんと思う方は、読んでも特にならない内容ですが、無意味な<div>タグはなるべく避けたいと思う気持ちを理解していただけたらなと思います。

動作検証：IE6～8、Firefox3、Opera9.51、Safari3、Google Crome