MK2-BLOG~西宮のWEBデザイナー日記

女性WEBデザイナーの日記、WEB制作に関連すること

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

time 2007/04/08

共通のHTMLを使ってCSSだけでレイアウトするサンプル。

★3カラムレイアウト
CSSレイアウトサンプル-3カラム画像をクリックでHTMLファイルが開きます。ソースはこちら

★- 3カラムCSSサンプルは以下です –

@charset “Shift_JIS”;

/* 3カラム CSS Document */

* {
margin: 0;
padding: 0;
font-size:12px;
font-family: “ヒラギノ角ゴ Pro W3”, Osaka, “MS Pゴシック”;
line-height: 130%;
}

body {
text-align: center;
}

h1 {
margin: 0;
padding: 0;
font-size: 16px;
color: #CC0000;
}
h2 {
margin: 0;
padding: 0;
font-size: 16px;
color: #FFFFFF;
}
h3 {
margin: 0;
padding: 0;
font-size: 16px;
color: #FFFFFF;
}

div#container {
width:800px;
margin:0 auto;
text-align:left;
}
div#content {
background-color:#99CCFF;
width: 400px;
float: left;
}
div#menu{
background-color:#66CC66;
padding: 0px;
width: 200px;
float: right;
}
div#navi{
background-color:#99CC99;
width: 200px;
float: left;
clear: none;
}
div#footer{
background-color:#33CCCC;
clear: both;
height: 20px;
}

※3カラムスタイルは、「float」プロパティでcontentとnaviブロックを左側に寄せます。
次にmenuブロックを右側に寄せ、最後にfooterに「clear: both;」を指定してfloatを解除しておきます。

にほんブログ村 デザインブログ Webデザインへ
↑WEBデザインブログランキングです
良かったら応援お願いします♪

にほんブログ村 デザインブログ Webデザインへ
↑ブログランキングに参加しています♪よかったらクリックしてくださいね

sponsored link

コメント

  • 参考になりました。

    by   €2007年4月29日 4:48 PM

  • コメントありがとうございます。
    参考になれば幸いです(^^)また色んなサンプルをエントリーしますね♪

    by Kanako.M €2007年5月2日 10:37 AM

down

コメントする




マウスコンピューター/G-Tune

アーカイブ

スポンサードリンク