前回の復習前回までの復習異なるブラウザでのWebページ確認現在、記事へのコメントのページで、 次のようなスタイルを使って、 「目次を左」「コメントを右」に配置している人が多いと思います。#spanend #spanadd div.left { #spanend float: left; #spanadd } #spanend #spanadd div.right { #spanend float: right; #spanadd } #spanend #spanaddそのページを、ノート型パソコンにインストールしている、 「Mozilla Firefox」というブラウザで見てください。 きちんと左右に表示されていますか? floatを指定するときの注意では、どのようにすれば、 Firefoxでもこちらの意図したとおりに表示できるでしょうか? それには、次のようにします。#spanend #spanadd div.left { #spanend float: left; #spanadd width: 22%; #spanend #spanadd } #spanend #spanadd div.right { #spanend float: right; #spanadd width: 72%; #spanend #spanadd } #spanend #spanaddこのように、 floatプロパティを使う場合には、 必ずwidthプロパティも設定してください。 ただし、ウィンドウの幅が小さくなると、 また表示が崩れてしまいますので、注意してください。 次へ進んで、 次へ進んで、 今回の内容を見てください。 }} |