下記のテキストに適用されるスタイル宣言は、つぎのとおりです。
P { margin: 0; padding: 0; text-align: justify;}
DIV.menu {float: left; clear: left; width: 11em;
margin: 0; margin-bottom: 10px; padding: 0.5em;}
DIV.menu H1 {font-size: 1.2em; margin: 0; padding: 0;}
DIV.menu UL {margin: 0.2em 0.3em 0.2em 1em; padding: 0;}
DIV.article {padding: 0.5em; margin: 0; margin-left: 14em; margin-right: 2em;
color: black; background: yellow; clear: none;}
このページには、一方側に2個の浮遊「メニュー」があります。 一つは背景が緑色、もう一つは背景が青色です。 'float' プロパティと 'clear' プロパティを設定したため、これらメニューはページの左側に2個、緑色のものの下に青色のものが出現するはずです。 2個のメニューの間には、10pxの隙間があるはずです。 トップメニューとページの上端との間にも10pxの隙間があるはずです。
黄色の長方形(この段落の所属先)の上端は、緑色の長方形の上端に垂直的にそろえられるはずです。
| TABLEテストコーナー | |
'clear' プロパティこのページには、一方側に2個の浮遊「メニュー」があります。 一つは背景が緑色、もう一つは背景が青色です。 'float' プロパティと 'clear' プロパティを設定したため、これらメニューはページの左側に2個、緑色のものの下に青色のものが出現するはずです。 2個のメニューの間には、10pxの隙間があるはずです。 トップメニューとページの上端との間にも10pxの隙間があるはずです。 黄色の長方形(この段落の所属先)の上端は、緑色の長方形の上端に垂直的にそろえられるはずです。 | |