スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > 3列リキッドレイアウト

3列リキッドレイアウト

投稿日:2007年7月10日   レベル:初心者    ソフトウェア:DreamWeaver


Step1:はじめに
3列のCSSレイアウトを作りたいと思っているひとは多いのですが、いろいろ問題がおきるようです。筆者が最初にやったときもそうでした。

このチュートリアルでは、こうしたトラブルを解決して、自分なりのリキッドレイアウト(列幅可変のレイアウト)を作って、どんな解像度のブラウザ画面にも合わせられるようにしてみましょう。

Step2:レイアウト
まず、つぎのようなレイアウトのHTMLを作ります。

ヘッダ header(黄緑色)
左列 left (青色)
中列 middle (橙色)
右列 right (黄色)
フッタ footer (緑色)


レイアウトHTML

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>


これが基本となる構造です。

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>

最初にあるアステリスクのスタイルは、ページ内のすべてのタグのパディングとマージンを0pxにセットしています。# wrapperは、このサイト全体のレイアウトのコンテナとなります。

CSSによる3列リッキッドレイアウトの例はここをクリックしてください。

引用:Web Design Library 著者:Joseph Skidmore翻訳:OJer



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング