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

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

サンプル

Contents

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

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

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

webdesignday.jp

【Web デザイン】スプリットレイアウトの参考になるサイトまとめ

昨年くらいから見かけるようになった印象の「スプリットレイアウト」のサイト。今回は「スプリットレイアウト」を取り入れる際の参考になるサイトをまとめてご紹介します。目次スプリットレイアウトとは？スクロール一体タイプスクロール分割タイプスプリットレイアウトとは？「スプリットレイアウト」は「スプリットスクリーン」と言っている方もいますが同じものです。その名のとおりスプリット＝分割するデザインレイアウトのことです。画面を縦2つに分割して見せることで左右の対比が生まれデザインの印象が変わり...

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

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

サンプル1

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;」で固定表示にします。

サンプル1

03.レスポンシブ対応

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

サンプル2

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」にして横幅全体にしました。

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

サンプル2