CSS編:レスポンシブデザインのグリッドレイアウトを詳細解説

投稿日時:2014年8月12日 カテゴリー:CSS

いまさらながら、グリッドレイアウトのレスポンシブデザインについて記載したいと思います。
レスポンシブデザインのグリッドレイアウトについて可能な限りわかりやすく、フレームワークを使用しなくてもコーディングできるよう記載したいと思います。

グリッドレイアウトのレスポンシブデザインを理解することで、フレームワークを利用するよりもはるかに応用のきくページが作成できます。

最終的には以下のようなページができるように説明していきます。
完成品のページで画面の幅を変更してみてください。
完成品を確認

もし、時間がないという方はGoogleで「グリッドレイアウト レスポンシブデザイン」で検索して上位表示したページのツールを使うことをお勧めします。
ちなみに私は以下のサービスを推します。

■gridpak
http://gridpak.com/

シンプルで操作性がよく、グリッドレイアウトの基本的なcss のみ。ごちゃごちゃと他の機能はいらないと思っておられる方にお勧めです。

■bootstrap
http://getbootstrap.com/

グリッド幅は固定されるがとにかく多機能。
Bootstrap だけで簡単にかっこいいレスポンシブなページが作れます。

目次

対象ユーザ

1.レスポンシブデザインの概要を理解している(以下の記載でなんとなくわかった)

レスポンシブデザインとは、画面幅に合わせて CSS や JavaScript その他技術を駆使して画面幅に合わせたデザインに最適化することを言います。
大抵は、PC タブレット スマホに合わせて最適化されます。

これは有名なフレームワーク bootstrap のページです。

レスポンシブデザイン参考bootstrap

2. グリッドレイアウトの概要を理解している(以下の記載でなんとなくわかった)

一定の幅に整列された幅(カラム)を基準にしてコンテンツを配置していく手法です。

グリッドの概要図

3.任意画面幅により好きな数にコンテンツを横並べできない

<ul>
<li>1<li>
<li>2<li>
<li>3<li>
<li>4<li>
</ul>

これを指定の画面幅で指定数に整列ちさせることができるCSSコーダーはこの記事を見る必要はありません。そしてこの好きな画面幅で整列させることが、レスポンシブデザインの奥義の1つだと私は思っています。

この部分を理解すれば、グリッドじゃなくても、毎回 div 要素に col などのクラスを指定しなくても、簡単にレスポンシブなページを作ることができます。

指定画面での整列図

レスポンシブデザインのグリッドレイアウトとは

まずは、グリッド(カラム)数6 で見ていきましょう。
なお、1 2 3 4 6 と多くの整数で割り切れるので大抵のレスポンシブデザインのカラムは 12 です。

グリッドレイアウトの基本

グリッドレイアウトの基本はカラムが集まりです。
ガーターはカラム間のスペースです。
カラム数6の場合の1カラムの幅は 100%/6 =16.66666% になります。

グリッドレイアウト基本図

グリッドレイアウトでコンテンツを配置する

パソコン(PC)の場合

グリッドにしたがって、PC版の box を配置します。

PCコンテンツをグリッドで配置する図

きれいに配置できました。この整列した感じがたまりません。
それぞれ以下のような計算ができます。

  • ヘッダー:6カラム(100%)
  • メイン:4カラム (66.66666%)
  • サイドバー:2カラム (33.33333%)
  • media:2カラム (33.33333%)
  • フッター:6カラム(100%)

タブレットのコンテンツ配置

グリッドでタブレットのホームページ表示する場合のコンテンツを配置します。
タブレットの場合、メインとサイドバーが並列していると、一番見てほしいメインコンテンツの幅が小さくなって見にくいです。
ここは、サイドバーはメインコンテンツの下に置くことにしましょう。

コンテンツを配置タブレット図

タブレットは、メインとサイドバーのグリッド数を変更しました。

  • ヘッダー:6カラム(100%)
  • メイン:6カラム (100%)
  • サイドバー:6カラム (100%)
  • media:2カラム (33.33333%)
  • フッター:6カラム(100%)

モバイル

モバイルは、縦長なのですが、mediaだけは横に並べて表示しようと思います。

コンテンツを配置図モバイル

  • ヘッダー:6カラム(100%)
  • メイン:6カラム (100%)
  • サイドバー:6カラム (100%)
  • media:3カラム (50%)
  • フッター:6カラム(100%)

