(イ) ２カラムを指定する

で。そのカラムを作る方法です。

緑の枠を覆うような形で、もうひとつ<div>（黄色の枠）を用います。

コードにすると、

HTML:
<div id="wrap">
 <div id="left_bar">
  左：メニューバー
 </div>
 <div id="right_bar">
  右：コンテンツ
 </div>
</div>

CSS:
#wrap {
      width: 800px;
}
#left_bar {
     width: 200px;
     float: left;
}
#right_bar {
     width: 600px;
     float: right;
}

この、widthはブロックの横幅を決めます。
そして、floatが右と左、どちらにそのブロックを置くかを設定します。
#wrapの横幅が、200px+600pxでちょうど800pxになっていることにも注目してください。

では、本番です。
今まで作ってきたウェブサイトを２カラムにしてみましょう。

メニューとサンプルバナーが左、それ以外が右に配置されていましたね。

うまく出来たら、上の写真のような感じになるはずです。

<div id="wrap">
 <div id="left_bar">
  メニューの画像とリスト、サンプルバナーが� る部分の前後に、「left-bar」を。
 </div>
 <div id="right-bar">
  <h2><h3><p>タグが� る、その前後に、「right-bar」を。
 </div>
</div>

できましたか？
うまく出来ない方のために、保険として<body>タグ付近のコードを載せておきます。

※一部、カラムの構成とは関係のない箇所を「～中略～」と表しています。

ここまでくれば、大分それらしくなってきましたね。
もし、ここまでで躓いてしまった場合は、もう一度わからないところから熟読してください。
さらっと、読むのではないです。"熟読"です。

そうすれば思いのほか、解決したりします。それでは、次にいきましょう。

あなたも、サポートメールに参加しませんか？

『初めてWeb入門』に取り組んでくださっている方にサポートメールをお送りしています。
ここでは、『初めてWeb入門』では紹介し切れなかったウェブデザインの知恵を配信しています。
名前とメールアドレスだけで参加出来ますので、興味のある方は、ぜひご参加くださいね＾＾

※サポートメールは、いつでも解除できます。詳しくはサポートメールのページをご確認ください。