超シンプルで簡単なフレームワーク「Responsive Grid System」でレスポンシブWEBサイトをつくろう(前編:導入編)

最近は様々なレスポンシブ対応のフレームワークがでていて、これらを使うことによって簡単にPC、タブレット、スマートフォンに対応したサイトが作成できるようになりました。

そこで今回は本ブログのリニューアルで使用した、モバイルファーストを意識した超シンプルで簡単なレスポンシブフレームワーク「Responsive Grid System」の使い方を解説していきます。

本ブログのリニューアルや、先日発売された書籍「HTML5デザイン 仕事のネタ帳 CSS3+JavaScript+CSSフレームワークと活用するプロのテクニック」でも8P執筆させていただきましたので、2回に分けてベースのサンプルを解説する「導入編」と実際に使用する際に必要なカスタマイズをする「レイアウト作成編」としてまとめていきたいとおもいます。

WordPressでのサイトやブログ作成でも簡単に入れることができるので、簡単にスマートフォンやタブレットPCに対応したレスポンシブサイトができると思います。

書いた内容が長くなってしまったので、はじめて目次のようなものを用意しましたが、目次のタイトルわかりにくいかもしれないな・・。

この記事の目次

レスポンシブ系のフレームワークはたくさんでているが・・

当ブログとWEBデザインクリップもかなり以前に作成したもので、スマートフォン対応していなかったので、フレームワークを使用してスマートフォン対応しようと思い、色々調べたのですがかなりたくさんのフレームワークがありますが、ほとんどが海外の物となっているのでやっぱり、

  • 機能が盛りだくさんで使い方を覚えるのが面倒
  • 英語サイトがベースでサンプルはあるが細かい解説が少ない
  • 作成するサイトによっては使用しない部分のコードばかりになる

ほとんどが英語サイトですし、用意してやるから後は自分で使えよって感じが多いので、フレームワークの内容を解析するのがちょっと面倒に感じてしまいます。

ブログや中・小規模の会社サイトなどは、フレームワークの機能をフルに活用しなくても、最小限の機能(カラム部分のスマホ対応)だけで、あとは自由にレイアウトをしたいなと思いまして、今回シンプルなCSSのフレームワーク「Responsive Grid System」をピックアップして書籍を書かせて頂きたので、その書いた内容を元にブログのリニューアルでも使用しました。

media-queriesを使用したレスポンシブWebデザイン

簡単にできるレスポンシブWebレイアウトとして、まず思い浮かぶのがCSSmedia-queriesを使用した方法だと思います。これはブラウザの幅によってCSSを書き換える方法という形で、サーバー側の設定やデバイスの取得などをする必要がないため、手軽に1つのコードで複数のデバイスに対応させることができます。

media-queriesでは、PCでのレイアウト用をまず作成して、そこからスマートフォンやiPadなどのタブレットに合わせてCSSの変更を行うという方法がよく使われていると思います。

PCなど画面サイズが大きい場合は2カラムなどにして、スマートフォンなどでは1カラムのレイアウトにする形にすることでサイズの小さいスマートフォンでも情報を読みやすくすることができるというものです。

しかし、スマートフォン全盛の昨今では端末によるサイズの違いや、縦横画面によって幅が変わってしまうので、より細かくブレイクポイント(デザインを分岐するポイント)を複数設定しなければならなくなり、各デバイス毎にレイアウトを調整するとなるとCSSの記述が肥大化していくことになってしまいました。

media-queriesを使用したデバイス毎の振り分け例


/*PC1024px以上 */
@media only screen and (min-width: 1024px) {

}

/*スマートフォン */
@media
only screen and (min-device-width: 320px) and (max-device-width: 480px),
only screen and (min-width: 320px) and (max-width: 480px) {

}

/* スマートフォンサイズ(縦用) */
@media only screen and (min-width: 321px) {

}

/* スマートフォンサイズ(横用) */
@media only screen and (max-width: 320px) {

}