これで、PC、タブレット、モバイルの配置が決定しました。
これ以降はhtml CSS でコーディングしていきましょう。

CSS の重要なプロパティ

CSS でコーディングする前に事前に 2つの重要なプロパティを紹介します。

Media Queries

レスポンシブなデザインでは、画面のサイズに合わせて違う CSS を記載しなければいけません。
そのために使用するのが Media Queries です。

@media screen and (min-width:768px){
/*768px 以上の画面幅て適用する CSS*/
}

@media screen and (min-width:1024px){
/*1024px 以上の画面幅て適用する CSS*/
}

box-sizing:border-box

box-sizing:border-box を指定すると、paddingとボーダーを幅と高さに含めることができます。
有名な図で記載すると

box-sizingなしの図
Width 200px Padding-left 20px なら 幅は 220px になります。

box-sizingありの図
Width 200px Padding-left 20px だが Paddingは width 幅に含まれるため 幅は 200px になります。
Padding-left 40px にしても同じく幅は 200pxになります。

これは後々ガータをcss で指定するのに使います。

CSS コーディング

基本知識がそろったので、HTML CSS のコーディングに入ります。

仕様

  • 1カラム 160px
  • ガーターが左右 14px
  • PC 版のマックス幅は 960px

グリッドモデル設計図

ブレークポイントの設定

ブレークポイントとは、レスポンシブデザインにて画面の幅によりレイアウトを切り替えるポイントのことです。

今回は以下に設定します。

  • PC:1024px 以上
  • タブレット:1023px ~ 769px
  • モバイル:768px 以下

モバイルコーディング

では、ここはモバイルファーストにならってモバイルからコーディングをしていきましょう。
モバイルファーストを知りたい方は、検索してください。

まずは HTML です。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>レスポンシブ</title>
  
<link rel="stylesheet" media="all" type="text/css" href="core.css" />
<script type="text/javascript" src="./holder.js"></script>
  
</head>

<body>

<script> 
//holder.js の設定。今回は省略
</script>

 <header>
  <img src="holder.js/100%x200/header">
  </header>
  
  <div id="main">
  <div id="mainContens">
  <img src="holder.js/100%x400/main">
  </div>

 <aside>
  <img src="holder.js/100%x400/side"> 
  </aside>

 <div id="media">
  <ul>
  <li><img src="holder.js/100%x200/media"></li>
  <li><img src="holder.js/100%x200/media"></li>
  <li><img src="holder.js/100%x200/media"></li>
  </ul>
  </div>
  
  </div><!--end main-->
  
  <footer>
  <img src="holder.js/100%x200/footer"> 
  </footer> 
</body>
</html>

HTML はこれでほぼ固定です。
ちなみに、holder.js はダミーの画像を生成する JavaScript です。

CSS は以下がデフォルトです。
一部リセットと全ての Box にmargin-bottom: 20pxを設定しているだけ。

*{
	margin: 0;
	padding:0;
 }
ul,ol{ 
	list-style:none
}

header,#mainContens,aside,#media li,footer{
	margin-bottom: 20px;
}

画面のスクリーンショットはこんな感じです。
クリックで、拡大します。
モバイルスクリーンショット1

モバイルの場合 media 以外はcss を変更する必要はなさそうです。
mediaについては、3カラム (50%)を使いたいので以下の CSS を追加しましょう。

#media li{
	width:50%; /* 3カラム */
	padding-right: 14px; /* ガーター */
	padding-left: 14px; /* ガーター */
	float: left;
}

クリックで拡大します。
モバイルスクリーンショット2

mediaの大きさは確かに 50% になりましたが、float での横並びが整列していません

なぜでしょうか。
chorom で解析してみます。

chrome 解析結果1

Chromの画面幅 500px の場合のデータです。
278px の media が 2個存在する場合、flote で横並びにするためには、合計 556px の画面幅が必要です。

つまり、画面幅がたりないため、2つ目の media はカラム落ちして横並びにならなかったというわけです。
ではここで、box-sizing:border-box を使って padding の分も width に組み込みましょう。CSS を以下に変更します。

#media li{
	width:50%; /* 3カラム */
	padding-right: 14px; /* ガーター */
	padding-left: 14px; /* ガーター */
	float: left;
	-webkit-box-sizing: border-box;/* 追加 */
	-moz-box-sizing: border-box;/* 追加 */
	box-sizing: border-box;/* 追加 */	
}

