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

PROGRAM

今回は、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カラムレイアウトを表現しています。