投稿日：2015年1月1日｜最終更新日: 2018年9月4日

モバイル表示のグリッド・システム

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

Gallaxy Sのように、画面サイズの大きい端末が増えてきました。タブレットやスマートフォン向けにも柔軟なレイアウトを組みたいものです。モバイル表示でもカラムが指定できるようなグリッド・システムは、非常に理想的です。

モバイル表示のグリッド指定
グリッド・システムの基礎
完成イメージ
コード
解説

モバイル表示のグリッド指定

モバイル表示のグリッド指定は、以下のようなレイアウトのことです。

例）

デスクトップ表示：3カラム+9カラム

モバイル表示（指定有り）：1カラム+3カラム

モバイル表示（指定無し）：全て1カラム

グリッド・システムの基礎

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

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

また、グリッド・システムはZURB.incが提供するMITライセンスで作成されたFoundationのgridをベースにしています。

→foundation.zurb

完成イメージ

デスクトップ表示

（モバイルグリッドを設定しない場合）

（モバイルグリッドを設定した場合）

（モバイルグリッドのPushとPull）

モバイル表示

（モバイルグリッドを設定しない場合）

（モバイルグリッドを設定した場合）

モバイルで表示すると、幅が全て1カラムにならりません。1カラムと3カラムになります。

（モバイルグリッドのPushとPull）

モバイルで表示すると、幅が全て1カラムにならりません。1カラムと3カラムになります。

コード

index.html

<html lang="ja">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <h3>モバイルグリッドを設定しない場合</h3>
  <div class="row">
    <div class="three cols"><p>3カラム</p></div>
    <div class="nine cols"><p>9カラム</p></div>
  </div>
  <h3>モバイルグリッドを設定した場合</h3>
  <div class="row">
    <div class="three mobile-one cols"><p>デスクトップ： 3カラム / モバイル： 1カラム</p></div>
    <div class="nine mobile-three cols"><p>デスクトップ： 9カラム / モバイル： 3カラム</p></div>
  </div>
  <h3>モバイルグリッドのPushとPull</h3>
  <div class="row">
  <div class="three mobile-one push-three-mobile cols"><p>デスクトップ： 3カラム / モバイル： 1カラム</p></div>
  <div class="nine mobile-three pull-one-mobile cols"><p>デスクトップ： 9カラム / モバイル： 3カラム</p></div>
  </div>
</body>
</html>

style.css

body {
	background: #000;
}

p {
	padding: 0 0 30px;
	background: #B6E1FF;
	text-align: center;
	font-size: 0.8em;
	height: 10em;
}

.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 .one { width: 8.33%; }
.row .two { width: 16.66%; }
.row .three { width: 25%; }
.row .four { width: 33.33%; }
.row .five { width: 41.66%; }
.row .six { width: 50%; }
.row .seven { width: 58.33%; }
.row .eight { width: 66.66%; }
.row .nine { width: 75%; }
.row .ten { width: 83.33%; }
.row .eleven { width: 91.66%; }
.row .twelve { width: 100%; }

/* モバイル表示向け4カラム・グリッド */
.row .mobile-one { width: 25% !important; float : left; padding: 0 1.2%; }
.row .mobile-one:last-child { float : right; }
.row .mobile-one.end { float : left; }
.row .mobile-two { width: 50% !important; float : left; padding: 0 1.2%; }
.row .mobile-two:last-child { float : right; }
.row .mobile-two.end { float : left; }
.row .mobile-three { width: 75% !important; float : left; padding: 0 1.2%; }
.row .mobile-three:last-child { float : right; }
.row .mobile-three.end { float : left; }
.row .mobile-four { width: 100% !important; float : left; padding: 0 1.2%; }
.row .mobile-four:last-child { float : right; }
.row .mobile-four.end { float : left; }

/*モバイル表示向けのPushとPull*/
.push-one-mobile { left: 25%; }
.pull-one-mobile { right: 25%; }
.push-two-mobile { left: 50%; }
.pull-two-mobile { right: 50%; }
.push-three-mobile { left: 75%; }
.pull-three-mobile { right: 75%; }

解説

index.html

  <div class="row">
    <div class="three mobile-one cols"><p>デスクトップ： 3カラム / モバイル： 1カラム</p></div>
    <div class="nine mobile-three cols"><p>デスクトップ： 9カラム / モバイル： 3カラム</p></div>
  </div>

threeカラムのクラスに「mobile-one」クラスを指定します。デスクトップでは3カラムを表示していたdivを、モバイル表示では1カラムで表示します。

デスクトップ表示：3カラム

↓

モバイル表示：1カラム

「グリッド・システムの基本コード」では、デスクトップは全12カラムと考えます。モバイル表示では、全4カラムとします。よって、モバイル表示では以下のような要領でクラスを指定します。

three　→　mobile-one
six →　mobile-two
nine　→　mobile-three
twelve　→　mobile-four

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;
}

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

カラム幅指定

.row .one { width: 8.33%; }
.row .two { width: 16.66%; }
…（略）…

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

カラム幅指定

.row .mobile-one { width: 25% !important; float : left; padding: 0 1.2%; }
.row .mobile-one:last-child { float : right; }
.row .mobile-one.end { float : left; }
…（略）…

モバイル表示でも、基本はデスクトップ表示と同じ仕組みです。
39～41行目でモバイル表示での1カラムを指定します。
幅を25%にして、一度リセットしたfloatとpaddingを再度指定します。
40行目で、ブラウザの小数点以下の扱いの違いを調整するため、横の行の最後になるカラムを右寄せにします。

モバイル表示向けPushとPull

.push-one-mobile { left: 25%; }
.pull-one-mobile { right: 25%; }
.push-two-mobile { left: 50%; }
.pull-two-mobile { right: 50%; }
.push-three-mobile { left: 75%; }
.pull-three-mobile { right: 75%; }

pushとpullのモバイル版も記述します。