ドリル式ホームページの作り方

floatタグを使用する

ドリル式ホームページの作り方TOP  >>  Lesson8〜floatを使ったレイアウト〜  >>  floatタグを使用する

floatタグを使用する

floatの概要

任意のブロックレベル要素タグに対して、css内でfloatを使うと、指定した方向にボックスを寄せることができます。

leftで左寄せ、rightで右寄せにすることができます。

p {
float:left; */ 左寄せ */
float:right; */ 右寄せ */
}

float

floatを使用するときは、通常、width(幅)を指定して、各コンテンツの幅とサイト全体の幅を必ず明確にしておきます。

使ってみるとわかるんですが、コンテンツの幅とサイト全体の幅を明確にしていないと、ブラウザを縮小表示したときに、コンテンツの回り込みができずに、レイアウトが崩れてしまうためです。

float

floatを使用したレイアウトの方法は、下のような全て左フロートで作る以外にも、下のようにrightやmarginを使用する方法もあります。

float

IEのfloatバグ

IE(インターネットエクスプローラー)は、floatした方向にmarginが広がるというバグを持っているので、marginを再度指定、もしくはゼロに指定しないと、全体の幅が予想している幅よりも広がりますので注意してください。

サンプルは*(ユニバーサルセレクタ)にて、margin:0を設定してるので、気にしなくてもよいです。

流し込みを解除する

clearというのは流し込みを解除するタグで、right、left、bothを指定することで、floatによる流し込みを解除できます。

floatによる流し込みとは、下の図のように、floatされるボックスの高さが異なるとき、本当なら左のボックスAの下に配置させたいボックスが、右の高さの低いボックスBの後に流し込まれてしまうと言うことを意味します。

float

clear:bothを指定すると、右左両方への流し込みが解除されるので、赤矢印の長さのクリアランスと呼ばれる特殊な空間が自動的に広がって、フッターのボックスを流し込ませずに配置させることができます。

p {
clear:both; */ 左右の流し込みを解除 */
}


Lesson8〜floatを使ったレイアウト〜

  1. XHTMLの骨格を記述する
  2. floatタグを使用する
  3. divとfloatで骨格を作る
  4. div内に文章を記述する
  5. スタイルシートを適用する
  6. ブラウザによる表示の違いを学ぶ
  7. サイトを画面の中央に配置する
  8. ロールオーバーボタンの作成(文字の背景切替型)
  9. ロールオーバーボタンの作成(文字画像切替型)
  10. サンプルにロールオーバーメニューを配置する

CGIの設置

  1. 掲示板を設置する
  2. カウンターを設置する
  3. アクセス解析を導入する
  4. アクセスランキングを設置する

ホームページの公開

  1. ドメインを取る
  2. サーバーを選ぶ
  3. ファイルをアップロード(公開)
Copyright(C) ドリル式ホームページの作り方 all right reserved.