CSS(スタイルシート)レイアウト:3カラム 3／ホームページ作成ビギナーズガイド

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

CSS(スタイルシート)レイアウト:3カラム 3

CSS(スタイルシート)レイアウト:2カラム 3を応用して3段組にしたものです。

CSS(スタイルシート)のソース

body {margin:0; padding:0;}
#header {height:100px;}
#left {position:absolute; top:100px; left:0; width:150px;}
#right {position:absolute; top:100px; right:0; width:150px;}
#center {margin-left:150px; margin-right:150px;}
#footer {height:100px;}

HTMLのソース

<body>

<div id="center">中央の内容</div>

</body>

サンプル

表示例はこちら→サンプルページ（わかりやすいように背景色をつけてます。）

解説

CSS(スタイルシート)レイアウト:2カラム 3と重複するところは省略。

左右に絶対位置指定のブロックを作り、centerブロックの余白を左右150ピクセル(leftとrightの幅)としました。
centerの幅は「ブラウザ表示幅－150px－150px」になります。

CSS(スタイルシート)レイアウト

table(テーブル)レイアウトについて｜HOME｜CSS(スタイルシート)レイアウト:2カラム 3

お名前(N)
タイトル(T)
メールアドレス(M)
URL(U)
コメント(C)	コメントをどうぞ。
パスワード(P)
送信(S)

トラックバック

table(テーブル)レイアウトについて｜HOME｜CSS(スタイルシート)レイアウト:2カラム 3

ホームページ作成ビギナーズガイド

[PR]

CSS(スタイルシート)レイアウト:3カラム 3

CSS(スタイルシート)のソース

HTMLのソース

サンプル

解説

CSS(スタイルシート)レイアウト

コメント

トラックバック

メニュー

カテゴリー

リンク

RSS

Appendix