忍者ブログ

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

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

[PR]

×

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

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

上にヘッダー、中央にメインコンテンツ、左右にメニューブロック、下にフッター、の3段組レイアウトの作り方を紹介します。

2段組レイアウトの応用なので、そちらを理解してからお読み下さい。

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

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

body {text-align:center; margin:0 auto;}
#outer {width:750px; text-align:left; margin:0 auto;}
#header {width:750px;}
#wrapper {float:left; width:600px;}
#center {float:right; width:450px;}
#left {float:left; width:150px;}
#right {float:right; width:150px;}
#footer {clear:both; width:750px;}

HTMLのソース

<body>
<div id="outer">

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

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

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

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

</div>
</body>

サンプル

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

解説

2段組レイアウトと重複する説明は省略します。

ポイントは「#wrapper」です。これは#centerと#leftを包むために作ったブロックです。

  1. #wrapperと#rightで2段組を作る
  2. #wrapperの中に、#centerと#leftで2段組を作る

2段組を2つ使って3段組を作っているわけです。

記述順序は#center、#left、#rightなので、検索エンジンはその順番で読みます。応用すればどの順にでも書けます。

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(スタイルシート)レイアウト:2カラム 2HOMECSS(スタイルシート)レイアウト:2カラム 1 解説

コメント

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

トラックバック

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

メニュー

カテゴリー

リンク

RSS

Appendix

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

最終更新2008/07/09

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