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. 2カラムデザインを実装する

  5. 入門を終えたあなたがプロ並みのウェブデザインを構築できるあらゆる理由

  6. 写真をあれこれ装飾する

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

ランダムピックアップ