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

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

管理人:sofu

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で段組みをする

3カラムのサンプル画像

 
<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を加える

3カラムのサンプル画像

 
#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にネガティブマージンを加える

3カラムのサンプル画像

 
#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>タグはなるべく避けたいと思いますが、ここまでやる必要があるのか、自分でも疑問に思っちゃいました(汗)

動作検証:IE6~8、Firefox3、Opera9.51、Safari3、Google Crome

blog comments powered by Disqus

PageTop