/* iPadサイズ(縦用) */
@media 
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {

}

/* iPadサイズ(横用) */
@media 
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {

}

このようになると、各デバイスの縦や横に対して細かく設定していくとコード量が多くなってしますので、ページ数やレイアウトの型が増えると作成や修正が複雑になります。

最小限のカラム分けだけのフレームワーク「Responsive Grid System」

01

Responsive Grid System

今回使用する「Responsive Grid System」もいくつかのバージョンアップが行なわれ、以前はPC、ipad、スマートフォン毎にブレークポイントが設定されていましたが、現在はmedia-queriesでの分岐が一本化され、最小限のコードとなりシンプルになりました。

といっても「Responsive Grid System」もほとんど解説がない・・

「Responsive Grid System」もほとんどが解説がありませんでしたが、カラム操作だけの物なのでコードは少ないので簡単に使うことができました。

ただ、HTML5で作成されているデフォルトのサンプルが、実際にサイト制作をする上では、あまり良くないものとなっているので、まずは公式のサンプルの解析と実際サイト制作に使用する上で変更したい点などをまとめてみたいと思います。

使用するにはHTMLとCSSなどの基本スキルは必要

このフレームワークは、2段組、3段組などのカラム部分のみをPCやスマートフォンに最適化させるようなシンプルなものなので、他のフレームワークにあるような「ボタン」「パーツレイアウト」「画像の扱い」「旧ブラウザ対応への細かい対応」などは用意されていません。

ですので、WEB制作経験の少ない人やHTMLのタグとCSSをちょっと知っているだけという人にはあまり向いていないかもしれません。

  • HTMLやCSSでレイアウト作成の経験がある
  • ページレイアウトは自分で自由にしたいいのでカラム部分だけを使いたい
  • JavascriptやjQueryなどは自分で必要に応じて使いたい
  • 余分なコードが嫌なので最小限の機能だけ使用してあとは自分でカスタマイズしたい

というような方には、便利に使えると思います。

あの有名ブロガーも使用!?

知人の「バンクーバーのWEB屋」でも、このフレームワークをベースに自分でカスタマイズして使用していて、以前に解説記事もありました。


Responsive Grid Systemの仕様が変更となり、僕のレスポンシブデザインの作り方もちょっと変わりそうなので共有

僕がWEB制作者として必要不可欠だったWEBサービスやツールの厳選まとめ【2013年振り返り版】

Responsive Grid SystemのCSSファイルの構成をみる

「Responsive Grid System」のCSSではブラウザの初期設定をリセットする「reset.css」とカラムレイアウトのベースとなる「responsive.gs.12col.css」というファイルが12、16、24と3種類用意されています。

これらはコンテンツエリアやサイドエリアで使用するwidthを%で指定しており、合計で100%になるように組み合わせることで左右のコンテンツの幅のベースを決めることができる。またフロート解除用のclearfixの記述がいくつかのclass名で用意されています。

そして「style.css」の方で自分のサイトのレイアウト用のCSSを記述するというシンプルな構成になっています。reset.cssなどは自分で作成したものなどがあればそれを使用してもよいとおもいます。

旧IE対応用としての「boxsizing.htc」と「respond.min.js」

「Responsive Grid System」ではverの古いIEの対策としてレスポンシブレイアウトでよく使用される「respond.min.js」とIE7などの対策として「boxsizing.htc」が含まれていますので、特にカスタマイズなど別途記述する必要がなく使用できるようです。

提供されいてるサンプルを確認する

このフレームワークは最小限の記述(カラムレイアウトのレスポンシブ対応)しかされていないので、コンテンツの中身部分やナビゲーションの細かい部分などは自分でやらなければなりません。まずダウンロードしたファイルからのベースとなっている部分の確認してみましょう。

「これだけ見るとどこからはじめてよいかわからない?」「これだけであとは自分でやりたいようにやるので充分!」など見る人の感想は色々だと思います。

提供されているサンプルはこちら

