« ココログのカスタムCSSの編集~ブログの横幅を変更する~ | トップページ | ココログのカスタムCSSの編集~メニューの作成~ »

2008年2月 2日 (土)

ココログのカスタムCSSの編集~2段組レイアウトの設定~

カスタムCSSを編集して2段組レイアウトを実現してみます。HTMLのテーブルでも実現できますが、カスタムCSSで設定してしまえば細かいレイアウト設定もHTMLは煩雑にならず、比較的簡潔に書くことができるようになります。

次のようなレイアウトで文章を表示できるようになります。

ここは赤色にしました。幅は500pxです。
ここは左側のレイアウトになります。幅を200px、背景を緑色、線で枠を囲みました
ここは右側のレイアウトです。幅を300px、背景は青、点線で枠を囲みました。

ここは左枠と右枠の背景になります。
  • カスタムCSSの設定
    div.waku-all{
      background-color:#ffaaaa;
      width:500px;
    }
    div.waku-left{
      float:left;
      background-color:#aaffaa;
      width:168px;
      margin:10px;
      padding:5px;
      border-style:solid;
      border-width:1px;
    }
    div.waku-right{
      float:right;
      background-color:#aaaaff;
      width:268px;
      margin:10px;
      padding:5px;
      border-style:dashed;
      border-width:1px;
    }
  • HTMLの書き方
    <div class="waku-all">ここは赤色にしました。幅は500pxです。
    <div class="waku-left">ここは左側のレイアウトになります。幅を200px、背景を緑色、線で枠を囲みました</div>
    <div class="waku-right">ここは右側のレイアウトです。幅を300px、背景は青、点線で枠を囲みました。</div>
    <br style="clear:both" />
    ここは左枠と右枠の背景になります。
    </div>
    • わかりやすく色分けしてみました。waku-allは背景の役割をしています。
    • waku-leftは、左枠のレイアウトです。float:leftはこの枠を左側に寄せるという意味です。padding, margin, witdthはそれぞれ10px, 5px, 168pxを指定しています。(padding×2)+(margin×2)+(border-width×2)+(width)=200px幅になるよう設定しています。
    • waku-rightは、右側のレイアウトです。float:rightで右側に寄せる指定で、waku-leftと同様、(padding×2)+(margin×2)+(border-width×2)+(width)=300px幅になるよう設定しています。
    • "<br style="clear:both" />"は、いろいろなブラウザで異なるレイアウトを揃えるためのおまじないです。本来の意味は、左右の回り込み表示を終わらせる設定です。これを書かかないとIE7とFirefoxで表示の仕方が異なってくる上に、思い通りの表示になりません。

« ココログのカスタムCSSの編集~ブログの横幅を変更する~ | トップページ | ココログのカスタムCSSの編集~メニューの作成~ »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/506297/17933004

この記事へのトラックバック一覧です: ココログのカスタムCSSの編集~2段組レイアウトの設定~:

« ココログのカスタムCSSの編集~ブログの横幅を変更する~ | トップページ | ココログのカスタムCSSの編集~メニューの作成~ »