- 会社・スタッフ紹介
- メディア掲載_Web Designing
- SmartphoneLab.2012年9月号
執筆:伊藤洋介
SmartphoneLab.2012年9月号
スマートフォンに最適化したレスポンシブデザイン
Webサイト閲覧のためのスマートデバイスが増加している昨今、それらの端末ごとに最適化・構築しようとした場合、非常に多くのコストが想定される。今回は、それらを一元化するための一つのアプローチとして、最近のトレンドともなっているレスポンシブデザインでのサイト構築方法をスマートフォンに最適化した形で紹介しよう。
PC向けレイアウトをスマートフォン向けに最適化
これまでのWebサイト制作では、スマートフォン向け・PC向けに最適化されたレイアウトでそれぞれ開発する、もしくはデバイスごとの最適化は行われず、スマートフォンでもPC向けレイアウトを表示させるといった手法で構築する場合がほとんどを占めてきた。最適化を行わない場合、大画面を前提としたPC向けのレイアウトはコンテンツのデータ容量も大きくなり、画面サイズや通信速度に制限のあるスマートフォンでの閲覧は快適とは言い難い。また、スマートフォン向けコンテンツの最適化を行った場合、単純に新たな開発を行うことになり、メンテナンスもコストもそれに応じる形で膨らんでいく。
そういった問題を解決するアプローチとして、最近では単一のHTMLソースのみでPCとスマートフォンのそれぞれに対応したレイアウト・コンテンツを表示するレスポンシブデザインの手法が採用されることも増えてきた。
レスポンシブデザインは、CSS3のメディアクエリを利用してウインドウ幅を判別し、その違いによってレイアウトやコンテンツ内容を切り替えるものだ(01)。今回は、単にスマートフォンに対応したレスポンシブデザインではなく、スマートフォン向けに最適化した実装を紹介しよう。
01レスポンシブデザインの例
Media Queries:http://mediaqueri.es/
メディアクエリを用いたサンプルを紹介するギャラリーサイト。オーソドックスな形でレイアウトを変えている
Baby-G - CASIO:http://baby-g.jp/
デバイスのウインドウ幅によって、ダイナミックにレイアウトを変えている
SECTION1 メディアクエリで読み込むcssを切り替える
CSS3から実装されたメディアクエリを使うと、表示するデバイスによって読み込ませるCSSを切り替える事が可能だ。
メディアクエリの使い方
CSS3のメディアクエリでは、link要素中のmedia要素やCSSの@media規則を用いて、ウインドウ幅によってスタイルの適応範囲を切り替えていく。利用できる値には、「width/height」「min-width/min-height」「max-width/max-height」などがある。
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属性での記述例
複数デバイスに対応する場合、幅の切り替えポイントによって、このような記述を増やしていくことで対応可能だ
03@media規則での記述例
CSSファイルに直接記述して切り替えることも可能だ
SECTION2 スマートフォン向けレイアウトを調整する
PC向けレイアウトを元に、スマートフォン向けレイアウトをCSSで調整する。大きく異なるのはナビゲーションボタンの配置とカラム数、画像のサイズとなるので、その部分を重点的に解説していこう。
ナビゲーションの位置を変える
PC向けレイアウトではロゴの横に並べていたナビゲーション(02)を、スマートフォン向けレイアウトではロゴの下に並べている(03)。
PC向けには「position:absolute;」でロゴの右に配置しているが、そのスタイルの適用をやめると、スマートフォン向けでは自動的にロゴの下に配置される。
また、CSS3の擬似プロパティの「nth-child()」を用いて、li要素の奇数番目には要素の右側にボーダーを与えてli要素間にスペースを生み出している。
01レイアウト配置図
それぞれの場合の配置図。要素やクラス、IDの振り方はこのようになっている
02PC向けナビゲーションスタイル
「position:absolute;」と指定して絶対位置で配置している
03スマートフォン向けナビゲーションスタイル
奇数番目のli要素には、ボーダーのほか、偶数番目のli要素よりも1px低い幅の値を設定している
2カラムレイアウトから1カラムレイアウトへ
ウインドウサイズが小さくなるスマートフォン向けサイトでは、カラム数を減らして対応するのが一般的だ。「article」要素と「aside」要素で構成される2カラムレイアウトは、それらを囲う親要素である「div id="contents"」の幅と2つの要素を同じ幅にすることで、縦に並ぶ1カラムレイアウトに切り替えている(04、05)。
04PC向け2カラムレイアウト
960pxのコンテンツ幅に対し、630pxと300pxの要素を左右に回り込ませている
05スマートフォン向け1カラムレイアウト
300pxのコンテンツ幅に対し、それぞれ300pxを設定した要素を縦に並べている
画像のサイズを変える
今回のサンプルではメインとなる画像を配置している。これをスマートフォンサイト用の幅に適用させるために、img要素へのスタイル記述で対応している。親となる「div id="mainimg"」要素に幅を設定しておき、その子となるimg要素にwidth:100%を指定することで、親要素と同じ幅に表示させている(06)。
ほかに、CSSで背景画像として埋め込み、それをbackground-sizeプロパティで変更する手法などもあるが、CSSファイルに個別に画像のディレクトリパスを記述する必要があり、メンテナンス性が悪くなってしまう。
06画像可変対応CSS記述例
親要素の幅に対して100%の幅を持たせている。また、heightプロパティは幅にたいして自動的に調整できるようにautoとしている
SECTION3 スマートフォン向けにコンテンツを最適化する
スマートフォン向けコンテンツでは、その画面表示領域の狭さや通信速度を考慮して、コンテンツを減らす最適化も積極的に考えたい。ここでは、その手法を紹介していこう。
コンテンツ内の特定の部分を非表示にする
レスポンシブデザインでは、PC向けのレイアウトを入れ替えただけだと、スマートフォン向けとしては縦に長くなりすぎたり、ロードするデータ量が多くなって表示のネックとなる場合がある。そのような時は、思い切って一部のコンテンツを非表示にしてしまうのも一つの手段であろう。今回は01の赤枠で囲った部分を非表示にしてみよう。
01非表示とする領域
CSSで非表示にする
非表示にする手法の一つとして、CSSで「display:none」とする方法(02)があが、単純に「見えなくする」というだけで実際にはロードされているため、データ量は変わらない。サーバーサイドでコンテンツをコントロールしてロード量を削減することも可能だが、今回はフロントエンドで解決できるJavaScriptによる非表示方法を紹介しよう。
02CSSで非表示にする方法
ロードするデータ量を気にしないなら、このように非表示にするのが手軽だ
JavaScriptで表示・非表示を決める
01の赤枠で囲った部分を非表示にするために、まずはHTMLファイルを手作業で切り分ける必要がある。今回のサンプルでは、sidebnr.htmlというファイルに分離している(03)。次にCSSの切り替えと同様に、ウインドウサイズを取得する。481px以上(PC向け)の場合は、該当部分をjQueryでロード(表示)させている(04)。これにより、480px以下(スマートフォン向け)の場合は、該当部分をロードされなず、非表示となる仕組みだ。
03sidebnr.htmlの内容
このファイルを読み込む(ロードする)か否かをJavaScriptでコントロールして、該当部分を非表示にする
04スクリプト記述例
スマートフォン向けレイアウトでは、該当部分を読み込まないので、データ容量の軽減につながる