ブラウザサイズを小さくドラックしていくと、768px以上の際は2カラムになり、それ以下では1カラムになるシンプルなサンプルになっています。

サンプルファイルのHTMLの確認

サンプルで提供されいているファイルは「ヘッダー」「コンテンツ」「サイドバー」「フッター」とサイトの大枠だけの記述となっており、これらのカラムの調整だけを行っています。

ものすごくシンプルなサンプルファイル

<div class="container row">
<header role="banner" class="row">Header</header>
<main role="main" class="row gutters">
<article class="col span_8">
Content
</article>
<aside role="complimentary" class="col span_4">
Sidebar
</aside>
</main>
<footer role="contentinfo" class="row">Footer</footer>
</div>

ヘッダーやフッターは基本は1カラムなので特にそのまま中身のデザインをすればよいが、contentsとsidebarは2カラムにする場合に幅の指定にはclass「col」と「span_数字」のclassが設定されている。またclass「row」も複数回使われていますが、これはフロート解除のclearfixになっています。

カラム分けをする場合のポイント

  • カラムの幅を決めるにはclass「col」と「span_数字」を組み合わせて100%にする
  • フロート解除する場所にclass「row」

とこれだけです。ベースの大枠は「col」と「span_数字」を設定するだけで、コンテンツ内にfloatを使った場合にはclass「row」を追加します。

カラムの幅を調整のCSSの確認

今回は3つのファイルから「responsive.gs.12col.css」を使用してポイントを見ていきます。

ページデザインの全体をclass「container」のエリアの幅の設定(サンプルでは800px)。ここがPCサイトの幅になるので自分の作成したいPCでのwidthを設定すると、それにあわせて各カラムの幅が調整されるのでPCサイトの幅を決める際はここだけでOKとなります。

/* PCサイトでのコンテンツの幅を設定する */
.container { 
	max-width: 800px;
	margin: 0 auto; 
}

次にフロート解除用としてよく使われる「clearfix」がいくつかのclass名で定義されています。「.container」「.row」「.col」「.clr」「.group」にも適用されていますので、必要に応じて細かいレイアウト部分のフロート解除に使用できます。

/* フロート解除用のclearfix */
.container:after,
.row:after, 
.col:after, 
.clr:after, 
.group:after { 
	content: ""; 
	display: table; 
	clear: both; 
}

一番の特徴がclass「col」にあります。よく使われていたmedia-queriesではPCサイトをベースにスマートフォンを調整という形だったが、ここではまずカラムレイアウトする部分にclass「col」を設定して幅を100%にしている点です。

まずベースを100%に設定して、media-queriesで768px以上の場合にclass「col」を設定した部分に「span_数字」を設定して幅を数字毎に%指定して合計100%になるようにする仕組みとなっています。

.row { padding-bottom: 0em;
}
			
								  
/* ベースとしてカラムを100%に設定 */
.col { 
	display: block;
	float: left;
	width: 100%;
}

@media ( min-width : 768px ) {
	/*PCにサイトの場合に2カラムの間に余白をつける*/
	.gutters .col {
		margin-left: 2%;
	}
	/*左側のカラムには余白はいらないので0にする*/
	.gutters .col:first-child { 
		margin-left: 0; 
	}
}

/* PCサイトの場合のカラム幅の調整 */
@media ( min-width : 768px ) {
	.span_1 { width: 8.33333333333%; }
	.span_2 { width: 16.6666666667%; }
	.span_3 { width: 25%; }
	.span_4 { width: 33.3333333333%; }
	.span_5 { width: 41.6666666667%; }
	.span_6 { width: 50%; }
	.span_7 { width: 58.3333333333%; }
	.span_8 { width: 66.6666666667%; }
	.span_9 { width: 75%; }
	.span_10 { width: 83.3333333333%; }
	.span_11 { width: 91.6666666667%; }
	.span_12 { width: 100%; }
	
	.gutters .span_1 { width: 6.5%; }
	.gutters .span_2 { width: 15.0%; }
	.gutters .span_3 { width: 23.5%; }
	.gutters .span_4 { width: 32.0%; }
	.gutters .span_5 { width: 40.5%; }
	.gutters .span_6 { width: 49.0%; }
	.gutters .span_7 { width: 57.5%; }
	.gutters .span_8 { width: 66.0%; }
	.gutters .span_9 { width: 74.5%; }
	.gutters .span_10 { width: 83.0%; }
	.gutters .span_11 { width: 91.5%; }
	.gutters .span_12 { width: 100%; }
}

