[PR] 容量300MB、月額125円、高性能なサーバが日本最大級のバックボーンに直結。さくらのレンタルサーバ。
ブログレイアウトの基本パターン その３ ～３段組レイアウト～
コンテンツの左右両側にサイドバーが置かれる３段組レイアウトはブログでよく用いられるレイアウトです。基本的な枠組みは２段組レイアウトとほとんど同じですので、ここでは２段組レイアウトのページで用いたサンプルファイルをベースに追加部分を簡単に解説したいと思います。
２段組から３段組へ変更するには？（一例）
②ＩＤ「content」を設定したＤＩＶの後にもう一つサイドバー用のＤＩＶを追加（このサンプルではＩＤを「sidebar02」とする）。
<div id="sidebar01">サイドバー左</div>
<div id="content">コンテンツ</div>
<div id="sidebar02">サイドバー右</div>
③ID「content」にフロート左を設定し、横幅を調整。
#content { width:420px; float:left; }
④ID「sidebar02」にフロート右を設定し、横幅を調整。
#sidebar02 { width:160px; float:right; }
完成版のサンプルファイルはこちらです。このサンプルでのポイントは、サイドバー２本とコンテンツ用のＤＩＶの横幅の合計を、コンテナＤＩＶの横幅760px以内に収めることです。<DIV>タグを書く順番も重要です。
