2カラムを指定する

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

緑の枠を覆うような形で、もうひとつ

(黄色の枠)を用います。


コードにすると、

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になっていることにも注目してください。

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

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


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

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

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

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

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

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


関連記事

  1. 自己表現ツールとしてのウェブサイト

  2. 表を作る

  3. 【練習】このページを作りなさい

  4. 縦方向にセルを連結する

  5. 新しいページを作る

  6. レンタルサーバーの違い

お手本ナビの無料HPデザイン

ランダムピックアップ