HTMLの1カラムと2カラムのレイアウトの作り方【現役エンジニアが解説】

今回は、HTMLの1カラムと2カラムのレイアウトの作り方について、それぞれに分け、簡単に解説していきます。

1カラムレイアウト

メインコンテンツのスタイルのwidthプロパティを100%にします。

スタイルはwidthプロパティのみを設定し、displayプロパティは初期値のままにします。

<header style="width:100%;text-align:center;">ヘッダー</header>
<div style="width:80%;margin:0 auto;">
    <div style="width:100%;text-align:center;">メインコンテンツ</div>
</div>
<footer style="width:100%;text-align:center;">フッター</footer>

上記のコードでは、コンテンツがメインコンテンツのみの1カラムのレイアウトを表現しています。

2カラムレイアウト

メインとサブのコンテンツのスタイルのwidthプロパティを合計100%にします。