モバイルレイアウトからスタイルを継承。モバイルレイアウトとタブレットレイアウトからスタイルを継承。}ここで重要になるのが、CSSプロパティの継承の順番です。デスクトップ用の順番でスタイルが指定・継承されています。図2のように、モバイル用CSSは、すべてのデバイスで適用される。タブレット用CSSは、幅481px以上のデバイスで適用される。デスクトップ用CSSは、幅769px以上のデバイスでのみ適用される。適用範囲が継承されます。デスクトップ用CSSでは、ある要素に対してCSSを指定しなければモバイル用のCSSがそのまま継承されるということです。タブレット用やデスクトップ用のスタイルについては、モバイル用のスタイルを打ち消すように上書きしていくことになります。#090;}結果:Value昨今主流となりつつある、モバイル端末での表示を中心にサイト設計を行う「モバイルファースト」的な制作手法です。逆に言えば、タブレット/デスクトップ用のCSSから先にコーディングしてしまうと、モバイル用の画面では何も反映されなくなりますので、その点を注意しましょう。body要素の背景画像やタイポグラフィ、共通モジュールなど、各デバイスにおいても共通となるスタイルの指定はモバイル用CSSの部分に記述するようにしてください。入れ子にして使用することはできません。グリッドに沿わなくなり、以下の図のように幅がおかしくなります。今回の作例にあるグローバルナビの部分などのように要素を横並べにしたい場合は、昔ながらの実装方法のように「float」プロパティを用いてレイアウトするようにします。画面やブラウザのサイズに応じて常に横幅が変わりますので、その中に入れ込む要素も幅は「px」で固定せず「%」などの相対値で指定するなど、可変となるようにしましょう。box」など、レイアウト用の新しいCSSプロパティを使用する方法もありますが、現段階ではできれば控えたほうがいいでしょう。デザインの場合、あらゆるデバイスでサイトを表示することが目的となりますので、ある程度レガシーなブラウザでの正常な表示も必須となるからです。利用してCSSを振り分ければ、新しいプロパティを使うことも可能です。属性を付与すると比率がおかしくなる可変グリッドレイアウトが生成するCSSコードの冒頭に、以下の様なコメントが記載されています。属性を付与すると、以下のように画像の横幅が可変なのに対して、縦の比率がおかしくなってしまいます。img要素の挿入や、アセット空の挿入ではこれらの属性は付与されません。CMSを使用しているケースなど、自動でこれらの属性が付与されてしまうこともあるでしょう。auto;」を追加しておくとこの現象を抑えられます。}画面の小さいモバイル端末では「コンテンツを要約と集中」させるデスクトップのブラウザは画面が大きく、より多くのコンテンツや情報を掲載できますが、画面の小さなモバイル端末ではコンテンツ量が多すぎて見にくくなるなど、逆効果になることもあります。「モバイルファースト」の考え方では、「コンテンツの要約と集中」が大切とされています。小さな画面内でより強調して見せたいコンテンツ、より利用者が求めているであろう情報を厳選するようにします。要は「引き算のデザイン」です。そのため、作例では図6のようにタブレット/デスクトップでは「INFORMATION」(お知らせ覧)を表示させていますが、モバイル端末では非表示としました。block」等を使い分けることで可能です。モバイルレイアウトからスタイルを継承。}先述の通り、タブレット用のCSSはデスクトップ用にも継承されるので、上記のコードでお知らせ覧はタブレットとデスクトップでは表示されるようになります。回線の貧弱なスマートフォンでの閲覧も考慮するこの可変グリッドレイアウト機能で実装できるレスポンシブWebデザインのサイトは、パソコンはもちろん、電話回線接続でのスマートフォンでも閲覧されることになります。レスポンシブWebデザインの特性上、スマートフォンでの閲覧時では不必要なタブレットやデスクトップ用のCSSもすべて読み込まれますし、デスクトップで奇麗に表示できる高解像度の画像を同じく読み込むことになります。マルチデバイスに対応するということは、速い回線、遅い回線、パソコンと比較してスペックの低いモバイル端末など様々な環境で閲覧されることと等しいのです。この点、サイトの設計段階からの時点でよくよく考慮し、不要なコンテンツは極力排除する、サイズの大きい画像に使用を控えるなど、なるべく”軽い”サイトを目指してください。サイト全体のスタイルを仕上げる上記のコツなどを踏まえていれば、レスポンシブWebデザインの実装は特段難しいものではありません。可変グリッドレイアウト機能で簡単に実装できます。中身については、今回の作例も従来通りのサイト制作の手法の延長線で実装可能です。CSS3等の新しいスタイルを使用することももちろん可能です。先述の通り、HTML5の新機能やCSS3の新しいプロパティなどは、サイトがレガシーなブラウザで閲覧されることも考慮した上で使用するに注意してください。可変グリッドレイアウトのコードとファイルの解説IE6,7,8用の調整を行う可変グリッドレイアウトのHTMLの冒頭には、以下の様なコンディショナルコメントが記述されています。より、IE6,7,8だけに適用するスタイルを指定することができます。具体的な例は以下のとおりです。}「.oldie」や「.ie6」などのクラス名の子孫セレクタを利用することで、旧バージョンのIEのみに適用されるようなスタイルの指定が可能です。HTML5の新要素は使えませんが、以下のように「html5shiv」と呼ばれるJSファイルが読み込まれることで使用できるようになっています。HTML5の要素に置き換えています。サーバから直接読み込むようになっていますが、2012年8月現在ではJSファイルをローカルに置いて読み込む方法が推奨されています。具体的には、公式サイトより該当のzipファイルをダウンロードしてください。ダウンロードしたファイルを解凍すると、distディレクトリに「html5shiv.js」というファイルが格納されているので、これをプロジェクトの任意のディレクトリに配置します。その上で、ローカルに配置したhtml5shiv.jsを読み込むようにindex.htmlの記述を変更します。index.htmlと同じディレクトリに配置した場合には、以下のような記述になります。可変グリッドレイアウトを新規作成した場合、HTMLの保存時に依存ファイルとして「boilerplate.css」がコピーされます。「再利用を意図した文例集」という意味。サイズを揃えたりと、各ブラウザのレンダリングの相違点などを吸収し、効率の良いCSSコーディングを行えるようにするためのノーマライズCSSとなります。コードは変更することはありませんが、一度目を通しておくことをお勧めします。使えるようにする「respond.min.js」こちらの「respond.min.js」もHTMLの保存時にコピーされる依存ファイルです。IE6,7,8はこれを解釈できないため非対応となります。対応させることができます。HTMLをサーバ上にアップするなど、HTTP接続によって閲覧しないとこのJSは動作しませんのでご注意を。要素部分に、以下の様なコメントが記載されています。利用中のブラウザがHTML5やCSS3のやAPI、プロパティが利用できるかどうかを調査できる軽量なJavaScriptライブラリです。HTML5やCSS3の機能に対応しているかいないかを、HTML要素にクラス名として追加してくれます。class="no-textshadow">というクラス名が付与されます。使うことで、ハック等に頼ることなく、より柔軟にマルチデバイスに適応させるサイトを実装することができるようになります。今回のHTMLでは使用していませんが、導入も容易ですので検討してみてください。最後に今回は、簡単にレスポンシブWebデザインなサイトを実装できるようになった「可変グリッドレイアウト」機能を紹介しました。Webサイトのマルチデバイス対応は今現在でも需要が高まっており、今後はスマートテレビの登場などで更に必要とされることでしょう。今回の作例ではたった1ページを用意したに過ぎません。複数のページを持ったサイト全体の実装となると、もっと多くのレイアウトパターンが必要にもなりますし、デザインの細部にこだわる必要も出てきます。そのため、本文のグリッドシステムの箇所で先述した通り、事前の入念な設計がとても重要になってきますが、このレスポンシブWebデザインはマルチデバイス対応のひとつの手段として、ぜひ導入する価値のある手法であると思います。この記事がそのきっかけとなれば幸いです。地域を選択してください地域を選択すると、アドビサイトで使用する言語と内容が変わります。