KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2004/11th/review

前回までの復習

異なるブラウザでのWebページ確認

現在、記事へのコメントのページで、 次のようなスタイルを使って、 「目次を左」「コメントを右」に配置している人が多いと思います。

div.left {
  float: left;
}
div.right {
  float: right;
}

そのページを、ノート型パソコンにインストールしている、 「Mozilla Firefox」というブラウザで見てください。 きちんと左右に表示されていますか？

floatを指定するときの注意

では、どのようにすれば、 Firefoxでもこちらの意図したとおりに表示できるでしょうか？

それには、次のようにします。

div.left {
  float: left;
  width: 22%;
}
div.right {
  float: right;
  width: 72%;
}

このように、 floatプロパティを使う場合には、 必ずwidthプロパティも設定してください。 ただし、ウィンドウの幅が小さくなると、 また表示が崩れてしまいますので、注意してください。

次へ進んで、 今回の内容を見てください。

}}