このフレームワークの特徴

PCで幅を設定して、スマートフォンで幅のサイズを変えるではなく、まず100%に設定することによって1カラムのサイトにして、768px以上の場合に、span_1からspan_12までの合計が98%となるようにし、間隔の2%との合計100%になるように用意されています。2カラムのサイトを作るという初期の頃に使っていたのと逆の使い方をする形になっているのがわかると思います。

これまでレスポンシブデザインのCSSの記述が肥大化していたひとつの理由が各画面毎のmedia-queriesの設定ということでしたので、このフレームワークのコンセプトは、media-queriesの設定が必要なのはPC画面の場合だけということにしてCSSの記述の肥大化を回避しているようです。

以前はこのフレームワークも複数のブレークポイントを持っていたのですが、いくつかのリニューアルをしてこの形になったようですが、こうすることで分岐を複雑に設定しなくても最小限の形でレスポンシブができるという物になっていて理にかなっているなと思いました。

media-queriesを使用したレスポンシブデザインには、1コードであらゆるデバイスに対応させようと考えると、まだまだ問題点はたくさんあるので、これがレスポンシブデザインの新しい形だということでなく、一つの方法としてこのような形もあるなと思っています。

ブログや中小規模のサイトであまり予算はないけどスマートフォン対応をしたいという場合とか良いかなと思っています。

レイアウト用のCSSの確認

大まかな枠組みができたあとはレイアウト用のCSSとなりますが、サンプルで提供されいてる「style.css」はこのサンプルの見た目の体裁を整えるためだけのものになっています。このフレームワークは最小限のみ用意されていると何度も言っていたのは、大枠以外はすべて自分で作成しなければならないフレームワークなのです。

Bootstrapのように設定してある程度のテンプレートとして完成という使い方はできないので、HTMLやCSSの基本やレイアウトの知識がないと使用するのが難しいものとなっているが、逆に決まりきったテンプレートでなく自由にレイアウトできるので便利と考えることもできます。

サンプルファイルのstyle.css

body {
	font-family: sans-serif;
	color: white;
}

header {
	line-height: 15em;
	text-align: center;
	background: #333;
}

article {
	line-height: 20em;
	text-align: center;
	background: #666;
}

aside {
	line-height: 20em;
	text-align: center;
	background: #999;
}

footer {
	line-height: 15em;
	text-align: center;
	background: #BBB;
}

このサンプルのHTMLはページレイアウトとして使用するには少し気をつけなければいけません。

HTML5は文書の構造や原稿内容によって使用する要素をよりセマンティックに構築する必要があるため、実際にこのサンプルを元に原稿を入れていこうとする時には、main要素と2カラム部分のarticleとaside要素部分に気になる部分があるのでみてみます。

サンプルページで注意する点1「main要素」

<main role="main" class="row gutters">
<article class="col span_8">
Content
</article>
<aside role="complimentary" class="col span_4">
Sidebar
</aside>
</main>

main要素は最近追加された要素で、「メインコンテンツ部分を表す」となります。

サンプルでは原稿内容がないのでコンテンツ部分とサイドエリアを囲んでいますが、サイドに広告やバナーコンテンツなど直接内容と関係ない要素が入る場合はサイドエリアは囲まない方がよいです。HTML5はドキュメントの内容によって使用する要素を決めるので何が入るかによって適切なマークアップを心がけるようにするので作成するページによって適切に変更するとよいでしょう。

