可変グリッドレイアウトで実現するレスポンシブWebデザイン（後編）

作成日

9 August 2012

Dreamweaver CS6 では、デスクトップやスマートフォン、タブレットなど様々な画面サイズに適したコンテンツレイアウトを実現するための「可変グリッドレイアウト」機能は、「レスポンシブWebデザイン」といわれる、CSS3の Media Queries を使用してワンソースでマルチデバイス対応させる振り分け方法を容易に実装するための機能です。

前編では、この「可変グリッドレイアウト」機能を利用して、実際に3つのデバイスでレイアウトが可変する大枠のHTMLまでを準備しました。

後編では、以下の様な作例のデザインを元にして、実際の細かい部分のコーディングにあたってのTipsや注意点を紹介いたします。

※このサンプルサイトは本記事用に作成した架空のサイトであり、公式のページではありません。

可変グリッドレイアウトでのコーディングのコツ

モバイル→タブレット→デスクトップというCSSの継承順序と Media Queries

まず、前編の最初に保存した responsive.css のコードを見てみましょう。

デザインビューで、それぞれの可変 Div の幅や位置を変更すると自動的にCSSが書き換えられます。

例えば、前回で幅を変更した div#nav に対して、各デバイスごとに異なる「width」と「margin-left」の値が自動的に指定されています。「@media」ではじまるカッコ内で画面サイズによって適応するCSSを振り分ける、CSS3 の Media Queries が使用されています。

/* モバイルレイアウト : 480 px およびそれ以下. */
#nav {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}


/* タブレットレイアウト : 481 px ～ 768 px。モバイルレイアウトからスタイルを継承。 */
@media only screen and (min-width: 481px) {
#nav {
	clear: none;
	float: left;
	margin-left: 2.5641%;
	width: 74.3589%;
	display: block;
}
}

/* デスクトップレイアウト : 769 px ～最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */
@media only screen and (min-width: 769px) {
#nav {
	clear: none;
	float: left;
	margin-left: 2.0408%;
	width: 69.3877%;
	display: block;
}
}

ここで重要になるのが、CSSプロパティの継承の順番です。

可変グリッドレイアウトが生成するCSSでは、モバイル用 → タブレット用 → デスクトップ用の順番でスタイルが指定・継承されています。

すなわち、図2のように、

モバイル用CSSは、すべてのデバイスで適用される。
タブレット用CSSは、幅481px以上のデバイスで適用される。
デスクトップ用CSSは、幅769px以上のデバイスでのみ適用される。

と、適用範囲が継承されます。

ようするにタブレット用CSS やデスクトップ用CSSでは、ある要素に対してCSSを指定しなければモバイル用のCSSがそのまま継承されるということです。

タブレット用やデスクトップ用のスタイルについては、モバイル用のスタイルを打ち消すように上書きしていくことになります。

継承範囲の実例
	モバイル用CSSのみに指定	モバイル用CSSのみに指定	各デバイスごとに指定
