CSS で 3 列レイアウトを実装するいくつかの方法と利点と欠点

序文

3 列レイアウトは、その名前が示すように、両側が固定され、中央が適応します。実際の開発では、3 列レイアウトは非常に一般的です。たとえば、Taobao のホームページは典型的な 3 列レイアウトです。左側の商品ナビゲーションと右側のナビゲーションは固定幅で、中央のメインコンテンツはブラウザの幅に適応します。

次のようなレイアウトを想定してみましょう。高さはわかっていて、左列と右列の幅はそれぞれ 300 ピクセル、中央は適応型です。これを実現する方法はいくつありますか?それぞれの利点と欠点は何でしょうか?

この記事のソースコードは3列レイアウトのソースコードをクリックしてください。スターやフォークも大歓迎です。

1. フローティングレイアウト

<!DOCTYPE html>
<html>
<ヘッド>
    <メタ文字セット="utf-8">
    <title>レイアウト</title>
    <スタイル メディア="スクリーン">
        html * {
            パディング: 0;
            マージン: 0;
        }
        .layout 記事 div {
            最小高さ: 150px;
        }
    </スタイル>
</head>
<本文>
    <!--フローティングレイアウト-->
    <セクションクラス="レイアウトフロート">
        <スタイル メディア="スクリーン">
            .layout.float .left {
                フロート: 左;
                幅: 300ピクセル;
                背景: 赤;
            }
            .layout.float.center {
                背景: 黄色;
            }
            .layout.float .right {
                フロート: 右;
                幅: 300ピクセル;
                背景: 青;
            }
        </スタイル>
        <h1>3列レイアウト</h1>
        <記事クラス="left-right-center">
            <div class="left"></div>
            <div class="right"></div> // 右の列は中央のコンテンツの前に記述する必要があります<div class="center">
                <h2>フローティングソリューション</h2>
                1. これは 3 列レイアウトのフローティング ソリューションです。2. これは 3 列レイアウトのフローティング ソリューションです。3. これは 3 列レイアウトのフローティング ソリューションです。4. これは 3 列レイアウトのフローティング ソリューションです。5. これは 3 列レイアウトのフローティング ソリューションです。6. これは 3 列レイアウトのフローティング ソリューションです。
            </div>
        </記事>
    </セクション>
</本文>
</html>

このレイアウトでは、DOM 構造を最初にフローティング部分で記述し、次に中央のブロックで記述する必要があります。そうしないと、右側のフローティングブロックが次の行になってしまいます。
フローティングレイアウトの利点は、比較的シンプルで互換性が優れていることです。ただし、フローティングレイアウトには制限があります。フローティング要素はドキュメントフローから分離されるため、クリアする必要があります。これを適切に処理しないと、親コンテナーの高さが崩れるなど、多くの問題が発生します。