コンテンツエリアの内容をメインにする場合にはmain要素は「article」のみを囲み、「 class="row gutters"」は「article」と「adide」を囲むようにdiv要素を使用するなどが無難です。

<div class="row gutters">
<main role="main">
<article class="col span_8">
Content
</article>
</main>
<aside role="complimentary" class="col span_4">
Sidebar
</aside>
</div>

main要素はセクショニングコンテンツなどではないので、アウトラインも現れないので、使用する場所に悩むなどの場合は現状は無理に使用しなくてもよいかと思います。

サンプルページで注意する点2:コンテンツエリアとサイドエリアのマークアップ

HTML5が出始めた当初はサイドエリア=「aside要素」という誤解も少しありましたが、正式には「aside要素」は、「メインコンテンツとは関連性の低い『補足記事・サイドバー・広告・ブログロール』などに使用する」とありますのでサイドエリア全体を囲む場合には使用は好ましくありません。ですので、サイドエリアに複数の情報が入る場合などを考えると「aside要素」の外側にdiv要素などで「class="col span_4"」を設定した方がレイアウトに汎用性があります。

またメインコンテンツ部分の「article要素」は、「それ自体で独立したコンテンツとして成り立つ自己完結したものを表します」とありますのでブログなどの記事の詳細ページなどではよいですが、TOPページなどでサイトの情報を細かく掲載する場合などは全体を「article要素」で囲むことはできませんのでこちらも同様に「article要素」の外側にdiv要素などで「class="col span_8"」を設定した方がレイアウトに汎用性があります。

HTML5ではdiv要素は使用してはいけないわけではありませんので、レイアウト目的(2カラムなど)では、いままで通りdiv要素を使用してマークアップすることができます。

<div class="row gutters">

<div class="col span_8">
<main role="main">
<article>
Content
</article>
</main>
</div><!-- /col span_8 -->

<div id="sidebar" class="col span_4">
<aside role="complimentary">
SideContent1
</aside>
<aside role="complimentary">
SideContent1
</aside>
</div><!-- /sidebar -->

</div><!-- /row gutters -->

HTML5の新要素の解説と使用例などをまとめています

HTML5の新要素を自分で勉強した際のまとめや、コーディングについてなど以前書いた記事などもありますので合わせてご覧ください。

●『article要素』 / HTML5新要素一覧 
http://www.html5-memo.com/new-element/article/

●『aside要素』 / HTML5新要素一覧 
http://www.html5-memo.com/new-element/aside/

またMdNインタラクティブで連載した「ゼロからはじめるHTML5でのサイト制作」として12回の連載でHTML5の新要素についてやXHTMLとのマークアップの違いをよく使うレイアウトを例にして解説していますのでこちらでもHTML5の勉強ができます。

http://www.html5-memo.com/mdn/

最後に

まずは「Responsive Grid System」の公式サイトのサンプルの解説とサンプルファイルの注意点をまとめてみましたがいかがでしたでしょうか?

レイアウトのベースだけ活用すれば、あとは自由に自分のレイアウトができるフレームワークということで、組み合わせでページレイアウト全部ができるものと比べると手間はかかりますが、最小限のコードとなっているので、ゼロからWordpressでブログを作る場合などでも簡単にレスポンシブ対応にすることができます。

ただこのサンプルファイルでは一点対応していないことがあります。

それは「画像のレスポンシブ対応」です。

画像の対応と実際にブログ風レイアウトとしてのフォーマット作成を次回行いたいと思います。

今回まとめた内容とサンプルは書籍「HTML5デザイン 仕事のネタ帳 CSS3+JavaScript+CSSフレームワークと活用するプロのテクニック」でも掲載しておりますので、是非そちらもご覧ください。

HTML5デザイン 仕事のネタ帳 CSS3+JavaScript+CSSフレームワークと活用するプロのテクニック

書籍の詳細情報はこちらから見れます

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事