1月24日(水)2コマ目
今日、やったこと
横に並べる
今日のホワイトボード
普通は縦にならぶ
とくになにも指定がなければ、各タグはHTMLファイルの上から順に縦に並びます。
|
| 図 ふつうは縦に並ぶ |
float1.html
style1.css
3つの<div>タグは縦に並んで表示されます。
|
| 図 ふつうは縦に並ぶ |
左右横並びに表示
左右横並びに表示するには、横並びの要素にfloat:leftを指定します。
 |
| 図 float:left;で横並び |
先ほどのfloat1.htmlに対して、以下のstyle2.cssを適用します。
style2.css
2つ目の<div>タグにfloat:left;が設定されるため、
2つ目の<div>タグ(緑色)は赤色や青色の<div>タグより1段上に浮き上がる
3つ目の<div>タグ(青色)は浮き上がった2つ目の<div>タグ(緑色)の下に潜り込む
のように表示されます。
|
| 図 2つ目の<div>タグのfloat:left;設定 |
さらに以下のstyle3.cssを適用します。
style3.css
2つ目、3つ目の<div>タグにfloat:left;が指定されているため、この２つの<div>タグが横並びで表示されます。
|
| 図 2つ目、3つ目の<div>タグにfloat:left;設定 |
※float自体は横並びにするための設定項目ではない。結果的に横並びになる。
横並び解消
以下のHTML、CSSを表示すると4つ目の<div>タグ(黄色)はfloat:left;で浮き上がった2つ目(緑色)、3つ目(青色)の下に潜り込みます。
float2.html
style4.css
|
| 図 float:left;が設定された次の要素 |
4つ目の<div>タグにclear:left;を設定すると潜り込まないようになります。
style5.css
|
| 図 4つ目の<div>タグにclear:left;設定 |
 |
| 図 clear:left;で横並び解消 |
まとめ
ややこしいことを抜きにすると
- 横並びの要素にはfloat:left;設定
- 直前までの横並びを解消したい要素にはclear:left;設定
です。
次回は
横並びのつづきです。
