3カラム、2カラムのCSS(スタイルシート)のサンプル

13657 回閲覧 このエントリーをはてなブックマークする この記事のブックマークユーザー 永続的リンク2008/03/01 23:06:37 カテゴリ: ウェブ関係, CSS
スポンサード リンク

YARETOKO「ヤレトコ」スクリーンショット

このサイトでは40種類の2カラム、3カラムのCSSレイアウトが紹介されています。


このブログは、フッター付き中央列が可変の3列スタイルシートにしています。
そのサンプルも含めていくつか紹介します。

基本のレイアウト

サンプルは、Header,Content,Navigation,Extra stuff,Footerの五つの要素を基本としています。

<div id="container">
  <div id="header">Header</div>
  <div id="wrapper">
    <div id="content">Content</div>
  </div>
  <div id="navigation">Navigation</div>
  <div id="extra">Extra stuff</div>
  <div id="footer">Footer</div>
</div>

CSSサンプル例


共通のスタイルシート

html,body{
    margin:0;
    padding:0;
    text-align:center
    }
div#header{
    position:relative
    }
div#footer{
    clear:both;
    width:100%;
    background: #333;
    color: #FFF
    }


3列(全て固定幅)

中央列=Content,左列=Navigation,右列=Extra Stuff
サンプル

div#container{
    width:700px;
    margin:0 auto;
    text-align:left
}
div#wrapper{
    float:left;
    width:100%
}
div#content{
    margin: 0 150px
}
div#navigation{
    float:left;
    width:150px;
    margin-left:-700px;
    background:#B9CAFF
}
div#extra{
    float:left;
    width:150px;
    margin-left:-150px;
    background:#FF8539;
}

3列(中央列可変・両サイド固定)

中央列=Content,左列=Navigation,右列=Extra Stuff
サンプル

div#wrapper{
    float:left;
    width:100%
    }
div#content{
    margin: 0 200px
    }
div#navigation{
    float:left;
    width:200px;
    margin-left:-100%;
    background:#B9CAFF
    }
div#extra{
    float:left;
    width:200px;
    margin-left:-200px;
    background:#FF8539
    }

2列(全て固定幅)

右列=Content,左列=Navigation,右列=Extra Stuff
サンプル

div#container{
    width:700px;
    margin:0 auto;
    text-align:left
    }
div#content{
    float:right;
    width:500px
    }
div#navigation{
    float:left;
    width:200px;
    background:#B9CAFF
    }
div#extra{
    float:right;
    width:500px;
    background:#FF8539
    }

2列(左列固定・右列可変)

右列=Content,左列=Navigation,左列=Extra Stuff
サンプル

div#wrapper{
    float:right;
    width:100%;
    margin-left:-200px
    }
div#content{
    margin-left:200px
    }
div#navigation{
    float:left;
    width:200px;
    background:#B9CAFF
    }
div#extra{
    float:left;
    clear:left;
    width:200px;
    background:#FF8539
    }


※実際に紹介されているサイトのCSSの、文字サイズや色など省略してあります。

 →ツイッターのフォローはこちら
スポンサード リンク
         

関連記事

↑ページ上部へ

アクセスカウンター

今日 : 5 昨日 : 23

ブログ内容

主にウェブ関係のことを書いてます。たまにブレイクダンスとか他のことも書いています。

プロフィール

MICK

MICKです。

1983年1月24日生まれ。ウェブの世界にいるのは、偶然のようで必然なのかも。

好きなこと :
 挑戦すること。物事に没頭すること。勉強すること。
嫌いなこと :
 自慢話を聞くこと。人の悪口を言うこと。

運営サイト

      

カテゴリ一覧

サイト広告

オススメの書籍とか

感想

紹介

色々

最近のコメント

最新記事

注目記事

人気記事

最近の人気記事

人気の記事

関連サイト

運営サイト

色々

最近のトラックバック