メディア掲載_Web Designing

Web Designing 2012年9月号

執筆:伊藤洋介 執筆:伊藤洋介

SmartphoneLab.2012年9月号

スマートフォンに最適化したレスポンシブデザイン

Webサイト閲覧のためのスマートデバイスが増加している昨今、それらの端末ごとに最適化・構築しようとした場合、非常に多くのコストが想定される。今回は、それらを一元化するための一つのアプローチとして、最近のトレンドともなっているレスポンシブデザインでのサイト構築方法をスマートフォンに最適化した形で紹介しよう。

PC向けレイアウトをスマートフォン向けに最適化

これまでのWebサイト制作では、スマートフォン向け・PC向けに最適化されたレイアウトでそれぞれ開発する、もしくはデバイスごとの最適化は行われず、スマートフォンでもPC向けレイアウトを表示させるといった手法で構築する場合がほとんどを占めてきた。最適化を行わない場合、大画面を前提としたPC向けのレイアウトはコンテンツのデータ容量も大きくなり、画面サイズや通信速度に制限のあるスマートフォンでの閲覧は快適とは言い難い。また、スマートフォン向けコンテンツの最適化を行った場合、単純に新たな開発を行うことになり、メンテナンスもコストもそれに応じる形で膨らんでいく。
そういった問題を解決するアプローチとして、最近では単一のHTMLソースのみでPCとスマートフォンのそれぞれに対応したレイアウト・コンテンツを表示するレスポンシブデザインの手法が採用されることも増えてきた。
レスポンシブデザインは、CSS3のメディアクエリを利用してウインドウ幅を判別し、その違いによってレイアウトやコンテンツ内容を切り替えるものだ(01)。今回は、単にスマートフォンに対応したレスポンシブデザインではなく、スマートフォン向けに最適化した実装を紹介しよう。

01レスポンシブデザインの例

01 レスポンシブデザインの例

Media Queries:http://mediaqueri.es/
メディアクエリを用いたサンプルを紹介するギャラリーサイト。オーソドックスな形でレイアウトを変えている

01 レスポンシブデザインの例

Baby-G - CASIO:http://baby-g.jp/
デバイスのウインドウ幅によって、ダイナミックにレイアウトを変えている

SECTION1 メディアクエリで読み込むcssを切り替える

メディアクエリで読み込むcssを切り替える

CSS3から実装されたメディアクエリを使うと、表示するデバイスによって読み込ませるCSSを切り替える事が可能だ。

メディアクエリの使い方

CSS3のメディアクエリでは、link要素中のmedia要素やCSSの@media規則を用いて、ウインドウ幅によってスタイルの適応範囲を切り替えていく。利用できる値には、「width/height」「min-width/min-height」「max-width/max-height」などがある。

01サンプルの完成図

01 サンプルの完成図

このように、PC向けのレイアウトをスマートフォン向けに最適化していく

@media規則での切り替え方

HTML内のlink要素中のmedia属性の記述方法は02を参照してもらいたい。今回は、「min-width」でウインドウ幅が481px以上の時(PC/タブレットなど)はlayout_pc.cssを読み込み、「max-width」でウインドウ幅が480px以下の時(スマートフォン)はlayout_sp.cssを読み込むようにしている。
今回のサンプルではデバイスごとに対応したCSSファイルを用意しているが、単独のCSSにすべてのスタイルを記述したいケースもあるだろう。そのような場合には、@media規則での記述方法が役立つ。media属性での切り替え方と同様に、「width/height」「min-width/min-height」などの値によって適用するスタイルを制限することが可能だ(03)。

02media属性での記述例

02 media属性での記述例

複数デバイスに対応する場合、幅の切り替えポイントによって、このような記述を増やしていくことで対応可能だ

03@media規則での記述例

03 media規則での記述例

CSSファイルに直接記述して切り替えることも可能だ

CSS3非対応ブラウザへの実装

メディアクエリはCSS3から実装された機能なので、まだまだ利用者の多いIE6~IE8などには適用できない。これらの非対応ブラウザでもメディアクエリを用いたレスポンシブデザインを実現するには、githubで公開されているオープンソースのライブラリ「respond.js」を利用するとよいだろう(0405)。

04respond.jsの配布先

04 respond.jsの配布先

05respond.jsの組み込み

05 respond.jsの組み込み

このコードをCSS読み込み後に記述する

SECTION2 スマートフォン向けレイアウトを調整する

スマートフォン向けレイアウトを調整する

PC向けレイアウトを元に、スマートフォン向けレイアウトをCSSで調整する。大きく異なるのはナビゲーションボタンの配置とカラム数、画像のサイズとなるので、その部分を重点的に解説していこう。

ナビゲーションの位置を変える

