• CSS

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

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

★1カラムレイアウト
CSSレイアウトサンプル-1カラム 画像をクリックでサンプルHTMLが開きます。

- 1カラムCSS -

@charset “Shift_JIS”;

/* 1カラム 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;
margin: 0px;
padding: 0px;
}
div#menu{
background-color:#66CC66;
margin: 0px;
padding: 0px;
}
div#navi{
background-color:#99CC99;
}
div#footer{
background-color:#33CCCC;
height: 20px;
}

※ウィンドウ幅を変えてもコンテンツがいつも中央に表示されるように
全てのコンテンツを含む「container」ブロックをセンタリングしています。
「container」ブロックを「width」で幅を指定すると友に、左右のマージンに「auto」を指定。

※「body」で 「text-align: center;」を指定し、
「container」で「text-align:left;」を指定しているのはIE6用のハックです。

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

関連記事

  1. CSSだけでノート風の罫線を作る

  2. インラインフレームをCSSで設定

  3. Firefoxで背景画像が伸びない場合の対処

  4. CSSだけで画像に影をつけたい|box-shadowを使う方法

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

  6. コピペでカンタン|シンプルでスタイリッシュな見出しを作るサンプル集