スポンサー
ウェブデザイン基礎講座
- ウェブデザインの大原則 ( 48 )
- ウェブユーザビリティ ( 6 )
- カラーセオリー ( 6 )
フォトショップ講座
- フォトショップの基本 ( 230 )
- エフェクト ( 169 )
- テキスト ( 81 )
- テクスチャ&パターン ( 60 )
- ウェブレイアウト ( 38 )
- ドロー ( 73 )
- カラーマネージメント ( 29 )
- 画像加工&合成&修正 ( 127 )
HTML&CSS講座
- HTML&CSS ( 41 )
グラフィック講座
- AdobeIllustrator ( 37 )
- Fireworks ( 1 )
Flash講座
- Flash ( 31 )
3D講座
- 3D ( 1 )
ウェブプログラミング講座
サイトメンテナンス講座
- サイトメンテナンス ( 39 )
サイト紹介
- サイト紹介 ( 8 )
スペシャルリンク
サイト内検索
メールマガジン
デザイナー向けのメルマガ
毎週金曜日に発行しています
毎週金曜日に発行しています
テクニック
Home ＞
HTML&CSS講座
＞ 3列リキッドレイアウト
3列リキッドレイアウト
3列リキッドレイアウト 
投稿日：2007年7月10日 レベル：初心者 ソフトウェア：
このチュートリアルでは、こうしたトラブルを解決して、自分なりのリキッドレイアウト（列幅可変のレイアウト）を作って、どんな解像度のブラウザ画面にも合わせられるようにしてみましょう。
ヘッダ header（黄緑色）
左列 left （青色）
中列 middle （橙色）
右列 right （黄色）
フッタ footer （緑色）
これが基本となる構造です。
最初にあるアステリスクのスタイルは、ページ内のすべてのタグのパディングとマージンを0pxにセットしています。# wrapperは、このサイト全体のレイアウトのコンテナとなります。
CSSによる3列リッキッドレイアウトの例はここをクリックしてください。
スポンサードリンク
Step1：はじめに
3列のCSSレイアウトを作りたいと思っているひとは多いのですが、いろいろ問題がおきるようです。筆者が最初にやったときもそうでした。
このチュートリアルでは、こうしたトラブルを解決して、自分なりのリキッドレイアウト（列幅可変のレイアウト）を作って、どんな解像度のブラウザ画面にも合わせられるようにしてみましょう。
Step2：レイアウト
まず、つぎのようなレイアウトのHTMLを作ります。
ヘッダ header（黄緑色）
左列 left （青色）
中列 middle （橙色）
右列 right （黄色）
フッタ footer （緑色）
Step3：HTMLソース
HTMLは、つぎのようになります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>3 Column CSS liquid layout.</title>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>3 Column CSS liquid layout.</title>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
</body>
</html>
これが基本となる構造です。
Step4：CSSを追加
つぎに、これにCSSによるスタイルを付け加えます。
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
#wrapper {
width: 100%;
}
#header {
width: 100%;
height: 200px;
background: lightgreen;
}
#left {
width: 20%;
height: 400px;
background: blue;
float: left;
}
#middle {
width: 60%;
height: 400px;
background: orange;
float: left;
left: 20%;
}
#right {
width: 20%;
height: 400px;
background: yellow;
float: left;
left: 80%;
}
#footer {
width: 100%;
height: 100px;
background: green;
clear: both;
}
</style>
* {
padding: 0px;
margin: 0px;
}
#wrapper {
width: 100%;
}
#header {
width: 100%;
height: 200px;
background: lightgreen;
}
#left {
width: 20%;
height: 400px;
background: blue;
float: left;
}
#middle {
width: 60%;
height: 400px;
background: orange;
float: left;
left: 20%;
}
#right {
width: 20%;
height: 400px;
background: yellow;
float: left;
left: 80%;
}
#footer {
width: 100%;
height: 100px;
background: green;
clear: both;
}
</style>
最初にあるアステリスクのスタイルは、ページ内のすべてのタグのパディングとマージンを0pxにセットしています。# wrapperは、このサイト全体のレイアウトのコンテナとなります。
CSSによる3列リッキッドレイアウトの例はここをクリックしてください。
引用:Web Design Library 著者:Joseph Skidmore翻訳:OJer
スポンサードリンク