2. 絶対レイアウト

   <!--絶対レイアウト-->
    <セクションクラス="レイアウト絶対">
        <スタイル>
            .layout.absolute .left-center-right>div{
                position: absolute; // 3 つのブロックはすべて絶対配置されます}
            .layout.absolute.left {
                左:0;
                幅: 300ピクセル;
                背景: 赤;
            }
            .layout.absolute.center {
                右: 300px;
                left: 300px;//左右に300px background: yellow;
            }
            .layout.absolute.right {
                右: 0;
                幅: 300ピクセル;
                背景: 青;
            }
        </スタイル>
        <h1>3列レイアウト</h1>
        <記事クラス="左-中央-右">
            <div class="left"></div>
            <div class="center">
                <h2>絶対位置決めソリューション</h2>
                1. これは 3 列レイアウトのフローティング ソリューションです。2. これは 3 列レイアウトのフローティング ソリューションです。3. これは 3 列レイアウトのフローティング ソリューションです。4. これは 3 列レイアウトのフローティング ソリューションです。5. これは 3 列レイアウトのフローティング ソリューションです。6. これは 3 列レイアウトのフローティング ソリューションです。
            </div>
            <div class="right"></div>
        </記事>
    </セクション>

絶対位置レイアウトの利点は、高速でセットアップが簡単で、問題が発生しにくいことです。欠点は、コンテナーがドキュメントフローの外側にあり、子孫要素もドキュメントフローの外側にあることです。高さが不明な場合は問題が発生し、この方法の有効性と使いやすさが低下します。

3. フレックスボックスレイアウト

    <!--フレックスボックスレイアウト-->
    <section class="レイアウトフレックスボックス">
        <スタイル>
            .layout.flexbox .left-center-right{
                ディスプレイ: フレックス;
            }
            .layout.flexbox .left {
                幅: 300ピクセル;
                背景: 赤;
            }
            .layout.flexbox.center {
                背景: 黄色;
                フレックス: 1;
            }
            .layout.flexbox .right {
                幅: 300ピクセル;
                背景: 青;
            }
        </スタイル>
        <h1>3列レイアウト</h1>
        <記事クラス="左-中央-右">
            <div class="left"></div>
            <div class="center">
                <h2>Flexbox ソリューション</h2>
                1. これは 3 列レイアウトのフローティング ソリューションです。2. これは 3 列レイアウトのフローティング ソリューションです。3. これは 3 列レイアウトのフローティング ソリューションです。4. これは 3 列レイアウトのフローティング ソリューションです。5. これは 3 列レイアウトのフローティング ソリューションです。6. これは 3 列レイアウトのフローティング ソリューションです。
            </div>
            <div class="right"></div>
        </記事>
    </セクション>

Flexbox レイアウトは CSS3 の新しいレイアウトです。上記の 2 つの方法の欠点を解決するように設計されており、より完璧なレイアウトです。現在、モバイル端末のレイアウトにもflexboxが使用されています。 flexbox の欠点は、IE10 でのみサポートされていることですが、IE10 バージョンは -ms 形式です。

4. テーブルレイアウト

<!--テーブルレイアウト-->
    <section class="レイアウトテーブル">
        <スタイル>
            .layout.table .left-center-right {
                表示: テーブル;
                高さ: 150px;
                幅: 100%;
            }
            .layout.table .left-center-right>div {
                表示: テーブルセル;
            }
            .layout.table .left {
                幅: 300ピクセル;
                背景: 赤;
            }
            .layout.table .center {
                背景: 黄色;
            }
            .layout.table .right {
                幅: 300ピクセル;
                背景: 青;
            }
        </スタイル>
        <h1>3列レイアウト</h1>
        <記事クラス="左-中央-右">
            <div class="left"></div>
            <div class="center">
                <h2>テーブルレイアウトソリューション</h2>
                1. これは 3 列レイアウトのフローティング ソリューションです。2. これは 3 列レイアウトのフローティング ソリューションです。3. これは 3 列レイアウトのフローティング ソリューションです。4. これは 3 列レイアウトのフローティング ソリューションです。5. これは 3 列レイアウトのフローティング ソリューションです。6. これは 3 列レイアウトのフローティング ソリューションです。
            </div>
            <div class="right"></div>
        </記事>
    </セクション>

テーブルレイアウトの互換性は非常に良好です (下図を参照)。フレックスレイアウトに互換性がない場合は、テーブルレイアウトを試すことができます。コンテンツがオーバーフローすると、親要素が自動的に拡張されます。

表のレイアウトにも欠点があります。①列の余白を設定できない。②SEOに適していない。③1つのセルの高さが制限を超えると、両側のセルも高くなりますが、これが望んでいる効果ではない場合があります。

5. グリッドレイアウト

    <!--グリッドレイアウト-->
    <セクションクラス="レイアウトグリッド">
        <スタイル>
            .layout.grid .left-center-right {
                表示: グリッド;
                幅: 100%;
                グリッドテンプレート列: 300px 自動 300px;
                grid-template-rows: 150px; //行の高さ}
            .layout.grid .left {
                背景: 赤;
            }
            .layout.grid .center {
                背景: 黄色;
            }
            .layout.grid .right {
                背景: 青;
            }
        </スタイル>
        <h1>3列レイアウト</h1>
        <記事クラス="左-中央-右">
            <div class="left"></div>
            <div class="center">
                <h2>グリッドレイアウトソリューション</h2>
                1. これは 3 列レイアウトのフローティング ソリューションです。2. これは 3 列レイアウトのフローティング ソリューションです。3. これは 3 列レイアウトのフローティング ソリューションです。4. これは 3 列レイアウトのフローティング ソリューションです。5. これは 3 列レイアウトのフローティング ソリューションです。6. これは 3 列レイアウトのフローティング ソリューションです。
            </div>
            <div class="right"></div>
        </記事>
    </セクション>

CSS グリッドは、グリッドレイアウトを作成するための最も強力で簡単なツールです。テーブルと同様に、グリッドレイアウトを使用すると、Web デザイナーは要素を列または行に配置できますが、テーブルとは異なり、グリッドレイアウトにはコンテンツ構造がないため、テーブルのようなさまざまなレイアウトを作成することはできません。たとえば、グリッドレイアウト内の子要素はすべて、重なり合って同じように配置されるように配置できます。

しかし、グリッドレイアウトの互換性は良くありません。 IE10 以降でサポートされていますが、一部のプロパティのみがサポートされています。

VI. 結論

上記で詳しく紹介した 5 つのレイアウトの長所と短所を踏まえて、実際の開発ではどのレイアウトが最適な選択でしょうか?読者はそれぞれの心の中に答えを持っていると信じています。
実際の開発では、フレックスレイアウトとグリッドレイアウトでレイアウトを処理できると思います。両方のブラウザーがこれら 2 つのモジュールをサポートしていると仮定すると、ページのレイアウトにはグリッドとフレックスボックスのどちらを選択しますか? Flexbox は 1 次元レイアウトであり、コンテンツブロックを直線上にのみ配置できます。一方、グリッドは 2 次元レイアウトです。前に簡単に述べたように、デザイン要件に応じて、コンテンツブロックを任意の場所に配置できます。したがって、これ以上苦労せずに、どちらがレイアウトに適しているかがわかるはずです。さらに、IE の下位バージョン (IE8+ など) との互換性を確保したい場合は、テーブルレイアウトを検討できます。

最後に皆さんに質問です。中央部分がコンテンツの高さによって引き伸ばされる場合、左右の列も引き伸ばす必要があります。これらの 5 つのレイアウトのうちどれがまだ使用できますか?

答え: フレックスレイアウトとテーブルレイアウト