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

[PR]

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

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

divタグとfloatを使った3段組の固定幅レイアウトをアレンジして、幅を可変にしたものです。

上記の固定幅レイアウトを読んでから先にお進み下さい。
また、CSS(スタイルシート)レイアウト:2カラム 2と解説が重複するところは省略しています。

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

#header {width:100%;}
#wrapper {float:left; width:80%;}
#center {float:right; width:75%;}
#left {float:left; width:24.9%;}
#right {float:right; width:19.9%;}
#footer {clear:both; width:100%;}

HTMLのソース

<body>

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

</div>

</body>

サンプル

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

解説

#centerと#leftの幅は、#wrapperの幅（bodyの80%）が基準になります。
上記の例では、#leftと#rightを同じ幅にしています。
#rightの幅＝20%、#leftの幅＝80%x25%、という計算です。

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

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

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

トラックバック

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

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

[PR]

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

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

HTMLのソース

サンプル

解説

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

コメント

トラックバック

メニュー

カテゴリー

リンク

RSS

Appendix