PC向けレイアウトではロゴの横に並べていたナビゲーション(02)を、スマートフォン向けレイアウトではロゴの下に並べている(03)。
PC向けには「position:absolute;」でロゴの右に配置しているが、そのスタイルの適用をやめると、スマートフォン向けでは自動的にロゴの下に配置される。
また、CSS3の擬似プロパティの「nth-child()」を用いて、li要素の奇数番目には要素の右側にボーダーを与えてli要素間にスペースを生み出している。

01レイアウト配置図

01 レイアウト配置図

それぞれの場合の配置図。要素やクラス、IDの振り方はこのようになっている

02PC向けナビゲーションスタイル

02 PC向けナビゲーションスタイル

「position:absolute;」と指定して絶対位置で配置している

03スマートフォン向けナビゲーションスタイル

03 スマートフォン向けナビゲーションスタイル

奇数番目のli要素には、ボーダーのほか、偶数番目のli要素よりも1px低い幅の値を設定している

2カラムレイアウトから1カラムレイアウトへ

ウインドウサイズが小さくなるスマートフォン向けサイトでは、カラム数を減らして対応するのが一般的だ。「article」要素と「aside」要素で構成される2カラムレイアウトは、それらを囲う親要素である「div id="contents"」の幅と2つの要素を同じ幅にすることで、縦に並ぶ1カラムレイアウトに切り替えている(0405)。

04PC向け2カラムレイアウト

04 PC向け2カラムレイアウト

960pxのコンテンツ幅に対し、630pxと300pxの要素を左右に回り込ませている

05スマートフォン向け1カラムレイアウト

05 スマートフォン向け1カラムレイアウト

300pxのコンテンツ幅に対し、それぞれ300pxを設定した要素を縦に並べている

画像のサイズを変える

今回のサンプルではメインとなる画像を配置している。これをスマートフォンサイト用の幅に適用させるために、img要素へのスタイル記述で対応している。親となる「div id="mainimg"」要素に幅を設定しておき、その子となるimg要素にwidth:100%を指定することで、親要素と同じ幅に表示させている(06)。
ほかに、CSSで背景画像として埋め込み、それをbackground-sizeプロパティで変更する手法などもあるが、CSSファイルに個別に画像のディレクトリパスを記述する必要があり、メンテナンス性が悪くなってしまう。

06画像可変対応CSS記述例

06 画像可変対応CSS記述例

親要素の幅に対して100%の幅を持たせている。また、heightプロパティは幅にたいして自動的に調整できるようにautoとしている

SECTION3 スマートフォン向けにコンテンツを最適化する

スマートフォン向けにコンテンツを最適化する

スマートフォン向けコンテンツでは、その画面表示領域の狭さや通信速度を考慮して、コンテンツを減らす最適化も積極的に考えたい。ここでは、その手法を紹介していこう。

コンテンツ内の特定の部分を非表示にする

レスポンシブデザインでは、PC向けのレイアウトを入れ替えただけだと、スマートフォン向けとしては縦に長くなりすぎたり、ロードするデータ量が多くなって表示のネックとなる場合がある。そのような時は、思い切って一部のコンテンツを非表示にしてしまうのも一つの手段であろう。今回は01の赤枠で囲った部分を非表示にしてみよう。

01非表示とする領域

01 非表示とする領域

CSSで非表示にする

非表示にする手法の一つとして、CSSで「display:none」とする方法(02)があが、単純に「見えなくする」というだけで実際にはロードされているため、データ量は変わらない。サーバーサイドでコンテンツをコントロールしてロード量を削減することも可能だが、今回はフロントエンドで解決できるJavaScriptによる非表示方法を紹介しよう。

02CSSで非表示にする方法

02 CSSで非表示にする方法

ロードするデータ量を気にしないなら、このように非表示にするのが手軽だ

JavaScriptで表示・非表示を決める

01の赤枠で囲った部分を非表示にするために、まずはHTMLファイルを手作業で切り分ける必要がある。今回のサンプルでは、sidebnr.htmlというファイルに分離している(03)。次にCSSの切り替えと同様に、ウインドウサイズを取得する。481px以上(PC向け)の場合は、該当部分をjQueryでロード(表示)させている(04)。これにより、480px以下(スマートフォン向け)の場合は、該当部分をロードされなず、非表示となる仕組みだ。

03sidebnr.htmlの内容

03 sidebnr.html内容

このファイルを読み込む(ロードする)か否かをJavaScriptでコントロールして、該当部分を非表示にする

04スクリプト記述例

04 スクリプト記述例

スマートフォン向けレイアウトでは、該当部分を読み込まないので、データ容量の軽減につながる

お問い合わせはこちらからどうぞ