投稿日：2014年12月27日｜最終更新日: 2018年9月14日

PushとPullでカラムの表示順を変える

HTML・CSS レスポンシブデザイン

レスポンシブWebデザインでは、ブロックの左右の位置を入れ替えて表示するPushとPullと呼ばれる手法があります。

レスポンシブデザインの上下位置の問題点
解決策
PushとPullとは？
コード
解説

レスポンシブデザインの上下位置の問題点

小さい画面のとき、1画面ではページが入りきらない場合があります。レスポンシブWebデザインでは、フロートさせていたブロックを全て下に落とみ、全てのカラムを1行にします。カラムを落とし込むと、左のカラムが上で右のカラムが下になります。

例）デスクトップで開いたとき、テキストを左、写真を右に入れます。

↓

これをスマートフォンで開くと、テキストが上で画像が下になります。

↓

理想は、画像が上で文字が下です。

解決策

画面を小さくしたとき、右側のカラムを上に配置する必要があります。そこで、左のカラムと右のカラムを予め左右逆に入れ替えます。PushとPullの仕組みを利用します。

PushとPullとは？

Pushは、「押す」を意味します。ブロックを左から右に押すイメージです。

Pullは、「引く」を意味します。ブロックを右から左に引くイメージです。

カラムコントロールの例

「five cols」と、「seven cols」という一行に並ぶ2つのカラムがあったとします。

↓

「seven cols」をpullします。

↓

「five cols」をpushします。

↓

「five cols」と「seven cols」が左右逆になります。

コード

cssのbody、p、rowクラス、colsクラス、fiveクラス、sevenクラスは、前回紹介したグリッドのコードを利用します。

→グリッド・システムの基本コード

完成イメージ

デスクトップ画面

（PUSHとPULLを使わない場合）

５カラムが左で、７カラムが右です。

（PUSHとPULLを使った場合）

５カラムが右に配置され、７カラムが左に配置されます。

画面サイズが767px以下

（PUSHとPULLを使わない場合）

全て縦一列になります。５カラムが上で７カラムが下です。

（PUSHとPULLを使った場合）

全て縦一列になります。（PUSHとPULLを使わない場合）と同じく５カラムが上で７カラムが下です。

index.html

<html lang="ja">
<head>
<link href="style.css' ; ?>" rel="stylesheet" type="text/css" />
</head>
<body>
  <h1>5カラム - 7カラムの表示順の入れ替え</h1>
  <h2>PUSHとPULLを使わない場合</h2>
  <div class="row">
    <div class="five cols"><p>5カラム - コード順 1</p></div>
    <div class="seven cols"><p>7カラム - コード順 2</p></div>
  </div>
  <h2>PUSHとPULLを使った場合</h2>
  <div class="row">
    <div class="five cols push-seven"><p>5カラム - コード順 1</p></div>
    <div class="seven cols pull-five"><p>7カラム - コード順 2</p></div>
  </div>
</body>
</html>

style.css

body {
	background: #000;
}

p {
	padding: 0 0 30px;
	background: #B6E1FF;
}

.row {
	width: 1140px;
	max-width: 100%;
	min-width: 768px;
	margin: 0 auto;
	background: #ddd;
}

.row .row {
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0 -1.2%;
}

.cols {
	float: left;
	min-height: 1px;
	padding: 0 1.2%;
	position: relative;
	background: #fff;
}

[class*="clos"] + [class*="clos"]:last-child { float: right; }
[class*="clos"] + [class*="clos"].end { float: left; }

.row .five { width: 41.66%; }
.row .seven { width: 58.33%; }

/* PUSHとPULL */
.pull-five { right: 41.66%; }
.push-seven { left: 58.33%; }

@media screen and (max-width: 767px) {
	.row {
		width: auto;
		min-width: 0;
		margin-left: 0;
		margin-right: 0;
	}

	.cols {
		float: none;
		width: auto !important;
		height: 50px;
	}

	[class*="clos"] + [class*="clos"]:last-child { float: none; }
	[class*="clos"] + [class*="clos"].end { float: none; }

	/*PUSH & PULLの調整*/
	.push-two, .push-three, .push-four, .push-five, .push-six, .push-seven,
	.push-eight, .push-nine, .push-ten { left: auto; }
	.pull-two, .pull-three, .pull-four, .pull-five, .pull-six, .pull-seven,
	.pull-eight, .pull-nine, .pull-ten { right: auto; }
}

解説

index.html

PUSHとPULLを使わない場合

  <div class="row">
    <div class="five cols"><p>5カラム - コード順 1</p></div>
    <div class="seven cols"><p>7カラム - コード順 2</p></div>
  </div>

PushとPullを使用しなかった場合のfiveクラスとsevenクラスです。

PUSHとPULLを使った場合

  <div class="row">
    <div class="five cols push-seven"><p>5カラム - コード順 1</p></div>
    <div class="seven cols pull-five"><p>7カラム - コード順 2</p></div>
  </div>

PushとPullを使用した場合のfiveクラスとsevenクラスです。

fiveをsevenの幅の分だけpushするため、push-sevenクラスを指定します。
sevenをfiveの幅の分だけpullするため、pull-fiveクラスを指定します。

style.css

.row

.row {
	width: 1140px;
	max-width: 100%;
	min-width: 768px;
	margin: 0 auto;
	background: #ddd;
}

前回紹介した「グリッド・システムの基本コード」のコードを利用します。

.row .row

.row .row {
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0 -1.2%;
}

前回紹介した「グリッド・システムの基本コード」のコードを利用します。

.cols

.cols {
	float: left;
	min-height: 1px;
	padding: 0 1.2%;
	position: relative;
	background: #fff;
}

前回紹介した「グリッド・システムの基本コード」のコードを利用します。

「position: relative」で、相対位置への配置を指定します。
相対位置を指定するのは、pull-fiveやpush-sevenでleft、rightを指定するためです。

カラム幅指定

.row .five { width: 41.66%; }
.row .seven { width: 58.33%; }

前回紹介した「グリッド・システムの基本コード」のコードを利用します。

PUSHとPUL

/* PUSHとPULL */
.pull-five { right: 41.66%; }
.push-seven { left: 58.33%; }

pushとpullを指定します。pull-fiveクラスで、ポジションを右から5カラムと同じ幅（41.66%）の位置に指定します。

push-sevenクラスで、ポジションを左から7カラムと同じ幅（58.33%）の位置に指定します。

メディアクエリ

@media screen and (max-width: 767px) {
	.row {
		width: auto;
		min-width: 0;
		margin-left: 0;
		margin-right: 0;
	}

	.cols {
		float: none;
		width: auto !important;
		height: 50px;
	}

	[class*="clos"] + [class*="clos"]:last-child { float: none; }
	[class*="clos"] + [class*="clos"].end { float: none; }

	/*PUSH & PULLの調整*/
	.push-two, .push-three, .push-four, .push-five, .push-six, .push-seven,
	.push-eight, .push-nine, .push-ten { left: auto; }
	.pull-two, .pull-three, .pull-four, .pull-five, .pull-six, .pull-seven,
	.pull-eight, .pull-nine, .pull-ten { right: auto; }
}

767px以下では全て1カラムにします。

@media screen and (max-width: 767px)

前回紹介した「グリッド・システムの基本コード」のコードを利用します。

.row

前回紹介した「グリッド・システムの基本コード」のコードを利用します。

.cols

前回紹介した「グリッド・システムの基本コード」のコードを利用します。

.push-two, .push-three,…

モバイル表示のスタイルリセットを行って完了です。pushのleftとpullのrightをautoに変更します。