前回の記事の最後からスタート

前回の記事で完成したレイアウトに対して作業を行うので、ここで簡単にそのレイアウトを確認することにしましょう。図１に示すのが、この記事の最初の部分にリンクを用意した、サンプルファイルのなかのstarter_filesフォルダに含まれているindex.htmファイルです。とてもコンパクトで効率の良いレイアウトです。 レイアウトには２列の段組みがあり、画像は含まれていませんが、すべてCSSで制御されています。

図１．前回の記事で作成した２段組みのレイアウト

(+) 大きな画像

フロート機能の注意点について簡単におさらいすることにします。

• フロートには必ず幅の設定が必要
• フロートには左右の位置指定が必要（上下はありません）
• 特定の要素の横にフロート表示させるには、フロート部分のコードが、文書のソース上で、その要素より前に来るようにする
• フロートがテキストやインライン画像に重ならないようにする
• フロートの後にくるブロック要素に幅を設定する代わりに、フロートと同じサイドのマージン設定を利用する
• フロートはドキュメントの「流れ」に反することがあるので、フロートを親コンテナが正しく内含するには、別のコンテナ内に含まれたフロートをクリアしなければならない

メモ：詳しくは、Community MXに掲載されているJohn Gallant、Holly Bergevin両氏のフロート関連記事『フロートの概念*』および『フロートのバグについて、パート１*』を参照してください（要ログイン）。

ページ 2 / 7

前のページ

次のページ