ボックスレイアウトの基本divタグなどのブロックレベル要素を、float属性を使って縦横さまざまな位置にレイアウトする方法をご紹介します。GitHubボックスレイアウトの重要性Webページの製作にあたって、レイアウトは四角形の組み合わせを基本に考えます。HTMLのタグの中でもブロックレベル要素とよばれるもの(divなど)で、コンテンツのグループを作ります。次にCSSで各ブロックの配置を指定してゆきます。divの通常動作ブロックレベル要素の代表としてdivタグを利用します。divタグを連続して記述すると次のように各divの幅が表示領域いっぱいに表示されます。二つのdivは上下に配置されます。*/}divを横並びに配置するdivを横並びに配置するためにはCSSのfloatとwidthを使います。floatは回り込み、widthは幅の指定です。通常であれば横いっぱいに広がってしまうブロックレベル要素をwidthで狭め、そこにできた空間にfloatを使って回り込ませるのです。*/}divをセルの結合・分割のように配置するExcelのセルの結合のように、あるいは分割のように表示をする方法を考えましょう。結合や分割と言っても、あくまで見た目上の話です。実際は横並びにしたdivの枠の中にさらに複数divを入れ子にしています。*/}フロートの解除divタグでfloatの指定をしたまま、後続のブロックレベル要素を配置すると意図しないレイアウトになる場合があります。これはfloatの設定を後続のブロックレベル要素が引き継いでしまうことがあるからです。これを防ぐためには、clearを指定して、floatの指定を解除する必要があります。clearの設定値はleft、right、both(両方)があります。floatでleftを指定していればclearでもleftを指定すれば解除することができます。bothは左右両方を解除してくれるので、とりあえずbothを設定するようにしていても良いでしょう。*/}ヘッダー・フッターの配置ページの構成として、上部にヘッダー、下部にフッターと呼ばれる領域を作ることが多くあります。ヘッダーにはサイト名やロゴ、グローバルナビゲーションなどを配置します。フッターにはコピーライトの表示をはじめ、簡易的なサイトマップなどを表示する場合もあります。both;}コンテンツの中央寄せ(センタリング)サイトコンテンツをまとめて中央に配置するをセンタリングと言います。この配置にはwidthとmarginを指定します。marginは左右をautoに指定することで、ブラウザ側で余白の調整がされて表示されるため、結果的にコンテンツが中央に配置されます。both;}clearfixによるボックスの高さの調整ボックスを横並びにした場合に、各ボックスの高さに差異があると、親になっているボックスを突き抜けて表示がされる場合があります。このような場合はclearfixを使って対処していきます。