忍者ブログ

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

HTML4.01とCSSによるWeb標準のホームページ作成入門。

[PR]

×

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

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

divタグとfloatを使った2段組の固定幅レイアウトをアレンジして、幅を可変にしたものです。
いわゆるリキッド・レイアウトというやつです。

  1. CSS(スタイルシート)レイアウト:2カラム 1
  2. CSS(スタイルシート)レイアウト:2カラム 1 解説

上記の固定幅レイアウトを読んでから先にお進み下さい。

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

#header {width:100%;}
#right {float:right; width:70%;}
#left {float:left; width:29.9%;}
#footer {clear:both; width:100%;}

HTMLのソース

<body>

<div id="header">ヘッダー</div>

<div id="right">右側の内容</div>

<div id="left">左側の内容</div>

<div id="footer">フッター</div>

</body>

サンプル

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

解説

幅をパーセンテージで指定することにより可変にしています。
#leftの幅を29.9%にしているのは、30%として合計を100%にすると、レイアウトが崩れるブラウザがあるので、それを回避するためです。
#rightと#leftの間の隙間は、ブラウザによって見え方が違います。ほぼ隙間なく見えるブラウザと、ちょっと隙間ができるブラウザがあります。

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

  1. CSS(スタイルシート)レイアウト:2カラム 1
  2. CSS(スタイルシート)レイアウト:2カラム 1 解説
  3. CSS(スタイルシート)レイアウト:3カラム 1
  4. CSS(スタイルシート)レイアウト:2カラム 2
  5. CSS(スタイルシート)レイアウト:3カラム 2
  6. CSS(スタイルシート)レイアウト:2カラム 3
  7. CSS(スタイルシート)レイアウト:3カラム 3
PR
CSS(スタイルシート)レイアウト:3カラム 2HOMECSS(スタイルシート)レイアウト:3カラム 1

コメント

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

トラックバック

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

メニュー

カテゴリー

リンク

RSS

Appendix

リンクはご自由にどうぞ。

最終更新2008/07/09

Valid XHTML 1.0 Transitional
Valid CSS!
Copyright © ホームページ作成ビギナーズガイド All Rights Reserved.
忍者ブログ[PR]