モバイル用 CSS	.text {color: #f00;} 結果：Value	.text {color: #f00;} 結果：Value	.text {color: #f00;} 結果：Value
タブレット用 CSS	指定なし結果：Value	.text {color: #06f;} 結果：Value	.text {color: #06f;} 結果：Value
デスクトップ用 CSS	指定なし結果：Value	指定なし結果：Value	.text {color: #090;} 結果：Value

昨今主流となりつつある、モバイル端末での表示を中心にサイト設計を行う「モバイルファースト」的な制作手法です。

逆に言えば、タブレット/デスクトップ用のCSSから先にコーディングしてしまうと、モバイル用の画面では何も反映されなくなりますので、その点を注意しましょう。

body要素の背景画像やタイポグラフィ、共通モジュールなど、各デバイスにおいても共通となるスタイルの指定はモバイル用CSSの部分に記述するようにしてください。

可変グリッドのDivを入れ子にすることはできない

可変グリッドレイアウトの Div は入れ子にして使用することはできません。
挿入そのものは可能なのですが、親の可変 Div の幅を変更している場合、子の可変 Div はグリッドに沿わなくなり、以下の図のように幅がおかしくなります。

今回の作例にあるグローバルナビの部分などのように要素を横並べにしたい場合は、昔ながらの実装方法のように「float」プロパティを用いてレイアウトするようにします。

なお、可変 Div は画面やブラウザのサイズに応じて常に横幅が変わりますので、その中に入れ込む要素も幅は「px」で固定せず「%」などの相対値で指定するなど、可変となるようにしましょう。

「display: table」や「display: box」など、レイアウト用の新しいCSSプロパティを使用する方法もありますが、現段階ではできれば控えたほうがいいでしょう。

レスポンシブ Web デザインの場合、あらゆるデバイスでサイトを表示することが目的となりますので、ある程度レガシーなブラウザでの正常な表示も必須となるからです。

（ただし、後述するIE用のクラスや Modernizr などを利用してCSSを振り分ければ、新しいプロパティを使うことも可能です。）

img 要素に width, height 属性を付与すると比率がおかしくなる

可変グリッドレイアウトが生成するCSSコードの冒頭に、以下の様なコメントが記載されています。

メモ : 可変メディアでは、HTML からメディアの高さおよび幅の属性を削除する必要がある

もし、width, height 属性を付与すると、以下のように画像の横幅が可変なのに対して、縦の比率がおかしくなってしまいます。

Dreamweaver の、[挿入] → [イメージ] からのimg要素の挿入や、アセット空の挿入ではこれらの属性は付与されません。

しかしながら、CMSを使用しているケースなど、自動でこれらの属性が付与されてしまうこともあるでしょう。その場合には、念のためにCSSの img 要素セレクタの箇所に「height: auto;」を追加しておくとこの現象を抑えられます。

img, object, embed, video {
	max-width: 100%;
	height: auto;
}

画面の小さいモバイル端末では「コンテンツを要約と集中」させる

デスクトップのブラウザは画面が大きく、より多くのコンテンツや情報を掲載できますが、画面の小さなモバイル端末ではコンテンツ量が多すぎて見にくくなるなど、逆効果になることもあります。

「モバイルファースト」の考え方では、「コンテンツの要約と集中」が大切とされています。
小さな画面内でより強調して見せたいコンテンツ、より利用者が求めているであろう情報を厳選するようにします。要は「引き算のデザイン」です。

そのため、作例では図6のようにタブレット/デスクトップでは「INFORMATION」（お知らせ覧）を表示させていますが、モバイル端末では非表示としました。

これは、以下のように該当の要素に対して「display: none」と「display: block」等を使い分けることで可能です。

.infomation {
	display: none;
}

/* タブレットレイアウト : 481 px ～ 768 px。モバイルレイアウトからスタイルを継承。 */
@media only screen and (min-width: 481px) {
.infomation {
	display: block;
}

先述の通り、タブレット用のCSSはデスクトップ用にも継承されるので、上記のコードでお知らせ覧はタブレットとデスクトップでは表示されるようになります。

回線の貧弱なスマートフォンでの閲覧も考慮する

この可変グリッドレイアウト機能で実装できるレスポンシブWebデザインのサイトは、パソコンはもちろん、電話回線接続でのスマートフォンでも閲覧されることになります。

レスポンシブWebデザインの特性上、スマートフォンでの閲覧時では不必要なタブレットやデスクトップ用のCSSもすべて読み込まれますし、デスクトップで奇麗に表示できる高解像度の画像を同じく読み込むことになります。

マルチデバイスに対応するということは、速い回線、遅い回線、パソコンと比較してスペックの低いモバイル端末など様々な環境で閲覧されることと等しいのです。

この点、サイトの設計段階からの時点でよくよく考慮し、不要なコンテンツは極力排除する、サイズの大きい画像に使用を控えるなど、なるべく”軽い”サイトを目指してください。

サイト全体のスタイルを仕上げる

上記のコツなどを踏まえていれば、レスポンシブWebデザインの実装は特段難しいものではありません。

レスポンシブWebデザインの最も重要な、様々なデバイスに応じたレイアウトの設計部分は、Dreamweaver の可変グリッドレイアウト機能で簡単に実装できます。

可変 Div の中身については、今回の作例も従来通りのサイト制作の手法の延長線で実装可能です。

CSS3等の新しいスタイルを使用することももちろん可能です。

ただし先述の通り、HTML5の新機能やCSS3の新しいプロパティなどは、サイトがレガシーなブラウザで閲覧されることも考慮した上で使用するに注意してください。

可変グリッドレイアウトのコードとファイルの解説

IE6,7,8用の調整を行う

可変グリッドレイアウトのHTMLの冒頭には、以下の様なコンディショナルコメントが記述されています。

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->

これのHTML要素負に付与された class により、IE6,7,8だけに適用するスタイルを指定することができます。

具体的な例は以下のとおりです。

/* IE6,7,8 のみに適用*/
.oldie #footer nav li {
	display: inline;
	zoom: 1;
}

/* IE 6 のみに適用*/
.ie6 #footer nav li {
	(スタイルの指定)
}

/* IE7 のみに適用*/
.ie7 #footer nav li {
	(スタイルの指定)
}

/* IE8 のみに適用*/
.ie8 #footer nav li {
	(スタイルの指定)
}

