テーブルを使わずにCSSで行こうパート２

スタイルシートを使えばウェブデザインは思いのまま！ページ管理も楽になり、大幅なデザイン変更も楽になっちゃうよ！スタイルシートを使いこなして脱入門者になろう！サイト作りの基礎を学びたい方は >> 本館ウェブマイスタｰ	さくらインターネットたった１２５円という破格の値段で高機能なレンタルサーバー。業界最大手で安心して使えるよ。３ヶ月無料キャンペーン実施中!!　レンタルサーバーのSpeever 一番高いプランも今なら無料だよ

前回の続きで、様々な場合の例をあげてみることにする。

■例１上３列下１列

この場合、上３列は普通に float:left を行う。
次に <br clear="all"> を書いて上列から抜け出し下の２行目になる。

CSS内容

div.base {
  width: 760px;
}
div.base-left {
  float: left;
  width: 200px;
}
div.base-content {
  float: left;
  width: 400px;
}
div.base-right {
  float: left;
}
div.base-footer {
  float: left;
  width: 760px;
}

htmlのbody内容

<div class="base">
  <div class="base-left"> 内容 </div>
  <div class="base-content"> 内容 </div>
  <div class="base-right"> 内容 </div>
  <br clear="all">
  <div class="base-footer"> 内容 </div>
</div>

■一行の中に左寄せと右寄せを組み合わせる。

Ａ

Ｂ

方法は簡単、Ａは float:left 、Ｂは float:right にするだけだ。

ウェブデザインをスタイルシートでおこなおう！