スプリットレイアウトの作り方を解説!レスポンシブにも対応！

以前「スプリットレイアウトの参考になるサイトまとめ」という記事を書きましたが、今回は実践編として実際にスプリットレイアウトのサイトを作成していきたいと思います。

Contents

01.スプリットレイアウトとは
02.スプリットレイアウトの実践
03.レスポンシブ対応
04.応用サンプル
まとめ

01.スプリットレイアウトとは

その名のとおり画面をスプリット＝分割するデザインレイアウトのことです。画面を縦2つに分割して見せることで左右の対比が生まれデザインの印象が変わります。

02.スプリットレイアウトの実践

では作成していきましょう。今回、左を固定表示、右をスクロール表示にしていきます。まずはサンプルをご覧ください。

HTML

<div class="split">
    <div class="split-item split-left">
        <div class="split-left__inner">
            left
        </div><!--split-left__inner-->
    </div><!--split-item split-left-->
    <div class="split-item split-right">
        <div class="split-right__inner">
            right
        </div><!--split-right__inner-->
    </div><!--split-item split-right-->
</div><!--split-->

CSS

.split{
    display: table;
    width: 100%;
}
.split-item{
    display: table-cell;
    padding: 80px;
    width: 50%;
}
.split-left{
    background: #000;
    color: #fff;
    position: relative;
}
.split-left__inner{
    height: 100%;
    position: fixed;
    width: 50%;
}
.split-right__inner{
    height: 8000px;
}

2,6行目　左右の横に並んだレイアウトは、全体をラップしている「.split」に「display: table;」、左右のボックス「.split-item」に「display: table-cell;」を指定しています。

17行目　「.split-left__inner」に「position: fixed;」で固定表示にします。

03.レスポンシブ対応

次にレスポンシブに対応させていきます。今回はブレイクポイントを1024pxにしました。画面が1024px以下のサイズの場合は固定表示エリアとスクロールエリアが縦に並ぶようにします。

CSS

下記のCSSを追加します。

@media screen and (max-width:1024px) {
    .split{
        display: block;
    }
    .split-item{
        display: block;
        width: auto;
    }
    .split-left__inner{
        position: inherit;
        width: auto;
    }
}

2行目　全体をラップしていた「.split」を「display: block;」に。
5行目　左右のエリア「.split-item」も同じく「display: block;」に。また幅も「width:auto」にして横幅全体にしました。
9行目　「.split-left__inner」を「position:fixed」で固定していたので解除。こちらも「width:auto」にして横幅全体にしました。

スプリットレイアウトがトリッキーなレイアウトだったので、レスポンシブの場合は元に戻していくといった感じです。