KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2004/11th/review のバックアップ(No.3)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• 現在との差分 - Visual を表示
• ソース を表示
• Lecture/InfoDesignB2004/11th/review へ行く。
  • 1 (2004-12-24 (金) 03:23:45)
  • 2 (2007-02-24 (土) 07:05:44)
  • 3 (2007-02-24 (土) 07:10:26)

前回までの復習

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

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

div.left {
  float: left;
}
div.right {
  float: right;
}
</pre>

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

**floatを指定するときの注意 [#p5306607]
では、どのようにすれば、
Firefoxでもこちらの意図したとおりに表示できるでしょうか？

それには、次のようにします。
#pre(novervatim){{
div.left {
  float: left;
  width: 22%;
}
div.right {
  float: right;
  width: 72%;
}
</pre>

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




次へ進んで、
今回の内容を見てください。
----
#navi2(Lecture/InfoDesignB2004/11th,toc,next)