CSSフロートとイメージ図のようなもの
フロート表示サンプル（授業で作ったレイアウトを左右入れ替えています）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>【CSSフロート】</title> <style type="text/css"> body { background-color: #ccc; } #wrapper { width: 700px; height: auto;/*概念として幅があれば高さがあるよ、の指定。値は必ずauto*/ background-color: #fff; /*overflow: auto; floatでwrapの上にふわふわしているものの高さにあわせて伸びるよ、の指定。auto→hiddenでも可。hiddenはIE6対策？*/ } #content { width: 450px; height: 300px; margin: 0 0 20px 50px; background-color: #999; float: right; } #sidebar { width: 200px; height: 300px; background-color: #666; float: left; } #header { width: 700px; height: 100px; background-color: #6f3; margin-bottom: 20px; } #footer { clear: both; width: 700px; height: 100px; background-color: #f99; } #container { width: 700px; height: auto; margin: 50px auto; } </style> </head> <body> <div id="container"> <div id="header">header</div> <div id="wrapper"> <div id="content"> content </div> <div id="sidebar"> sidebar </div> </div> <div id="footer"> footer </div> </div> </body> </html>
CSSの記述をおむすびにたとえた図
こんなかなあ。
floatに関してイメージしたのはアメンボだったので、
float指定と
clear: both;
の組み合わせの理由が理解できたので、
本当に「おまじない」的な意味合いで記述している部分と、
「おまじないっぽいもの」の区別がつけられるように。
これからの授業でも
「よく記述するからそういうもの」
で済まさざるを得なかった記述に付随する
「なぜそのように記述することがよくあるのか」
が理解できていくのだろうなあ。