結果、しっかりと横並びの状態になりました。

chrome 解析結果2

これで、モバイル版のCSSは完成です。
ここで、後々のことを考えて、共通部分を全ての BOX に適用しておきます。

先ほど記載した CSS を以下に変更します。

header,#mainContens,aside,#media li,footer{/* 全てのボックスに共通部分を適用 */
	width: 100%;
	padding-right: 14px; /* ガーター */
	padding-left: 14px; /* ガーター */
	float: left;
	-webkit-box-sizing: border-box;/* 追加 */
	-moz-box-sizing: border-box;/* 追加 */
	box-sizing: border-box;/* 追加 */	
	margin-bottom: 20px;
}
#media li{/* CSS の法則により 下にある width が適用される。*/
	width:50%; /* 3カラム */
}

タブレット

では次にタブレットの css を作成しましょう。
タブレットはmediaが 2カラム(33.33333%)使いたいので、css の一番下に以下を追加しましょう。

@media screen and (min-width:768px){/*768px 以上の画面幅て適用する CSS*/

#media li{
	width: 33.33333%; /* 2カラム */
}

}

これで完了です。
画面を、768px 以上にすると、以下のようになります。

クリックで拡大します。
タブレットスクリーンショット

PC

では最後に、PC の設定を追記しましょう。
これもタブレットと一緒。それぞれ使いたいカラムを設定します。

@media screen and (min-width:1024px){/*1024px 以上の画面幅て適用する CSS*/

header{
	width:100%;/* 6カラム すでに適用されているため省略可 */
}

#mainContens{
	width:66.66666%;/* 4カラム */
}

aside{
	width:33.33333%;/* 2カラム */
}

#media li{
	width:33.33333%;/* 2カラム すでに適用されているため省略可 */
}

footer{
	width:100%;/* 6カラム すでに適用されているため省略可 */
	
}

}

PCの幅 MAXは 960px なので以下の css を「@media screen and (min-width:1024px)」の一番先頭に記載します。

.container{	
	width:960px;
	margin: 0 auto;
}

例えば、header footer は 画面いっぱいに使いたいが、mainContens、asideとmediaは 960px にしたいと言う場合は以下のように html を書き換えます。

<div id="main">
  <div class="container"><!--追記-->
<div id="mainContens">
  <img src="holder.js/100%x400/main">
  </div>
<aside>
  <img src="holder.js/100%x400/side"> 
  </aside>
<div id="media">
  <ul>
  <li><img src="holder.js/100%x200/media"></li>
  <li><img src="holder.js/100%x200/media"></li>
  <li><img src="holder.js/100%x200/media"></li>
  </ul>
  </div>
</div><!--end container-->
  </div><!--end main--> 

クリックで拡大します。
PCスクリーンショット1

今回は全てを 960px にするため全て子要素にします。

<body>
  <div class="container">
  ヘッダー~フッターまでの html
  <div>
  </body>

クリックで拡大します。
PCスクリーンショット2

これで、レスポンシブデザインのグリッドレイアウトが完成しました。

完成品を確認

なお、CSS 全文を以下に記載しておきます。

*{
     margin: 0;
     padding:0;
 }
ul,ol{ list-style:none}

header,#mainContens,aside,#media li,footer{/* 全てのボックスに共通部分を適用 */
	width: 100%;
	padding-right: 14px; /* ガーター */
	padding-left: 14px; /* ガーター */
	float: left;
	-webkit-box-sizing: border-box;/* 追加 */
	-moz-box-sizing: border-box;/* 追加 */
	box-sizing: border-box;/* 追加 */
	margin-bottom: 20px;
}
#media li{
	width:50%; /* 3カラム */
}


@media screen and (min-width:768px){/*768px 以上の画面幅て適用する CSS*/

#media li{
	width: 33.33333%; /* 2カラム */
}

}


@media screen and (min-width:1024px){/*1024px 以上の画面幅て適用する CSS*/

.container{	
	width:960px;
	margin: 0 auto;
}

header{
	width:100%;/* 6カラム すでに適用されているため省略可 */
}

#mainContens{
	width:66.66666%;/* 4カラム */
}

aside{
	width:33.33333%;/* 2カラム */
}

#media li{
	width:33.33333%;/* 2カラム すでに適用されているため省略可 */
}

footer{
	width:100%;/* 6カラム すでに適用されているため省略可 */
	
}

}


コメントを残す