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%にします。
また、スタイルはこの他、メインとサブのfloatプロパティをそれぞれleftとrightに設定します。
<header style="width:100%;text-align:center;">ヘッダー</header>
<div style="width:80%;margin:0 auto;">
<div style="float:left;width:70%;text-align:center;">メインコンテンツ</div>
<div style="float:right;width:30%;text-align:center;">サブコンテンツ</div>
</div>
<footer style="clear:both;width:100%;text-align:center;">フッター</footer>
上記のコードでは、メインコンテンツを左に、サブコンテンツを右に、2カラムレイアウトを表現しています。
3カラム以上の場合
メイン1つとサブ2つのコンテンツのスタイルのwidthプロパティを合計100%にします。
また、これらのコンテンツを囲うdivを用意し、そのスタイルのdisplayプロパティをflexにします。
<header style="width:100%;text-align:center;">ヘッダー</header>
<div style="display:flex;justify-content:center;width:80%;margin:0 auto;">
<div style="width:20%;text-align:center;">サブコンテンツ1</div>
<div style="width:60%;text-align:center;">メインコンテンツ</div>
<div style="width:20%;text-align:center;">サブコンテンツ2</div>
</div>
<footer style="width:100%;text-align:center;">フッター</footer>
上記のコードでは、メインコンテンツを中央に、サブコンテンツ2つを左右に、3カラムレイアウトを表現しています。