ホーム >  WEB全般 >  PushとPullでカラムの表示順を変える


Posted:2014/12/27 9:00:56 AM|Category : WEB全般

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

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

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

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

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

解決策

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

PushとPullとは?

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

カラムコントロールの例

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

「seven cols」をpullします。
less0039

「five cols」をpushします。
less0040

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

コード

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

完成イメージ

デスクトップ画面

(PUSHとPULLを使わない場合)
5カラムが左で、7カラムが右です。
less0042
(PUSHとPULLを使った場合)
5カラムが右に配置され、7カラムが左に配置されます。
less0043

画面サイズが767px以下

(PUSHとPULLを使わない場合)
全て縦一列になります。
5カラムが上で7カラムが下です。
less0044
(PUSHとPULLを使った場合)
全て縦一列になります。
(PUSHとPULLを使わない場合)と同じく5カラムが上で7カラムが下です。
less0045

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%)の位置に指定します。
less0039
push-sevenクラスで、ポジションを左から7カラムと同じ幅(58.33%)の位置に指定します。
less0040

メディアクエリ
@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に変更します。


トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告