ホーム >  WEB全般 >  モバイル表示のグリッド・システム


Posted:2015/01/01 9:00:21 AM|Category : WEB全般

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

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

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

モバイル表示のグリッド指定は、以下のようなレイアウトのことです。
例)
デスクトップ表示:3カラム+9カラム
less0046
モバイル表示(指定有り):1カラム+3カラム
less0047
モバイル表示(指定無し):全て1カラム
less0048

コード

 cssのbody、p、rowクラス、colsクラス、fiveクラス、sevenクラスは、前回紹介したグリッドのコードを利用します。
グリッド・システムの基本コード
また、グリッド・システムはZURB.incが提供するMITライセンスで作成されたFoundationのgridをベースにしています。
foundation.zurb

完成イメージ

デスクトップ表示

(モバイルグリッドを設定しない場合)
less0049
(モバイルグリッドを設定した場合)
less0050
(モバイルグリッドのPushとPull)
less0051

モバイル表示

(モバイルグリッドを設定しない場合)
less0052
(モバイルグリッドを設定した場合)
モバイルで表示すると、幅が全て1カラムにならりません。
1カラムと3カラムになります。
less0053
(モバイルグリッドのPushとPull)
モバイルで表示すると、幅が全て1カラムにならりません。
1カラムと3カラムになります。
less0054

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のモバイル版も記述します。


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

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

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