INSPIRATION

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

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

 

目次

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

 

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

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

 

04.応用サンプル

最後に色々やってみました。レスポンシブ対応です。画面がブレイクポイント以下のサイズになったら動画部分を画像に変えています。

 

まとめ

スプリットレイアウトを取り入れると、画面の使い方の幅が広がりますね。

デザインとしては、固定表示エリアでブランディング(ロゴやキャッチコピー)を常に表示しておいて、スクロールエリアでコンテンツを見せる、というパターンが多いようです。

また、固定表示エリアの背景にスライダー、もしくは動画という見せ方をよく見ますが、応用として、スクロール量に合わせて固定表示エリアの背景を変えたりするのも面白いですね。
 

それでは良いWEBデザイン日和を!Have a nice WEBDESIGNDAY!
 

【Webデザイン】縦のラインを活かしたスタイリッシュなサイトデザイン10選+1!
NEXT INSPIRATION
【jQuery】スライダープラグイン「slick」の使い方を詳しく解説
PREVIOUS INSPIRATION