はじめに CSSによるページレイアウト Webページのレイアウトを作るとき、要素の位置を操作するCSSはいくつかあります。 代表的なものとしては下記です。 通常フロー フレックスボックス グリッド フロート(ほとんど使わない) 位置指定(position) 表レイアウト(table) など 通常フロー CSSが何も適用していない場合、Webページ上の要素はもともとHTMLが持つルールで表示されます。 ブロックレベル要素のコンテンツは、親要素の幅の100%で、高さがコンテンツに準じます。 インライン要素は、コンテンツと同じ幅・高さを持ちます。 視覚的にみると以下のような感じです。 <div class="container"> <div>ブロック要素です。</div> <span>インライン要素です。</span> </div> .container{ height: 200px; back