ホームページ上での要素配置について
div要素など、ブロック要素と呼ばれる要素は、上から下へ縦並びで配置されます。
でもそれではWebページのレイアウトがうまくできませんよね。
要素を左右に配置するには「float」を使って配置する方法と、「position」を使う方法があります。
floatって何？
float（フロート）を使った要素はフローティングボックスという特殊な要素となり、左寄せ・右寄せされるようになります。
フローティングボックスとは、float（浮遊状態）になったボックスの事を指します。フローティングボックスにすることで、他の要素からは「存在しないもの」として扱われます。
存在しないものとして扱われるので、下に続く要素と重なってしまうように思ってしまいますが、他の要素はフローティングボックスに重ならないように避けて配置されるというルールがありますので、左寄せにしたフローティングボックスの下に続く要素が回り込んで右側に配置される。という仕組みです。
少し難しく書いてしまいましたが、「左寄せにしたい要素はfloat:left;」「右寄せにしたい要素はfloat:right;」を指定してあげれば要素を左右に配置させることができるようになります。
floatで要素を配置したらclearを使ってfloatを解除する
floatを使って左右に配置した部分の下が整列されない場合があります。
これは、「フローティングボックスに重ならないように避けて配置する」というルールが影響しています。
これを回避するには、clearを使って回り込みを解除する必要があります。
右側への回り込みを解除したい時には「clear:left;」
左側への回り込みを解除したい場合には「clear:right;」
左側と右側をまとめて解除したい場合には「clear:both;」を回り込ませたくない要素にCSSで指定します。
3通りありますが、左右どちらも解除できる「clear:both;」がよく使われます。
floatを使って左右配置した後にはclearで解除することで上手にレイアウトができるようになるはずです。
positionって何？
positionはポジションと読み、要素の表示位置を指定するために使われます。
positionには「static」「absolute」「relative」「fixed」の4つがあります。
static：位置を指定しない、初期状態を差す
absolute：基準となる部分（主にbody）を基準に表示したい位置を座標で指定する時に使われる
relative：その要素のボックス本来の位置を基準にして、表示したい位置を座標で指定する時に使われる
fixed：ウィンドウを基準にして、表示したい位置を座標で指定する時に使われる
基準となる位置は左上です。
その位置から、「top:50px;」「left:60px；」とったように数値を指定して配置する位置を決めます。
positionを使った配置はfloatと違って、要素同士が重なり合うので注意が必要です。
要素を重ねることでしかできないレイアウトやデザインもあるので、必要に応じて使い分けましょう。
重なる要素の順序を入れ替えるには「z-index」を使います。
z-index:1;やz-index:2;といったように、数字の大きい方が上に重なるので、上手に使ってください。
まとめ
・要素を左右に配置したいときは「float」を使用する
・floatを指定した要素はフローティングボックスとなり、他の要素と重ならないように配置される
・floatを使って配置した要素に続く要素が回り込んでしまうのを解除するには「clear」を使用する
・positionを使った配置もある
・positionはfloatと異なり、要素同士が重なる
・positionで配置した要素の重なり順序は「z-index」を使って指定できる