「.oldie」や「.ie6」などのクラス名の子孫セレクタを利用することで、旧バージョンのIEのみに適用されるようなスタイルの指定が可能です。

また、通常では IE6,7,8 ではHTML5の新要素は使えませんが、以下のように「html5shiv」と呼ばれるJSファイルが読み込まれることで使用できるようになっています。（今回の作例は可変 Div もHTML5の要素に置き換えています。）

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

※ html5shiv の利用について、Dreamweaverによって生成されたコードでは googlecode.com のサーバから直接読み込むようになっていますが、2012年8月現在ではJSファイルをローカルに置いて読み込む方法が推奨されています。具体的には、公式サイトより該当のzipファイルをダウンロードしてください。
ダウンロードしたファイルを解凍すると、distディレクトリに「html5shiv.js」というファイルが格納されているので、これをプロジェクトの任意のディレクトリに配置します。その上で、ローカルに配置したhtml5shiv.jsを読み込むようにindex.htmlの記述を変更します。例えばindex.htmlと同じディレクトリに配置した場合には、以下のような記述になります。

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

ノーマライズ用CSS「boilerplate.css」

可変グリッドレイアウトを新規作成した場合、HTMLの保存時に依存ファイルとして「boilerplate.css」がコピーされます。

boilerplate とは「再利用を意図した文例集」という意味。

boilerplate.css は、フォントや margin などのサイズを揃えたりと、各ブラウザのレンダリングの相違点などを吸収し、効率の良いCSSコーディングを行えるようにするためのノーマライズCSSとなります。

この boilerplate.css のコードは変更することはありませんが、一度目を通しておくことをお勧めします。

IE6,7,8で Media Queries を使えるようにする「respond.min.js」

こちらの「respond.min.js」もHTMLの保存時にコピーされる依存ファイルです。

レスポンシブWebデザインを実装する Media Queries ですが、IE6,7,8はこれを解釈できないため非対応となります。

この respond.min.js によって、IE6,7,8 でも Media Queries に対応させることができます。

ただし、HTMLをサーバ上にアップするなど、HTTP接続によって閲覧しないとこのJSは動作しませんのでご注意を。

ブラウザの対応状況を振り分けられる「Modernizr」

可変グリッドレイアウトのHTMLの head 要素部分に、以下の様なコメントが記載されています。

Modernizr (http://www.modernizr.com/) のカスタマイズされたビルドを使用している場合は、以下を実行 : 

* js へのリンクをここに挿入

* html5shiv への以下のリンクを削除

* 先頭の html タグに「js 以外の」クラスを追加

* Modernizr ビルドに MQ Polyfill を含めた場合は、respond.min.js へのリンクも削除可能

Modernizr は、利用中のブラウザがHTML5やCSS3のやAPI、プロパティが利用できるかどうかを調査できる軽量なJavaScriptライブラリです。

HTML5やCSS3の機能に対応しているかいないかを、HTML要素にクラス名として追加してくれます。

例えば、CSS3の「textshadow」に対応しているブラウザであれば、

<html class="textshadow">

とし、対応していなければ

<html class="no-textshadow">

というクラス名が付与されます。

また、JavaScript においても、同様にブラウザの対応状況を判断できる Object が用意されています。

Modernizr を使うことで、ハック等に頼ることなく、より柔軟にマルチデバイスに適応させるサイトを実装することができるようになります。今回のHTMLでは使用していませんが、導入も容易ですので検討してみてください。

最後に

今回は、簡単にレスポンシブWebデザインなサイトを実装できるようになった「可変グリッドレイアウト」機能を紹介しました。

Webサイトのマルチデバイス対応は今現在でも需要が高まっており、今後はスマートテレビの登場などで更に必要とされることでしょう。

今回の作例ではたった1ページを用意したに過ぎません。複数のページを持ったサイト全体の実装となると、もっと多くのレイアウトパターンが必要にもなりますし、デザインの細部にこだわる必要も出てきます。

そのため、本文のグリッドシステムの箇所で先述した通り、事前の入念な設計がとても重要になってきますが、このレスポンシブWebデザインはマルチデバイス対応のひとつの手段として、ぜひ導入する価値のある手法であると思います。

この記事がそのきっかけとなれば幸いです。

目次

作成日