スプリットスクリーンレイアウトについて

スプリットスクリーンとは、画面中央で分割して左右で別々の情報を見せるレイアウト手法です。分割されたそれぞれの内容は大きく表示されるため、パーツを引き立たせるようなデザインを作成することができます。

スプリットスクリーンの作り方

ここでは、左右に分割して画面の右側だけをスクロールさせるといったシンプルなスプリットスクリーンレイアウトを作っていきます。

左右のボックスを作る

まずは、HTMLで左右のボックスをマークアップします。

<div class="split left-box">左エリア</div>
<div class="split right-box">右エリア</div>

続いて、CSSでレイアウトを整えていきます。

html,body {
  height: 100%;
}
.split {
  position: absolute;
  width: 50%;
  height: 100%;
}
.left-box {
  left: 0;
}
.right-box {
  right: 0;
  overflow-y: scroll;
}

画面全体にきちんと表示されるようにhtml要素とbody要素に対して高さを100％で指定をしています。あとは、画面2分割にするので、それぞれのボックスを50％にして左右に分けます。そして、右側のボックスに対して「overflow-y: scroll;」を指定することで、スクロールをすることができます。

レスポンシブ対応させる場合

レスポンシブWebデザインに対応させて作成する場合、スマホなどの小さい画面で分割して表示させると非常に見づらくなってしまいますので、小さな画面では縦に1列に並べて見せるようにすると良いでしょう。

@media screen and (max-width:599px) {
  .split {
    position: relative;
    width: 100%;
    height: auto;
  }
}

このようにすることで、599px以下の画面サイズでは縦1列、600px以上になると左右2分割のレイアウトで表示されるようになります。

• DEMO

以上が、スプリットスクリーンレイアウトの基本的な作成方法となります。