floatプロパティのテスト

こういう授業を受けている生徒さん達が羨ましいです。
web制作の道へ進む生徒さんは知らず知らずの内に近道を進んでいることに気づいていると思いますが、
ネスケ4の崩壊っぷりを見せて「お前たちは幸せもんだぁ」と武田鉄矢口調で言い放って欲しいです。

※役所関連の仕事ではネスケ4.xが対象ブラウザに入る可能性がなきにしもあらずですが・・・。

MaKOTOさん、お久しぶりです!
生徒たちは「ふーん」という顔で淡々と勉強しています。(笑
テーブルデザインを知らない人は、逆にすごい素直にHTMLとCSSを覚えられるようです。
「おじさんが勉強した頃は大変だったんだぞ」みたいな時代になるのでしょうか‥　ｶﾞｺﾌﾞﾙ。

答えは？

簡単な解説も一緒に載せたいのでもう少しお待ちください。

>こういう授業を受けている生徒さん達が羨ましいです。
同感です。完全独学の自分にはこの問題は???っとなる部分があります。答え待ってます！

>テーブルデザインを知らない人は...
自分の場合はCSSが出始めの、TABLEが一般的だった時代にWebデザインを始めたのですが、移行は楽でした。プログラミングも、オブ脳に変わり始めの時でした。
だから、今までの概念を捨てるのが得意になった気がしますｗ

darkdaftさん、書き込みありがとうございます。

僕の学校では、3ヶ月間、floatプロパティに関する授業が続くのですが、やっぱりそれだけ覚えるのも教えるのも大変なプロパティのようです。
そういえば、僕の場合は完全なテーブルデザインからジワジワとCSSデザインに切り替わっていったのですが、まるで製作の過程と考え方が違ったのでちょっと大変でした。でも理解するにつれて面白みがでてくるもんですね。
floatの問題はもうすぐ答え合わせしますのでまた覗きに来てくださいね。

すいません。時間がないので解説を省いた回答をここに書きます。

問1.

div#box-B {
width: 200px;
float: left;
}

問2.

div#box-B {
width: 110px;
float: left;
}

div#box-C,
div#box-D {
margin-left: 110px;
}

問3.

div#box-B {
width: 200px;
float: right;
}

div#box-D {
clear: both: (または、clear: right)
}

問4.

div#box-B {
width: 100px;
float: left;
}

div#box-C {
width: 100px;
float: right;
}

div#box-D {
margin-left: 110px;
margin-right: 110px;
}

問5.

div#box-B,
div#box-C {
width: 100px;
float: left;
}

div#box-D {
margin-left: 230px;
}

問6.

div#box-B,
div#box-C {
width: 200px;
float: left;
}

問7.

div#box-C,
div#box-D {
width: 200px;
float: right;
}

問8.

div#box-B,
div#box-C,
div#box-D {
width: 50px;
float: left;
}

div#box-Aの高さは0になるので、表示されない。

問9.

div#box-B,
div#box-C,
div#box-D {
width: 50px;
float: right;
}

div#box-Aの高さは0になるので、表示されない。

問10.

div#box-B,
div#box-C,
div#box-D {
width: 50px;
}

div#box-B {
float: right;
}

div#box-C {
float: left;
}

div#box-D {
float: right: (またはleft、どちらでもいい)
}

div#box-Aの高さは0になるので、表示されない。